Chart.js v2: How to make tooltips always appear on a pie chart?

Question

I found similar questions in Stack Overflow, but all of them were considered one and two years ago. Chart.js has now appeared in version 2, and much of the documentation has changed. Can someone help me show an example of a pie chart with labels - or is a pie chart with all its segment tooltips visible?

UPDATE

Thanks to @potatopeelings, his answer works great for Chart.js v2.1.

Although I initially asked how to constantly show hints in a pie chart, I found a better solution: showing the values ​​as percent marks! It is now enabled for pie chart in Chart.js v2.1. In the chart parameters:

animation: { duration: 0, onComplete: function () { var self = this, chartInstance = this.chart, ctx = chartInstance.ctx; ctx.font = '18px Arial'; ctx.textAlign = "center"; ctx.fillStyle = "#ffffff"; Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) { var meta = self.getDatasetMeta(datasetIndex), total = 0, //total values to compute fraction labelxy = [], offset = Math.PI / 2, //start sector from top radius, centerx, centery, lastend = 0; //prev arc end line: starting with 0 for (var val of dataset.data) { total += val; } Chart.helpers.each(meta.data.forEach( function (element, index) { radius = 0.9 * element._model.outerRadius - element._model.innerRadius; centerx = element._model.x; centery = element._model.y; var thispart = dataset.data[index], arcsector = Math.PI * (2 * thispart / total); if (element.hasValue() && dataset.data[index] > 0) { labelxy.push(lastend + arcsector / 2 + Math.PI + offset); } else { labelxy.push(-1); } lastend += arcsector; }), self) var lradius = radius * 3 / 4; for (var idx in labelxy) { if (labelxy[idx] === -1) continue; var langle = labelxy[idx], dx = centerx + lradius * Math.cos(langle), dy = centery + lradius * Math.sin(langle), val = Math.round(dataset.data[idx] / total * 100); ctx.fillText(val + '%', dx, dy); } }), self); } }, 

Answer 1

Solution for ChartJs version> 2.1.5:

 Chart.pluginService.register({ beforeRender: function (chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips // we can't use the chart tooltip because there is only one tooltip per chart 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)); }); }); // turn off normal tooltips chart.options.tooltips.enabled = false; } }, afterDraw: function (chart, easing) { if (chart.config.options.showAllTooltips) { // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once if (!chart.allTooltipsOnce) { if (easing !== 1) return; chart.allTooltipsOnce = true; } // turn on tooltips chart.options.tooltips.enabled = true; Chart.helpers.each(chart.pluginTooltips, function (tooltip) { tooltip.initialize(); tooltip.update(); // we don't actually need this since we are not animating tooltips tooltip.pivot(); tooltip.transition(easing).draw(); }); chart.options.tooltips.enabled = false; } } }); 

Answer 2

With the new Chart.js 2.1, you can write a plugin for this and manage it using the options property

---

Preview

---

Script

Please note that you need to register the plugin before initializing the chart.

 Chart.pluginService.register({ beforeRender: function (chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips // we can't use the chart tooltip because there is only one tooltip per chart 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, _active: [sector] }, chart)); }); }); // turn off normal tooltips chart.options.tooltips.enabled = false; } }, afterDraw: function (chart, easing) { if (chart.config.options.showAllTooltips) { // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once if (!chart.allTooltipsOnce) { if (easing !== 1) return; chart.allTooltipsOnce = true; } // turn on tooltips chart.options.tooltips.enabled = true; Chart.helpers.each(chart.pluginTooltips, function (tooltip) { tooltip.initialize(); tooltip.update(); // we don't actually need this since we are not animating tooltips tooltip.pivot(); tooltip.transition(easing).draw(); }); chart.options.tooltips.enabled = false; } } }); 

and then

 new Chart(ctx, { type: 'pie', data: data, options: { showAllTooltips: true ... 

With an older version 2.x you can port the same (or similar, I'm not sure about the earlier data structure) to options.animation.onComplete

---

Fiddle - http://jsfiddle.net/q15ta78q/

Answer 3

I was looking for a similar solution and came across this chartjs Chart.PieceLabel.js plugin . It has configurations for displaying such modes as label, value and percentage.