How do you revert xAxes with Chart.js?

Question

For some reason the xAxes of my chart goes from most recent data to oldest date. I obviously want it the other way around / the normal way. How do I revert the xAxes? .. or just the xAxes to act normally with dates.

My chart is here: https://www.betscout.com/tips (Click the Stats tab) I've already tried this option: https://jsfiddle.net/marineboudeau/4awme3fp/3 - but it doesn't work, not even in the provided example (nothing change when I replace reverse: true with reverse: false.)

I can easily reverse the yAxes this way, so why not xAxes?

Here's some of my JS code:

    let chart = document.getElementById('chart');
    let myLineChart = new Chart(chart, {
        type: 'line',
        data: {
            labels: grades,
            datasets: [{
                    data: numbers,
                    label: 'Total profit',
                    fill: false,
                    borderColor: '#3771a3'
      }]
        },
        options: {
            scales: {
                yAxes: [{
                    gridLines: {
                        display: true,
                        color: "rgba(55, 113, 163, 0.18)"
                    },

                    ticks: {
                        beginAtZero: true,
                    }
      }],
                xAxes: [{
                    gridLines: {
                        display: true,
                        color: "rgba(55, 113, 163, 0.18)"
                    },

                    ticks: {
                        display: true,
                        reverse: true,
                        fontSize: 12
                    }
            }]
            }
        }
    });
}

shrys shrys · Accepted Answer · 2019-06-27T12:19:51

I think it is still being discussed as to why it isn't working, you could do numbers.reverse() and grades.reverse() until it it fixed. fiddle

How do you revert xAxes with Chart.js?

1 Answers