Chart.js v2: How to make tooltips always appear on pie chart?
Solution 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;
}
}
});
Solution 2
With the new Chart.js 2.1 you can write a plugin to do this and control it via an options
property
Preview
Script
Note that you need to register the plugin before you initialize 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 the older 2.x version, you should able to move the same (or similar, I'm not sure about the earlier data structure ) to the options.animation.onComplete
Fiddle - http://jsfiddle.net/q15ta78q/
Solution 3
I was looking for similar solution and came across this chartjs plugin Chart.PieceLabel.js. It has configs to display modes like label, value and percentage.
Solution 4
According to the closed issue on the github page for chart.js, displaying tool tips permanently is not recommended.
This comment closing this issue gives more detail:
https://github.com/chartjs/Chart.js/issues/1861#issuecomment-442852768
and this is the recommended plugin for permanent data labels:
Danny
Software engineer, but mostly working on front-end development. Ask me about: HTML5, CSS3, JavaScript, ES6 PHP, jQuery, Python MySQL, MongoDB React JS, React Native
Updated on April 10, 2020Comments
-
Danny about 4 years
I have found similar questions in Stack Overflow, but all of them were addressed one and two years ago. Now Chart.js has come up in version 2, and lots of the documentation changes. Can someone please help me showing an example of pie chart with labels - or pie chart with all of its segment's tooltips are visible?
UPDATE
Thanks to @potatopeelings, his answer works perfectly for Chart.js v2.1.
Although I initially asked how to permanently show tooltips on pie chart here, I found a better solution: showing values as labels in percentages! It is now enabled for pie chart in Chart.js v2.1. In the chart options:
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's 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); } },