[Chartjs]-How to show Y axis ticks for every point in the graph

by

1👍

✅

You have to use the Axis Callbacks (docs), especially afterBuildTicks.

In my linked example (jsbin) I push 0 to my data because you can’t use beginAtZero: true and remove all the duplicates in the array.

data.push(0); //if 'beginAtZero' is wanted
let uniqueData = data.filter((v, i, a) => a.indexOf(v) === i);

In the options you define the min and max values and the ticks in afterBuildTicks.

options: {
  scales: {
    yAxes: [{
      ticks: {
        autoSkip: false,
        min: Math.min(...uniqueData),
        max: Math.max(...uniqueData)
      },
      afterBuildTicks: function(scale) {
        scale.ticks = uniqueData;
      }
    }]
  }
}

You will have problems with overlapping ticks but I don’t know a general way to prevent that and I don’t know your specific use case.

Leave a comment