[Chartjs]-Different gridline steps on chart js line chart

by

8👍

✅

Unfortunately, with the current Chart.js API, there is no clean way to configure gridline placement independent from tick placement. In other words you cannot configure an axis to show a tick every 5 steps while still showing gridlines every 1 step.

Even though there is no clean way, there is however, still a way to get the behavior your after.

The below configuration will give you the desired results, but the only drawback is the gridlines still extend beyond the axis for the hidden tick labels (e.g. it looks a little funny).

var chartInstance = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          stepSize: 1
        },
        callback: function(value, index, values) {
         if (value % 5 === 0) {
           return value;
         } else {
           return ' ';
         }
       },
      }]
    }
  }
});

Here is a working example via codepen.

Leave a comment