Chartjs-How to display data on hover inside doughnut chart in Angular Chart?

by

0👍

Extend the answer of Alesana from this:

How to add text inside the doughnut chart using Chart.js?

and register an additional plugin service:

Chart.pluginService.register({
  beforeTooltipDraw: function(chart) {
    if (chart.config.options.elements.center) {
        if (chart.tooltip._active && chart.tooltip._active.length > 0) {
            chart.config.options.elements.center.text = 
                chart.tooltip._active[0]._view.label + ':' + chart.tooltip._data.datasets[0].data[chart.tooltip._active[0]._index];
        }
    }
  }
});

For the chart, you may also want to put:

options: {
    tooltips: { enabled: false }
}

I know that it may not be a good idea to use _view, _data, etc. Please correct this to a better way to access the label and dataset values.

Leave a comment