Chartjs-How to add text inside the doughnut chart using Chart.js AngularJS 2.0?

0👍

Solved it, perhaps not ideally, but solved it.

Register a plugin that enables the tooltips to remain up, then call the plugin from the options.

Include a script file under where you imported chart.js in your index.html with the following code in it:

Chart.pluginService.register({
    beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {

        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function (dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                   _active: [sector]
                }, chart));
            });
        });

        chart.options.tooltips.enabled = false;
    }
},
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
        if (!chart.allTooltipsOnce) {
            if (easing !== 1)
                return;
            chart.allTooltipsOnce = true;
        }

        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
    }
  }
});

Then in the options of your chart, include:

options: {
    showAllTooltips: true
}

For extra points, you can include it in your app.component.ts, underneath/outside the class however you need to declare Chart with declare var Chart:any;

Leave a comment