[Chartjs]-Inverting X axis number labels in chart.js scatter chart

1👍

This is intergraded in by using the reverse option:

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

Documentation

enter image description here


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/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>

Updated fiddle

Output:

enter image description here

Leave a comment