Chartjs-Modify the x-axis label in chart js

by

1👍

I had to guess the semantics of your data but came up with following runnable code snippet. I hope this helps. 

const words = ['Apple','Orange','Banana', 'Pineapple', 'Strawberry', 'Lemon'];

new Chart(document.getElementById("myChart"), {
    "type": "scatter",
    "data": {
        datasets: [{
            label: 'Dataset1',
            borderColor: '#FF0000',
            data: [{ x: 1, y: 88 }, { x: 2, y: 89 }, { x: 3, y: 86 }]
            }, {
            label: 'Dataset2',
            borderColor: '#00FF00',
            data: [{ x: 1, y: 65 }, { x: 2, y: 78 }, { x: 3, y: 33 }]
        }]
    },
    "options": {
        type: 'linear',
        position: 'bottom',
        scales: {
            xAxes: [{
                type: 'linear',
                ticks: {                    
                    callback: (value, index, values) => words[index],
                    stepSize: 1                    
                }
            }]
        }     
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment