How to display pie slice data and tooltip together using chart.js

by

1👍

✅

Extend the chart and move your drawSegmentValues to inside the draw override, like so

Chart.types.Pie.extend({
  name: "PieAlt",
  draw: function(){
    Chart.types.Pie.prototype.draw.apply(this, arguments);
    drawSegmentValues(this)
  }
});

then use PieAlt

var myPieChart = new Chart(ctx).PieAlt(data, {
  showTooltips: true,
  tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%"
});

and modify the drawSegmentValues function slightly 

function drawSegmentValues(myPieChart)
{
  var radius = myPieChart.outerRadius
  ...

Update

If you have a problem with the labels moving set the context textAlign and textBaseline properties, like so

...
ctx.font = textSize + "px Verdana";
ctx.textAlign = "start";
ctx.textBaseline = "bottom";
...

Leave a comment