+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Chart.js - year independent x-axis (/showthread.php?tid=2249)
Chart.js - year independent x-axis - ludwigmller - 22.03.2023
I have data for several years, that should be plotted in a line graph. Data example:
Code:
date season cum_sum
2021-12-23 2022 11
2022-01-01 2022 19
2022-01-04 2022 20
2022-01-05 2022 40
2022-03-01 2022 43
2022-12-01 2023 3
2022-12-02 2023 7
2022-12-10 2023 11
2022-12-23 2023 17
2023-01-01 2023 19
2023-01-05 2023 30As you see in the attached image, the x-axis is not chronological. Days of the season 2023, that were not part of the season 2022, are plotted at the end of the x-axis. E.g.: data_2022 = ["01-03", 5], ["01-10", 15] data_2023 = ["01-03", 10], ["01-05",20] --> 01/05 is plotted on the end of the x-axis.
![[Bild: 20230322042517ad21787bf2f822c510187e82dae7288f.png]](https://javascript-forum.de/uploads/userpics/20230322042517ad21787bf2f822c510187e82dae7288f.png)
Here my current JS-Code:
Code:
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Season 2022',
data: data_2022,
borderColor: 'blue',
fill: false
}, {
label: 'Season 2023',
data: data_2023,
borderColor: 'red',
fill: false
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'MMM DD'
},
tooltipFormat: 'MM-DD',
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});