How to show Y axis ticks for every point in the graph

Question

I'm using chartjs to display some data but I'm in trouble with the Y axis visualization. I want at every point in the graph a value in the Y axis. Right now the Y axis display value in steps of 10.

This is my actual yAxis configuration:

yAxes: [{
            position: "left",
            ticks: {
                source:"data",
            } 
        }]

This is the actual chart. I would like to display in the Y axis only the actual value of the points displayed. In the X axis this configuration works, the time is aligned with the points.

Expected:

Answer 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.