Develop Reference

Chart.js sum y values depending on time unit

New to Chart.js, I was wondering if there is a built in method to sum y values depending on time unit.
Asking here after a lot of search in the docs.
For now, the bar for March shows 20 and the bar for June shows 10.
I want to have 25 for March and 15 for June, so to sum y for the same month.
const ctx = document.getElementById("tests-chart")
const testsChart = new Chart(ctx, {
type: "bar",
data: {
datasets: [
{
label: 'Dataset 1',
data: [
{ x: "24/03/2022", y: 20 },
{ x: "25/03/2022", y: 5 },
{ x: "24/06/2022", y: 10 },
{ x: "25/06/2022", y: 5 },
],
backgroundColor: 'rgb(255, 99, 132)',
},
],
},
options: {
scales: {
x: {
type: "time",
time: {
parser: "dd/MM/yyyy",
unit: "month",
// Luxon format string
tooltipFormat: "MM",
round: 'month'
},
},
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="tests-chart"></canvas>
</div>

You can manipulate your dataset as mentioned below and achieve your expected output.
const ctx = document.getElementById("tests-chart");
const data =[
{ x: "24/03/2022", y: 20 },
{ x: "25/03/2022", y: 5 },
{ x: "24/06/2022", y: 10 },
{ x: "25/06/2022", y: 5 }
];
let updatedData =[];
let tempDateCollection =[];
data.map((yData , index)=> {
const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY');
if(tempDateCollection.includes(formatedDate)){
const index = tempDateCollection.indexOf(formatedDate);
const element = updatedData[index];
updatedData[index] = {...element, y: element.y + yData.y}
} else{
tempDateCollection.push(formatedDate);
updatedData.push(yData);
}
})
const testsChart = new Chart(ctx, {
type: "bar",
data: {
datasets: [
{
label: 'Dataset 1',
data:updatedData,
backgroundColor: 'rgb(255, 99, 132)',
},
],
},
options: {
scales: {
x: {
type: "time",
time: {
parser: "dd/MM/yyyy",
unit: "month",
// Luxon format string
tooltipFormat: "MM",
round: 'month'
},
},
},
},
})
<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="tests-chart"></canvas>
</div>

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>

Time format on the x axis in Chart.js

I am trying to plot some data as a scatter plot using Chart.js. I tryed almost everything on the internet and I am still getting the x-axis as shown in the screenshot below. The date format is an interger and I need it a date.
EDIT:
I also find out, when I omit the square brackets for the axis properties, which is teh way described in the documentations, I am getting an error (Uncaught Error: This method is not implemented: Check that a complete date adapter is provided. ). When I used the square brackets for the axis, the properties are not recognised.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
The result I am getting is:

You can use a callback function to alter how the data on the axis is displayed.
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
callback: function(value, index, values){
// do something with value
return value;
}
}
}],
},
};

I found out, where the problem was:
I needed to reference an adaptor for the moment like this and remove the the square brackets for the properties of the axis as shown in the documetnation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.2"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: {ticks: {min: 0}},
xAxes: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
},
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>

Chart.js time scale graph - xAxis labelling

I'm trying to set my own labels on the xAxis however I'm not sure how to do it using the example code I found.
I want it to look like this essentially: https://www.chartjs.org/samples/latest/scales/time/line.html
var result = [{ x: "00:01:53", y: "22" }, { x: "00:02:13", y: "45" }, { x: "00:02:43", y: "46" }, { x: "00:02:51", y: "51" }];
var result2 = [{ x: "00:01:52", y: "20" }, { x: "00:02:11", y: "42" }, { x: "00:02:41", y: "43" }, { x: "00:02:38", y: "50" }];
var labels = result.map(e => moment(e.x, 'h:mm:ss'));
var data = result.map(e => +e.y);
var data2 = result2.map(e => +e.y);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'g-force',
data: data,
borderColor: "#3e95cd",
borderWidth: 1
},
{
label: 'g-force',
data: data2,
borderColor: "#8e5ea2",
borderWidth: 1
}
],
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormats: {
second: 'h:mm:ss'
}
}
}]
},
}
});

This seems to work. This code starts from today and adds in the next 10 days. You'll have to change date to whenever you want your start date to be as well as how many dates you need.
let labels = [];
var date = new Date();
var options = {
month: "long",
day: "numeric"
};
for (i = 0; i < 10; i++) {
date.setDate(date.getDate() + i);
labels.push(date.toLocaleDateString("en-US", options));
}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
...

Chartjs not showing all data points

I have a dataset with 3 points in it, but only two are being shown on the chart
The code to create this graph is
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Submission',
data: [{
t: new Date("April 1, 2018"),
y: 2
}, {
t: new Date("April 10, 2018"),
y: 1
}, {
t: new Date("April 27, 2018"),
y: 1
}],
backgroundColor: ["rgba(90, 150, 200, 0.6)"]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Clearly there are three data points but it seems to only show the 2 on the chart. How can this be fixed?

I fixed this by adding labels for each data point.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["April 1, 2018", "April 10, 2018", "April 27, 2018", ],
datasets: [{
label: 'Submission',
data: [{
t: new Date("April 1, 2018"),
y: 2
}, {
t: new Date("April 10, 2018"),
y: 1
}, {
t: new Date("April 27, 2018"),
y: 1
}, {
t: new Date(),
y: 0
}],
backgroundColor: ["rgba(90, 150, 200, 0.6)"]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});