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

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)

<div>
    <canvas id="chartDiv" height="400" width="600"></canvas>
    <div id="legendDiv"></div>
</div>

<script>
   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();
</script>

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

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     lt ul gt                        lt   for  var i 0  i lt datasets length  i        gt                          lt li gt                          lt span style   background-color  lt   datasets i  lineColor  gt    gt  lt  span gt                          lt   if  datasets i  label      gt  lt    datasets i  label   gt  lt       gt                        lt  li gt                      lt       gt                    lt  ul gt            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

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

[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