1👍
✅
Using the plugin from this github issue seems to work, assuming you are on the latest version of chartjs (2.7.1 at the time of this answer)
here is a fiddle with working plugin: https://jsfiddle.net/Lngyxg3r/
here is the code from that fiddle:
html:
<canvas id="pie-chart"></canvas>
js:
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;
}
}
});
function showPieChart(){
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [50,25,15,10],
backgroundColor: ['#585ba7','#999acb','#8ac0e9','#363e96'],
label: 'Dataset 1'
}],
labels: ['Token Sale','Foundation','Early Contributors','Team & Advisors']
},
options: {
tooltipTemplate: "<%= value %>",
showTooltips: true,
showAllTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: [],
cutoutPercentage: 90,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
legend: {
display: false,
},
title: {
display: false,
},
animation: {
animateRotate: true,
duration: 1000,
animateScale: true,
animationSteps: 15
}
}
};
var ctx = $("#pie-chart").get(0).getContext("2d");
Chart.defaults.global.maintainAspectRatio = false;
window.myDoughnut = new Chart(ctx, config);
}
showPieChart();
Source:stackexchange.com