CODEWITHSUNDEEP
javascriptjquerychartschart.js
Vinil Vasani
Vinil Vasani

Reputation: 143

Display text in center of doughnut

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

Upvotes: 3

Views: 3716

Answers (1)

Brydon McCluskey
Brydon McCluskey

Reputation: 50

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!

Upvotes: 2

Related Questions