Chartjs-Charts.js – How to create a custom X axis

by

0👍

Change the labels as shown in this example:

const data = {
  // Put whatever you want
  labels: [0, 5, 10, 15, 20],
  datasets: [
    {
     /* ........ */
    },
  ]
};

0👍

I found a solution, we need to add a new dataset and bind it to a custom X axis.

datasets: [{
            type: chartTypes.Line,
            xAxisID: 'custom-X-axis',
        },
/*...*/]

Then we need to add this custom axis and hide the default one

scales: {
            xAxes: [
                {
                    display: false,
                }, {
                    id: 'custom-X-axis',
                    type: 'linear',
                    ticks: {
                        min: 0,
                        max: 20,
                    }
                }
            ],
}

Leave a comment