[Chartjs]-How to skip labels on x-axes?

12👍

✅

In the chart options, you can change an axe’s ticks’ callback to display the tick (the label) based on a value, or even change what it displays :

options: {
    scales: {
        xAxes: [{
            ticks: {
                callback: function(tick, index, array) {
                    return (index % 3) ? "" : tick;
                }
            }
        }]
    }
}

This option basically display one tick every three.

You can check a full script in this jsfiddle, and here is its result :

[Chartjs]-Chart.js 2.0 current mouse coordinates tooltip

0👍

In chart.js version 4 you have to call this.getLabelForValue method to get the original label for the tick

scales: {
  x: {
    ticks: {
      // For a category axis, the val is the index so the lookup via getLabelForValue is needed
      callback: function(val, index) {
        // Hide every 3rd tick label
        return index % 3 === 0 ? this.getLabelForValue(val) : '';
      },
      color: 'red',
    }
  }
}

Here is an example from Chart.js website: https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html