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

Question

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
}
}]
}
}

Answer 1

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>