How can labels legends be added for all chart types in chart js chartjs org

Question

The documentation for chart js mentions  legend templates  but gives no resources or examples of such legends  How can these be displayed

User · Answer

You can include a legend template in the chart options:

//legendTemplate takes a template as a string, you can populate the template with values from your dataset 
var options = {
  legendTemplate : '<ul>'
                  +'<% for (var i=0; i<datasets.length; i++) { %>'
                    +'<li>'
                    +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
                  +'</li>'
                +'<% } %>'
              +'</ul>'
  }

  //don't forget to pass options in when creating new Chart
  var lineChart = new Chart(element).Line(data, options);

  //then you just need to generate the legend
  var legend = lineChart.generateLegend();

  //and append it to your page somewhere
  $('#chart').append(legend);

You'll also need to add some basic css to get it looking ok.

User · Answer

Strangely  I didn t find anything about legends and labels in the Chart js documentation  It seems like you can t do it with chart js alone   I used https   github com bebraw Chart js legend which is extremely light  to generate the legends

User · Answer

The legend is part of the default options of the ChartJs library   So you do not need to explicitly add it as an option  The library generates the HTML   It is merely a matter of adding that to the your page   For example  add it to the innerHTML of a given DIV    Edit the default options if you are editing the colors  etc       lt div gt       lt canvas id  chartDiv  height  400  width  600  gt  lt  canvas gt       lt div id  legendDiv  gt  lt  div gt   lt  div gt    lt script gt     var data             labels    January    February    March    April    May    June    July            datasets                                  label   The Flash s Speed                   fillColor   rgba 220 220 220 0 2                    strokeColor   rgba 220 220 220 1                    pointColor   rgba 220 220 220 1                    pointStrokeColor    fff                   pointHighlightFill    fff                   pointHighlightStroke   rgba 220 220 220 1                    data   65  59  80  81  56  55  40                                               label   Superman s Speed                   fillColor   rgba 151 187 205 0 2                    strokeColor   rgba 151 187 205 1                    pointColor   rgba 151 187 205 1                    pointStrokeColor    fff                   pointHighlightFill    fff                   pointHighlightStroke   rgba 151 187 205 1                    data   28  48  40  19  86  27  90                                      var myLineChart   new Chart document getElementById  chartDiv   getContext  2d    Line data       document getElementById  legendDiv   innerHTML   myLineChart generateLegend     lt  script gt

User · Answer

For line chart  I use the following codes   First create custom style   boxx      position  relative      width  20px      height  20px      border-radius  3px      Then add this on your line options  var lineOptions                 legendTemplate     lt table gt                                  lt   for  var i 0  i lt datasets length  i        gt                                  lt tr gt  lt td gt  lt div class   boxx   style   background-color  lt   datasets i  fillColor   gt    gt  lt  div gt  lt  td gt                                  lt   if  datasets i  label      gt  lt td gt  lt    datasets i  label   gt  lt  td gt  lt       gt  lt  tr gt  lt tr height  5  gt  lt  tr gt                                  lt       gt                                  lt  table gt                multiTooltipTemplate    lt    datasetLabel   gt  -  lt    value   gt    var ctx   document getElementById  lineChart   getContext  2d    var myNewChart   new Chart ctx  Line lineData  lineOptions   document getElementById  legendDiv   innerHTML   myNewChart generateLegend      Don t forget to add    lt div id  legendDiv  gt  lt  div gt    on your html where do you want to place your legend  That s it

User · Answer

I know this question is old  But this might be useful for someone who is having the problem with legend  In addition to the answer given by ZaneDarken  I modified the chart js file to show the legend in my pie chart  I changed the legendTemplate which is declared many times for every chart type  just above these lines     x000D   x000D  Chart Type extend   x000D          Passing in a name registers this chart in the Chart namespace x000D        name   Doughnut   x000D          Providing a defaults will also register the deafults in the chart namespace x000D        defaults  defaultConfig  x000D                x000D   x000D   x000D    My legendTemplate is changed from    x000D   x000D  legendTemplate     x000D   lt ul class     lt   name toLowerCase    gt -legend   gt  x000D     lt   for  var i 0  i lt datasets length  i      gt  x000D       lt li gt  lt span style    background-color  lt   datasets i  strokeColor  gt    gt  lt  span gt  x000D         lt  if datasets i  label    gt  x000D           lt   datasets i  label  gt  x000D             lt     gt  x000D       lt  li gt  x000D       lt     gt  x000D   lt  ul gt   x000D   x000D   x000D    To   x000D   x000D  legendTemplate    x000D   lt ul class     lt   name toLowerCase    gt -legend   gt  x000D     lt   for  var i 0  i lt segments length  i      gt  x000D       lt li gt  lt span style    -moz-border-radius 7px 7px 7px 7px  border-radius 7px 7px 7px 7px  margin-right 10px width 15px height 15px display inline-block background-color  lt   segments i  fillColor  gt    gt   lt  span gt  x000D         lt  if segments i  label    gt  x000D           lt   s egments i  label  gt  x000D             lt     gt  x000D       lt  li gt  x000D       lt     gt  x000D   lt  ul gt   x000D   x000D   x000D

[javascript] How can labels/legends be added for all chart types in chart.js (chartjs.org)?

Examples related to javascript

Examples related to chart.js