[Chartjs]-How do you label points in a scatterChart built using ng2-chart

by

1👍

The tooltip for points are provided using the options binding for canvas.

Add the tooltip as a callback to your scatterChartOptions object like so in your TS file:

public scatterChartOptions: ChartOptions = {
    responsive: true,
    tooltips: {
      callbacks: {
        label: (item, data) => 
        {
          console.log(item);
          return 'Label: ' + item.xLabel + ' ' + item.yLabel
        }
      }
    }
  };

This should display a simple label with your x and y values.

Take a look at this working StackBlitz.

0👍

Thanks to Viqas’s tip, I managed to solve this:

   tooltips: {
      callbacks: {
        label: (item, data) =>
        {
          if (item.index===0){
            return 'Risque: 0'
          }
          else if (item.index===1) {
            return 'Risque: 1'
          }
        }
      }
    }

This way, I can control what label to display depending on which point I want.

Leave a comment