Chart.js: Extend chart.js to add option to provide text above horizontal line chart dataset

时间:2018-07-25 04:20:58

标签: angular chart.js primeng

Add the text Umsatz pro Monat: * above the green line 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

0 个答案:

没有答案