I would like to add the text Umsatz pro Monat: * above the green line for example. So that I can use the value of the name of the data set to hold the text like below:
"datasets": [
{
"name": 'Add the text Umsatz pro Monat: *',
"data": [713197, 713197, 713197, 713197, 713197,713197, 713197, 713197, 713197, 713197, 713197,713197],
"borderColor": "green",
"backgroundColor": 'transparent',
"type": 'line'
}
So far I only have my config but it doesn't work as expected. The text is shown multiple times and it only shows when hovering the canvas:
Chart.pluginService.register({
afterDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
// 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';
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
console.log(dataset);
if(dataset.type == "line") {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
chartInstance.ctx.fillText(dataset.name, model.x, model.y - 20)
}
}
});
} });
Any help would be greatly appreciated