Show label for every data point in line chart - chart.js

Question

I use a line chart rendered by Chart.js. I use multiple datasets whereas dataset consists of one data point (x,y) only (given from the business domain).
The chart displays the information about each point (x,y,label) when hovering it, however I'd like to have a label next to each point by default/everytime that shows the respective label.
I could not find any solution during my research.
Any pointers? Is that actually possible to achieve with Chart.js?

Answer 1

It is possible to do this with chart.js using the plugins API. Here is an example of a plugin that I use in production to show labels for all data points when the chart renders.
Note, I currently only use bar charts so you might have to tweak some things for line charts. As you will also see, I added a new options property called showDatapoints that I can set to true in order to use the plugin on certain graphs.
Chart.plugins.register({
afterDraw: function(chartInstance) {
if (chartInstance.config.options.showDatapoints) {
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = fontColor;
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
ctx.fillText(dataset.data[i], model.x, yPos);
}
});
}
}
});