Inverting X axis number labels in chart.js scatter chart

Question

I'm trying to plot a chart using chart.js with inverted order of the X axis. It's a scatter chart. This is the Js code I'm experimenting with:

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: '# of Votes',
            fill: false,
            showLine: true,
            cubicInterpolationMode: 'default',
            data: [
              {x: 118, y: 92.82 }, {
              x: 115.8, y: 92.88 }, {
              x: 113.03, y: 93.62 }, {
              x: 110.94, y: 93.84 }, {
              x: 107.93, y: 94.95 }, {
              x: 103.86, y: 97.22 }, {
              x: 101.78, y: 98.54 }, {
              x: 100.68, y: 99.95 }, {
              x: 98.34, y: 102.58 }, {
              x: 96.67, y: 105.9 }, {
              x: 95.47, y: 109 }, {
              x: 94.69, y: 111.41 }, {
              x: 94.18, y: 113.71 }, {
              x: 93.92, y: 115.63 }, {
              x: 93.82, y: 117.25 }, {
              x: 93.67, y: 118.48 }, {
              x: 93.57, y: 120 }
              ],
              pointRadius: 0
        }]
    },
    options: {

    }
});

This is the image I obtain:

What I would like to obtain is having the x axis being inverted, so starting from 120 to 90, in descending order.

I looked around and tried a bunch of solutions but without success.

I have a JsFiddle to reproduce this code:

https://jsfiddle.net/webgio/43phnctq/

question from:https://stackoverflow.com/questions/65924666/inverting-x-axis-number-labels-in-chart-js-scatter-chart

Answer 1

This is intergraded in chart.js by using the reverse option:

options: {
    scales: {
        yAxes: [{
            ticks: {
                reverse: true
            }
        }]
    }
}

Documentation

---

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'sample title',
            fill: false,
            showLine: true,
            cubicInterpolationMode: 'default',
            data: [{ x: 118, y: 92.82 }, {x: 115.8, y: 92.88 }, {x: 113.03, y: 93.62 }, {x: 110.94, y: 93.84 }, {x: 107.93, y: 94.95 }, {x: 103.86, y: 97.22 }, {x: 101.78, y: 98.54 }, {x: 100.68, y: 99.95 }, {x: 98.34, y: 102.58 }, {x: 96.67, y: 105.9 }, {x: 95.47, y: 109 }, {x: 94.69, y: 111.41 }, {x: 94.18, y: 113.71 }, {x: 93.92, y: 115.63 }, {x: 93.82, y: 117.25 }, {x: 93.67, y: 118.48 }, {x: 93.57, y: 120 } ], 
            pointRadius: 0
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    reverse: true,
                }
            }]
        }
    }
});

canvas { max-width: 400px; }

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart"></canvas>