How to display the corresponding data item of a section on hover in ChartJS? It shouldn't display anything initially but on hover, it should display the data item of the corresponding section of the doughnut in the center. Something like this: https://giphy.com/gifs/pj3umMCJnx3yGUneis/fullscreen
1 Answers
If you could share some of your code that would help quite a bit, but not having used Chart.js I did some searching and found this:
https://jsfiddle.net/cmyker/ooxdL2vj/
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
Hope this helps!
Related