How to add label in chart.js for pie chart

Question

I am displaying Pie chart. But how to Display labels in pie charts.

Below is the chart.js code for pie chart.

this.Pie = function(data, options) {

  chart.Pie.defaults = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    animation: true,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    onAnimationComplete: null
  };

  var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;

  return new Pie(data, config, context);
};

and below is the code of html file for displaying pie chart

code:

var data = [{
  value: 20,
  color: "#637b85"
}, {
  value: 30,
  color: "#2c9c69"
}, {
  value: 40,
  color: "#dbba34"
}, {
  value: 10,
  color: "#c62f29"
}];

var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);

Ivan Dimov · Answer 1 · 2015-12-07T14:51:42.380

It is not necessary to use another library like newChart or use other people's pull requests to pull this off. All you have to do is define an options object and add the label wherever and however you want it in the tooltip.

var optionsPie = {
    tooltipTemplate: "<%= label %> - <%= value %>"
}

If you want the tooltip to be always shown you can make some other edits to the options:

 var optionsPie = {
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
            this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>"
    }

In your data items, you have to add the desired label property and value and that's all.

data = [
    {
        value: 480000,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Tobacco"
    }
];

Now, all you have to do is pass the options object after the data to the new Pie like this: new Chart(ctx).Pie(data,optionsPie) and you are done.

This probably works best for pies which are not very small in size.

Pie chart with labels

Best solution here. Do you know if and how I can move the labels around? — DMEM, Mar 23 '16 at 22:44
Great. @Ivan can please take a look at my thread: http://stackoverflow.com/questions/43274913/how-to-add-legend-to-php-mysql-chartjs — Nathan Siafa, Apr 07 '17 at 09:57

score 17 · Accepted Answer · edited Oct 27 '16 at 12:20

17

EDIT: http://jsfiddle.net/nCFGL/223/ My Example.

You should be able to like follows:

var pieData = [{
    value: 30,
    color: "#F38630",
    label: 'Sleep',
    labelColor: 'white',
    labelFontSize: '16'
  },
  ...
];

Include the Chart.js located at:

https://github.com/nnnick/Chart.js/pull/35

edited Oct 27 '16 at 12:20

Hakan Fıstık

16,800
14
110
131

answered Mar 20 '14 at 05:40

FiringSquadWitness

666
1
10
27

I tried it..but its not working. suggest another alternative. – user3440583 Mar 20 '14 at 05:47
1

I have been trying to resolve this but the best I could find would be using a Doughnut. http://jsfiddle.net/mayankcpdixit/6xV78/ – FiringSquadWitness Mar 20 '14 at 06:03
is there any solution for pie chart? – user3440583 Mar 20 '14 at 06:11
You will need to include https://raw.githubusercontent.com/Regaddi/Chart.js/bd5bff2cd4d782fa72a529f81a8e188fc2348d77/Chart.js – FiringSquadWitness Mar 20 '14 at 06:13
Thanks its working. Will you please tell me how to show percentage with labels in pie chart? – user3440583 Mar 20 '14 at 06:27
When creating the object pieData create both the value and the label as the same: http://jsfiddle.net/nCFGL/227/ – FiringSquadWitness Mar 20 '14 at 06:30
I was trying a lot to make this doughnut and pie chart to work, however it didn't show anything, funny because it showed the Line, Radar and all other charts except for this one. I'm using react with Ecma Script 6, I then came to this question and pasted the data and it worked! The funny thing is that the page http://www.chartjs.org/docs/#doughnut-pie-chart-example-usage Shows another data structure with "datasets" in it, is it really wrong in their page? Anyways, thanks a lot, saved my day ! – Leo May 04 '16 at 18:31

Smamatti · Answer 3 · 2014-07-15T11:09:32.177

Rachel's solution is working fine, although you need to use the third party script from raw.githubusercontent.com

By now there is a feature they show on the landing page when advertisng the "modular" script. You can see a legend there with this structure:

<div class="labeled-chart-container">
    <div class="canvas-holder">
        <canvas id="modular-doughnut" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
    </div>

<ul class="doughnut-legend">
    <li><span style="background-color:#5B90BF"></span>Core</li>
    <li><span style="background-color:#96b5b4"></span>Bar</li>
    <li><span style="background-color:#a3be8c"></span>Doughnut</li>
    <li><span style="background-color:#ab7967"></span>Radar</li>
    <li><span style="background-color:#d08770"></span>Line</li>
    <li><span style="background-color:#b48ead"></span>Polar Area</li>
</ul>
</div>

To achieve this they use the chart configuration option legendTemplate

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

You can find the doumentation here on chartjs.org This works for all the charts although it is not part of the global chart configuration.

Then they create the legend and add it to the DOM like this:

var legend = myPie.generateLegend();
$("#legend").html(legend);

Sample See also my JSFiddle sample

Is there a way you can re-create this legend in say an eco template and just link to that template? — Tom Hammond, Sep 24 '14 at 16:49
@TomHammond I don't know what an eco template is. Of course you can call the `generateLegend()` function again an replace it in the DOM. I don't think there is a way to link a template, but you could import it with a script from your source file an set a variable like `legendTemplate: ` — Smamatti, Sep 29 '14 at 09:14
I needed a few modifications to make it work: "data" instead of "segment", "color" instead of "fillColor", class="legend" (of course I changed the name of the class in styles as well. — Eugenio, Mar 24 '16 at 12:47

score 8 · Answer 4 · edited Jun 20 '20 at 09:12

8

Use ChartNew.js instead of Chart.js

...

So, I have re-worked Chart.js. Most of the changes, are associated to requests in "GitHub" issues of Chart.js.

And here is a sample http://jsbin.com/lakiyu/2/edit

var newopts = {
    inGraphDataShow: true,
    inGraphDataRadiusPosition: 2,
    inGraphDataFontColor: 'white'
}
var pieData = [
    {
        value: 30,
        color: "#F38630",
    },
    {
       value: 30,
       color: "#F34353",
    },
    {
        value: 30,
        color: "#F34353",
    }
]
var pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx).Pie(pieData, newopts);

It even provides a GUI editor http://charts.livegap.com/

So sweet.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 26 '14 at 09:44

Frank Fang

2,102
3
24
47

aweesome thanks a lot going to switch on to this one because ChartJs is abandoned =) – zumbamusic Dec 22 '14 at 15:34
1

@zumbamusic, chart.js is not abandoned. maybe it was at a time. it is incredibly healthy now. – shmup Mar 09 '17 at 17:29

score 4 · Answer 5 · edited Oct 05 '16 at 00:48

4

For those using newer versions Chart.js, you can set a label by setting the callback for tooltips.callbacks.label in options.

Example of this would be:

var chartOptions = {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return 'label';
            }
        }
    }
}

edited Oct 05 '16 at 00:48

Lee Han Kyeol

2,371
2
29
44

answered Oct 03 '16 at 16:07

arockburn

161
1
6

How to add label in chart.js for pie chart

5 Answers5

Linked