From what I know, I do not believe that Chart.JS has any functionality that helps draw text on a pie chart. But this does not mean that you cannot do it yourself in native JavaScript. I will give you an example of how to do this, below is the code for drawing text for each segment in a pie chart:
function drawSegmentValues() { for(var i=0; i<myPieChart.segments.length; i++) { // Default properties for text (size is scaled) ctx.fillStyle="white"; var textSize = canvas.width/10; ctx.font= textSize+"px Verdana"; // Get needed variables var value = myPieChart.segments[i].value; var startAngle = myPieChart.segments[i].startAngle; var endAngle = myPieChart.segments[i].endAngle; var middleAngle = startAngle + ((endAngle - startAngle)/2); // Compute text location var posX = (radius/2) * Math.cos(middleAngle) + midX; var posY = (radius/2) * Math.sin(middleAngle) + midY; // Text offside to middle of text var w_offset = ctx.measureText(value).width/2; var h_offset = textSize/4; ctx.fillText(value, posX - w_offset, posY + h_offset); } }
A Pie Chart has an array of segments stored in PieChart.segments , we can look at the startAngle and endAngle these segments to determine the angle between where the text will be middleAngle . Then we move in that direction on Radius/2 to be at the midpoint of the chart in radians.
The above example performs some other cleaning operations, because the position of the text shown in fillText() is the upper right corner, we need to get some offset values to fix this. And finally, textSize is determined based on the size of the chart itself, the larger the chart, the larger the text.
Script example
With minor changes, you can change the values of the discrete numbers for the data set into percentile numbers on the graph. To do this, get the total number of value elements in your data set, call it totalValue . Then on each segment you can find the percentage:
Math.round(myPieChart.segments[i].value/totalValue*100)+'%';
Here, the myPieChart.segments[i].value/totalValue calculates the percentage that the segment occupies in the chart. For example, if the current segment was 50 , and totalValue was 200 . Then the percentage that the segment occupied will be as follows: 50/200 => 0.25 . The rest is to do it well. 0.25*100 => 25 , then we will add a % to the end. For an integer percent of tiles, I rounded to the nearest integer, although it could lead to problems with accuracy. If we need higher precision, you can use .toFixed(n) to store decimals. For example, we could do this to save one decimal place if necessary:
var value = myPieChart.segments[i].value/totalValue*100; if(Math.round(value) !== value) value = (myPieChart.segments[i].value/totalValue*100).toFixed(1); value = value + '%';
Script Example percentile with decimal places
Script Example percent with integers