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

User · Answer

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

User · Answer

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    lt    label   gt  -  lt    value   gt       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    lt    label   gt  -  lt    value   gt           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

User · Answer

Use ChartNew js instead of Chart js      So  I have re-worked Chart js  Most of the changes  are associated to requests in  quot GitHub quot  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   quot  F38630 quot                       value  30         color   quot  F34353 quot                        value  30          color   quot  F34353 quot           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

User · Answer

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    lt div class  labeled-chart-container  gt       lt div class  canvas-holder  gt           lt canvas id  modular-doughnut  width  250  height  250  style  width  250px  height  250px   gt  lt  canvas gt       lt  div gt    lt ul class  doughnut-legend  gt       lt li gt  lt span style  background-color  5B90BF  gt  lt  span gt Core lt  li gt       lt li gt  lt span style  background-color  96b5b4  gt  lt  span gt Bar lt  li gt       lt li gt  lt span style  background-color  a3be8c  gt  lt  span gt Doughnut lt  li gt       lt li gt  lt span style  background-color  ab7967  gt  lt  span gt Radar lt  li gt       lt li gt  lt span style  background-color  d08770  gt  lt  span gt Line lt  li gt       lt li gt  lt span style  background-color  b48ead  gt  lt  span gt Polar Area lt  li gt   lt  ul gt   lt  div gt    To achieve this they use the chart configuration option legendTemplate    legendTemplate     lt ul class    lt   name toLowerCase    gt -legend   gt  lt   for  var i 0  i lt segments length  i      gt  lt li gt  lt span style   background-color  lt   segments i  fillColor  gt    gt  lt  span gt  lt  if segments i  label    gt  lt   segments i  label  gt  lt     gt  lt  li gt  lt     gt  lt  ul gt     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

User · Answer

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

[javascript] How to add label in chart.js for pie chart

Examples related to javascript

Examples related to charts