Chart.js - year independent x-axis

[ludwigmller]

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    30

As 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.





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
                        }
                    }]
                    }
                }
                });