Frage chart.js - jahresunabhängige x-Achse

[LudwigM]

Moin,
ich möchte Daten von verschiednen Jahren bzw. Saisons in einem Diagramm darstellen (Jahres-/Saisonvergleich). Eine ist nicht gleich dem Zeitraum eines Jahres, sondern geht vom 1.11. bis 1.6.
Diese liegen in folgender Form vor:

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

Mit folgendem Code habe ich das Diagramm erzeugt:

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

Im angefügten Diagramm wird ersichtlich, dass die x-Achse nicht chronologisch ist. Der Dezember und die Tage der Saison 2023, die nicht Teil der Saison 2022 waren, werden am Ende der x-Achse aufgetragen. Z.B.: data_2022 = ["01-03", 5], ["01-10", 15] data_2023 = ["01-03", 10], ["01-05",20] --> 01/05 ist am Ende der x-Achse eingezeichnet.

Spoiler: Array-Data

Array(61) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

0: Object { x: "12/05", y: 2.5 }
x: "12/05"
y: 2.5
1: Object { x: "12/06", y: 10 }
x: "12/06"
y: 10
2: Object { x: "12/07", y: 11 }
x: "12/07"
y: 11
3: Object { x: "12/20", y: 20 }
x: "12/20"
y: 20

Hat jemand eine Idee iwe man das lösen kann?

 

[Sclero2004]

Hallo @LudwigM besteht das Problem noch?