How to stick a title for each line?

[Arrivederchi]

Hello, is it possible to do as in the screenshot so that each line has a title?

[Udemology]

It is possible. This video covers one on the right side: https://youtu.be/N8RKossfqX4
Just need to position it to the left side.

[Udemology]

Hi Kurkle,

Thank you for your valuable feedback. Yes I try to cover many different parts of Chart.js. I will redo this video with your suggestion. Highly appreciate it.

[stockiNail]

@Udemology very nice! Anyway adding a label on chart you can also use https://github.com/chartjs/chartjs-plugin-annotation, adding a label annotation at initial value of the dataset and deactivating the clip: false in order to write the label out side of chart area.

codepen: https://codepen.io/stockinail/pen/gOvOqXx

I think also you can reach the goal also by https://github.com/chartjs/chartjs-plugin-datalabels

[stockiNail]

Here is datalabels codepen: https://codepen.io/stockinail/pen/mdXdvvq

[Arrivederchi]

Here is datalabels codepen: https://codepen.io/stockinail/pen/mdXdvvq

thx, but if i have several datasets, how can i make a separate label for each?

[stockiNail]

@Arrivederchi the only change in the codepen is to use datasetIndex property of datalabels context (see doc https://chartjs-plugin-datalabels.netlify.app/guide/options.html#option-context):

formatter: function(value, context) {
  if (context.dataIndex === 0) {  // <-- check if it is the first data
    return context.chart.data.datasets[context.datasetIndex].label;   // <-- applied to all datasets of the chart
  }
  return '';
}

Codepen is changed accordingly: https://codepen.io/stockinail/pen/mdXdvvq