Chartjs-How to skip tick interval on chart.js x-axis?

by

0👍

✅

You can define the scriptable option options.scales.x.grid.tickColor as follows. This generates an array that specifies a color for every 3rd tick line only.

grid: {
  tickColor: labels.map((l, i) => i % 3 ? null : 'lightgray')
}

For further information, consult Grid Line Configuration from the Chart.js documentation.

Please take a look at the runnable code below and see how it works.

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
const data = [65, 59, 80, 81, 56, 55, 40];

new Chart('myChart', {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'My Dataset',
      data: data,
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      x: {
        autoSkip: false,
        grid: {
          tickColor: labels.map((l, i) => i % 3 ? null : 'lightgray')
        },
        ticks: {
          callback: (t, i) => i % 3 ? '' : labels[i]
        },
      },
      y: {
        beginAtZero: true
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Leave a comment