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

Minimalism 0
Viewed 35

I am working with Chart.js. I want to display every third tick and label on the chart. With the code below, I am able to skip every third label not the interval/tick also.

I want to skip/remove the interval. Is it possible to skip the tick and interval without modifying the input data ?

I'll for thank full for any kind of inputs/help?

 options: {
        scales: {
            xAxes: [{
               autoSkip: false,
                ticks: {
                    callback: function(tick, index, array) {
                        return (index % 3) ? "" : tick;
                    }
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
linechart tooltip chart.js
1 Answers

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>

uminder0
Related