Develop Reference

How to render custom yAxis label on Highcharts Gantt with the 'custom' property?

I've got a Gantt chart:
And I want to use the series.gantt.custom object to set specific properties for each series on the yAxis.
From these properties I want to construct the yAxis labels.
My code:
Highcharts.ganttChart('container', {
yAxis: {
categories: ['1', '2'],
labels: {
formatter() {
return this.value
/* + this.chart.series[this.pos].custom.size */
},
}
},
series: [{
groupPadding: 1,
custom: {
size: "small",
},
type: 'line',
zoneAxis: 'x',
data: [{
y: 0,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1,
}
}, {
y: 0,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}, {
type: 'line',
zoneAxis: 'x',
custom: {
size: "large",
},
data: [{
y: 1,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1
}
}, {
y: 1,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}]
});
this.chart.series[this.pos].custom.size it's the bit that is not working.
The labels should be 1 small and 2 large.
A fiddle

You can reach this property through the series.options:
this.chart.series[this.pos].options.custom.size
Demo:
https://jsfiddle.net/BlackLabel/gLkn9uqf/

Charts.js display two combined line charts for last 7 days

I have 2 set of datasets I want to display in single line chart for last 7 days, and if possible only show single Y axis with max value from all data sets. I try to use time as xAxes but it is not showing up.
here is my code https://jsfiddle.net/e6trkxL0/

You have to place the labels for datapoints.
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
let chart = new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
labels: [],
datasets: [{
label: 'Dataset 1',
data: [1, 4, 66, 7, 12, 3, 8],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [31, 14, 6, 71, 1, 35, 9],
borderColor: '#880000',
backgroundColor: '#880000',
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
stacked: false,
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
xAxes: [{
type: "time",
// this is not doing much
// time: {
// min: start,
// max: end,
// unit: "day"
//}
}]
}
}
});
chart.render();
for (let i = 0; i < 7; i++) {
var labelDate = start;
labelDate.setDate(start.getDate() + 1);
chart.data.labels.push(labelDate.toLocaleString())
}
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="lastSevenDaysOverview"></canvas>

2 things, for a time axis in chart.js you need according to the documentation a time adapter. Also you defined you x axis scales as a array which is incorrect. You need to define all scales as an object where the key of the object is the scale ID, you can read more about it in the migration guide
For points to be mapped in the chart you also need to provide a x place which in this case needs to be the date for which the datapoint is valid.
To just show a single axis with the highest values you can let both datasets be mapped to the same y axis:
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: new Date('10-16-2021'),
y: 1
}, {
x: new Date('10-18-2021'),
y: 4
}, {
x: new Date('10-19-2021'),
y: 66
}],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [{
x: new Date('10-14-2021'),
y: 31
}, {
x: new Date('10-18-2021'),
y: 14
}, {
x: new Date('10-19-2021'),
y: 6
}],
borderColor: '#880000',
backgroundColor: '#880000'
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
x: {
type: "time",
min: start,
max: end,
time: {
unit: "day"
}
}
},
}
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

chart.js display even intervals between two dates and adding label to y axes

I am converting Jqplot chart to ChartJs and I want them both to look the same.
I have the following chart using the chart.js library.
var myChart = new Chart(ctxr, {
type: 'line',
data: {
datasets: [{
label: "Estimated cost",
data: [{
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 8
}, {
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 8
}],
borderColor: [
'rgba(196, 217, 45, 1)',
]
},
{
label: "Actual cost",
data: [{
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 23
}, {
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 24
}],
borderColor: [
'rgba(75, 178, 197, 1)',
]
}],
labels: [new Date("09/24/2020 10:26:20").toLocaleString(), new Date("09/24/2020 10:27:56").toLocaleString()]
},
options: {
responsive: true,
responsiveAnimationDuration: 1,
maintainAspectRatio: false,
aspectRatio: 1,
title: {
display: true,
text: 'Auction Overview'
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
ticks: {
// Include a GBP in the ticks
callback: function (value, index, values) {
return 'GBP' + value;
}
}
}],
xAxes: [{
type: 'time',
}]
}
}
});
that gives me this chart
I would like to make it have intervals of time between the start date and the end date(like the x axis on the Jqplot chart) and also add string "GBP" in front of each y-value (like y-axis of Jqplot chart).
Both graphs are generated with the same identical data. so they should look the same.
So far everything i have tried from the chart.js docs has failed.
Below is a snipped of my js console:

There is something else wrong with your implementation that you have not told us about, because copy and pasting your code results in a working chart with GBP labels and time span. See below.
Please check your console for errors and also make sure that you are including moment.js, a dependency of Chart.js when work with dates.
I've also set options.yAxes[0].ticks.beginAtZero to true to more closely match the example you gave.
var ctxr = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctxr, {
type: 'line',
data: {
datasets: [{
label: "Estimated cost",
data: [{
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 8
}, {
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 8
}],
borderColor: [
'rgba(196, 217, 45, 1)',
]
},
{
label: "Actual cost",
data: [{
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 23
}, {
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 24
}],
borderColor: [
'rgba(75, 178, 197, 1)',
]
}
],
labels: [new Date("09/24/2020 10:26:20").toLocaleString(), new Date("09/24/2020 10:27:56").toLocaleString()]
},
options: {
responsive: true,
responsiveAnimationDuration: 1,
maintainAspectRatio: false,
aspectRatio: 1,
title: {
display: true,
text: 'Auction Overview'
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
// Include a GBP in the ticks
callback: function(value, index, values) {
return 'GBP' + value;
}
}
}],
xAxes: [{
type: 'time',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3"></script>
<canvas id="chart"></canvas>

Chart.js issue in plotting numeric X and Y in line chart

I have bellow Code to display a Chart using Chart.js.
<canvas id="canvasline" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById('canvasline').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['0', '30', '50'],
datasets: [{
data: [
{ x: "0", y: 0 },
{ x: "10", y: 10 },
{ x: "20", y: 20 },
{ x: "30", y: 30 },
{ x: "40", y: 40 },
{ x: "50", y: 50 },
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: true,
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 10
},
gridLines: {
display: true
}
}],
xAxes: [{
ticks: {
display: true,
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 3
},
gridLines: {
display: true
}
}]
}
}
});
</script>
Working Code Example:
https://jsfiddle.net/2vcrsq6n/
I am facing the below issues:
For the X-Axis label "30", I see X data "10" is getting displayed
At the runtime I get an JSON array with X and Y values as an array, I want to plot this X and Y numbers on the graph how should I implement it.

When the data is specified as individual points through objects that contain an x and an y property, you should not define data.labels.
Also make sure, the x and y values are numbers but not strings.
Please take a look at your amended code below that uses the most recent stable version of Chart.js (2.9.3).
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [
{ x: 0, y: 0 },
{ x: 10, y: 10 },
{ x: 20, y: 20 },
{ x: 30, y: 30 },
{ x: 40, y: 40 },
{ x: 50, y: 50 }
],
showLine: true,
fill: false,
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 10
}
}],
xAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 3
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
To update your chart with new data, simply add or replace the data in the dataset and invoke chart.update() afterwards.
myChart.data.datasets[0].data = <new data>;
myChart.update();

ChartJS Scatter Graph X Axis Label Not showing up properly

I am fairly new to javascript world, so bear with me if there is an obvious solution to this, but I'm struggling to graph the dates (X-points) on the X axis of the chartjs graph. I get some weird times there that you can check on jsfiddle. What am I doing wrong?
var ctx = document.getElementById("myChart");
var data = {
datasets: [{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 11,
y: 2000000.00
},
{
x: 2017 - 04 - 12,
y: 1000000.00
},
{
x: 2017 - 04 - 13,
y: 3000000.00
},
]
},
{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 12,
y: 472943.00
},
{
x: 2017 - 04 - 13,
y: 1000000.00
},
]
},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
id: 'ScartCharxAxes',
type: 'time',
unit: 'day',
time: {
displayFormats: {
day: 'D MMM YYYY'
},
}
}]
}
}
});
My code is available on http://jsfiddle.net/py1bpf02/3/

In your datasets, dates should be strings. What you did is math, not dates. 2017-04-11 = 2002.
var ctx = document.getElementById("myChart");
var data = {
datasets: [
{
label: " Property",
lineTension: 0.1,
data: [{
x: "2017-04-11",
y: 2000000.00
},
{
x: "2017-04-12",
y: 1000000.00
},
{
x: "2017-04-13",
y: 3000000.00
},
]
},
{
label: " Property",
lineTension: 0.1,
data: [{
x: "2017-04-12",
y: 472943.00
},
{
x: "2017-04-13",
y: 1000000.00
},
]
},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
id: 'ScartCharxAxes',
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'D MMM'
},
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>