How to display pie chart data values of each slice in chart.js

Question

I am using Chart.js for drawing pie chart in my php page.I found tooltip as showing each slice values.

But I wish to display those values like below image.

I do not know how to do this with chart.js.

Please help me.

My Javascript code:

function drawPie(canvasId,data,legend){
    var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");

    var piedata = [];
    $.each(data,function(i,val){
        piedata.push({value:val.count,color:val.color,label:val.status});
    });
    var options =
    {
        tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
    }
    var pie = new Chart(ctx).Pie(piedata,options);
    if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();
}

php code:

printf('<table><tr>');
echo '<td style="text-align: right;"><canvas id="pie-canvas-'
    . $canvasId
    . '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';

     echo '<script type="text/javascript">drawPie('
    . $canvasId
    . ', '
    . $data3
    .', '
    . $legend
    . ');</script>';

No.I want to display that values like in 2nd image.That is I do not want it to be displayed in tooltip.Simply within the chart. — Nithya.K, Oct 27 '15 at 09:01
I don't think the PHP code is needed here, I would just add the result of the PHP file to the question to allow an example snippet or fiddle. Also you can just use `ctx.fillText()` to do that, I don't think chart.js has direct support for doing that, but I may be wrong. — Spencer Wieczorek, Oct 27 '15 at 10:01
You could also add a custom tool-tip that simply shows the text. — Spencer Wieczorek, Oct 27 '15 at 10:07
@Spencer.I tried with `ctx.fillText()` and custom tool-tip.But still I didnt get.Can you please send some snippets from your try.? — Nithya.K, Oct 27 '15 at 12:30

score 77 · Answer 1 · edited Sep 26 '19 at 15:19

For Chart.js 2.0 and up, the Chart object data has changed. For those who are using Chart.js 2.0+, below is an example of using HTML5 Canvas fillText() method to display data value inside of the pie slice. The code works for doughnut chart, too, with the only difference being type: 'pie' versus type: 'doughnut' when creating the chart.

Script:

Javascript

var data = {
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
};

var pieOptions = {
  events: false,
  animation: {
    duration: 500,
    easing: "easeOutQuart",
    onComplete: function () {
      var ctx = this.chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';

      this.data.datasets.forEach(function (dataset) {

        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
              total = dataset._meta[Object.keys(dataset._meta)[0]].total,
              mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
              start_angle = model.startAngle,
              end_angle = model.endAngle,
              mid_angle = start_angle + (end_angle - start_angle)/2;

          var x = mid_radius * Math.cos(mid_angle);
          var y = mid_radius * Math.sin(mid_angle);

          ctx.fillStyle = '#fff';
          if (i == 3){ // Darker text color for lighter background
            ctx.fillStyle = '#444';
          }
          var percent = String(Math.round(dataset.data[i]/total*100)) + "%";      
          //Don't Display If Legend is hide or value is 0
          if(dataset.data[i] != 0 && dataset._meta[0].data[i].hidden != true) {
            ctx.fillText(dataset.data[i], model.x + x, model.y + y);
            // Display percent in another line, line break doesn't work for fillText
            ctx.fillText(percent, model.x + x, model.y + y + 15);
          }
        }
      });               
    }
  }
};

var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
  type: 'pie', // or doughnut
  data: data,
  options: pieOptions
});

HTML

<canvas id="pieChart" width=200 height=200></canvas>

jsFiddle

I realise this is an old answer, but would you be able to explain how I could swap out the percentage for the label? So the data is underneath the label on each slice? Thanks — JJ Gerrish, Jul 04 '18 at 10:57
Nevermind, was able to get the label with `var label = data.labels[i];` if anyone is wondering in the future — JJ Gerrish, Jul 04 '18 at 11:06
I have other chart in same Javascript. So what will be the ctx then? — Zenith, Jan 21 '20 at 18:44

score 28 · Answer 2 · answered Mar 21 '17 at 16:33

28

I found an excellent Chart.js plugin that does exactly what you want: https://github.com/emn178/Chart.PieceLabel.js

answered Mar 21 '17 at 16:33

Kamil Bednarz

748
6
9

Spencer Wieczorek · Accepted Answer · 2015-10-28T17:10:14.630

From what I know I don't believe that Chart.JS has any functionality to help for drawing text on a pie chart. But that doesn't mean you can't do it yourself in native JavaScript. I will give you an example on how to do that, below is the code for drawing text for each segment in the 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 of these segments to determine the angle in between where the text would be middleAngle. Then we would move in that direction by Radius/2 to be in the middle point of the chart in radians.

In the example above some other clean-up operations are done, due to the position of text drawn in fillText() being the top right corner, we need to get some offset values to correct for that. And finally textSize is determined based on the size of the chart itself, the larger the chart the larger the text.

Fiddle Example

With some slight modification you can change the discrete number values for a dataset into the percentile numbers in a graph. To do this get the total value of the items in your dataset, call this totalValue. Then on each segment you can find the percent by doing:

Math.round(myPieChart.segments[i].value/totalValue*100)+'%';

The section here myPieChart.segments[i].value/totalValue is what calculates the percent that the segment takes up in the chart. For example if the current segment had a value of 50 and the totalValue was 200. Then the percent that the segment took up would be: 50/200 => 0.25. The rest is to make this look nice. 0.25*100 => 25, then we add a % at the end. For whole number percent tiles I rounded to the nearest integer, although can can lead to problems with accuracy. If we need more accuracy you can use .toFixed(n) to save decimal places. For example we could do this to save a single decimal place when needed:

var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
    value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';

Fiddle Example of percentile with decimals

Fiddle Example of percentile with integers

@spencer...perfect!!..Thanks ..but here `var value = myPieChart.segments[i].value;` I wish the value would be in percentage of pie chart..Can you tell me how to do here.. — Nithya.K, Oct 28 '15 at 06:29
@Nithya.K The value is explicitly defined in the JS Object as a number, and the pie chart looks at those values to determine how much of the chart they take up. So you can get that by doing `currentValue/totalValue` to get the percentile (ex: `=>0.50`). Times that by 100 `=>50`, then add a `"%"` on the end. [Example here](http://jsfiddle.net/2gapedks/1/). — Spencer Wieczorek, Oct 28 '15 at 16:49
If the values are low .0.8% and 1%..If these values are nearby both values are override.it can not be readable.I tried with modifying angle,but totally confusing.How would you do?..I added the screenshot above. — Nithya.K, Oct 29 '15 at 06:04
@Nithya.K One way that could help is to change how far the text is drawn on the canvas (*determined by `(radius/2)` in the code*) for small values. For small values (say less than 5%), you may want to draw them on the edge or past the edge of the drawn graph, and along with that display force the display to be an integer. I'll give an example tomorrow. — Spencer Wieczorek, Oct 29 '15 at 07:31
Wow - very impressive answer; if it works for me, I'm going to Bountify it myself, because I've searched high and low for this answer. — B. Clay Shannon-B. Crow Raven, Sep 22 '16 at 22:02
If you feel like it and have time, please czech out http://stackoverflow.com/questions/39646320/how-can-i-show-a-subset-of-data-on-pie-pieces-in-chart-js-while-still-displaying (will be bountified for 500 points ASAP) — B. Clay Shannon-B. Crow Raven, Sep 22 '16 at 22:42
This works perfectly, but I didn't got the sin and cos part. Can anybody explain why we had to multiply r/2 with sin of middle angle? — Aman jangra, Mar 20 '18 at 10:10
@Amanjangra [Here is a diagram](https://imgur.com/a/OVp8q) visually showing each item (*Made in MS Paint just now*). This is is a unit circle with a radius of `radius`, `cos(angle)` tells us where to go in the `X` direction and `sin(angle)` where to go in the `Y` direction. The `radius/2` is the actual scalar on how far to move in that direction. `0` would be in the center of the circle, `r/2` would be in the middle of the circle, and `r` would be at the very edges of the circle. — Spencer Wieczorek, Mar 21 '18 at 02:54
@SpencerWieczorek Thanks, just needed to actully see it. Thanks again. — Aman jangra, Mar 21 '18 at 06:03

score 18 · Answer 4 · edited Sep 26 '19 at 15:20

18

You can make use of PieceLabel plugin for Chart.js.

{ pieceLabel: { mode: 'percentage', precision: 2 } }

~~Demo | Documentation~~

The plugin appears to have a new location (and name): Demo Docs.

edited Sep 26 '19 at 15:20

isherwood

58,414
16
114
157

answered Jun 12 '17 at 09:20

JKR

181
1
4

I want to use mode percentage concate with the label of legend. – SPnL Aug 03 '17 at 05:21

score 4 · Answer 5 · answered Mar 29 '22 at 01:50

For Chart.js 3

I've modified "Hung Tran"'s Code.

animation: {
  onProgress: function() {
    // console.error('this', this);
    const ctx = this.ctx;
    // ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    let dataSum = 0;
    if(this._sortedMetasets.length > 0 && this._sortedMetasets[0].data.length > 0) {
      const dataset = this._sortedMetasets[0].data[0].$context.dataset;
      dataSum = dataset.data.reduce((p, c) => p + c, 0);
    }
    if(dataSum <= 0) return;

    this._sortedMetasets.forEach(meta => {
      meta.data.forEach(metaData => {
        const dataset = metaData.$context.dataset;
        const datasetIndex = metaData.$context.dataIndex;
        const value = dataset.data[datasetIndex];
        const percent = (Math.round(value / dataSum * 1000) / 10) + '%';
        const mid_radius = metaData.innerRadius + (metaData.outerRadius - metaData.innerRadius) * 0.7;
        const start_angle = metaData.startAngle;
        const end_angle = metaData.endAngle;
        if(start_angle === end_angle) return; // hidden
        const mid_angle = start_angle + (end_angle - start_angle) / 2;

        const x = mid_radius * Math.cos(mid_angle);
        const y = mid_radius * Math.sin(mid_angle);

        ctx.fillStyle = '#fff';
        ctx.fillText(percent, metaData.x + x, metaData.y + y + 15);
      });
    });
  }
}

score 3 · Answer 6 · answered Dec 27 '16 at 06:32

@Hung Tran's answer works perfect. As an improvement, I would suggest not showing values that are 0. Say you have 5 elements and 2 of them are 0 and rest of them have values, the solution above will show 0 and 0%. It is better to filter that out with a not equal to 0 check!

          var val = dataset.data[i];
          var percent = String(Math.round(val/total*100)) + "%";

          if(val != 0) {
            ctx.fillText(dataset.data[i], model.x + x, model.y + y);
            // Display percent in another line, line break doesn't work for fillText
            ctx.fillText(percent, model.x + x, model.y + y + 15);
          }

Updated code below:

var data = {
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
};

var pieOptions = {
  events: false,
  animation: {
    duration: 500,
    easing: "easeOutQuart",
    onComplete: function () {
      var ctx = this.chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';

      this.data.datasets.forEach(function (dataset) {

        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
              total = dataset._meta[Object.keys(dataset._meta)[0]].total,
              mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
              start_angle = model.startAngle,
              end_angle = model.endAngle,
              mid_angle = start_angle + (end_angle - start_angle)/2;

          var x = mid_radius * Math.cos(mid_angle);
          var y = mid_radius * Math.sin(mid_angle);

          ctx.fillStyle = '#fff';
          if (i == 3){ // Darker text color for lighter background
            ctx.fillStyle = '#444';
          }

          var val = dataset.data[i];
          var percent = String(Math.round(val/total*100)) + "%";

          if(val != 0) {
            ctx.fillText(dataset.data[i], model.x + x, model.y + y);
            // Display percent in another line, line break doesn't work for fillText
            ctx.fillText(percent, model.x + x, model.y + y + 15);
          }
        }
      });               
    }
  }
};

var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
  type: 'pie', // or doughnut
  data: data,
  options: pieOptions
});

score 0 · Answer 7 · answered Apr 05 '21 at 12:36

0

Give the option for pie chart

onAnimationProgress: drawSegmentValues like:

var pOptions = {
  onAnimationProgress: drawSegmentValues
};
var pieChart = new Chart(pieChartCanvas, {
  type: 'pie', // or doughnut
  data: data,
  options: pOptions
});

answered Apr 05 '21 at 12:36

Vysakh Vijayakumar

59
3

score -4 · Answer 8 · answered Jul 24 '18 at 05:55

-4

Easiest way to do this with Chartjs. Just add below line in options:

pieceLabel: {
        fontColor: '#000'
    }

Best of luck

answered Jul 24 '18 at 05:55

Abdul Hameed

1,025
13
17

2

Doesn't this require a plugin? – Philector Jul 30 '18 at 19:20
it requires only plugin of chart js. Check this link ... https://emn178.github.io/Chart.PieceLabel.js/samples/demo/ ... Hope this will help you to understand. – Abdul Hameed Jul 31 '18 at 05:18
4

This requires PieceLabel, which is a plugin for the ChartJS library and has already been suggested in several answers. – isherwood Sep 26 '19 at 15:21

How to display pie chart data values of each slice in chart.js

8 Answers8

Linked

Related