How to add labels / legends for all chart types in chart.js (chartjs.org)?

Question

The documentation for chart.js mentions "legend templates", but does not provide any resources or examples of such legends. How can they be displayed?

Answer 1

You can include the legend template in the chart parameters:

//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 also need to add basic CSS to make it look normal.

Answer 2

• The legend is part of the standard parameters of the ChartJs library. Therefore, you do not need to explicitly add it as an option.

• The library generates HTML. It is just a matter of adding this page. For example, add it to the innerHTML of the given DIV. (Edit the defaults if you are editing 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 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 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> 

Answer 3

Strange, I did not find anything about the legends and shortcuts in the Chart.js documentation. It seems you cannot do this only with chart.js.

I used https://github.com/bebraw/Chart.js.legend , which is extremely easy to generate legends.

Answer 4

For a line chart, I use the following codes.

First create a custom style.

 .boxx{ position: relative; width: 20px; height: 20px; border-radius: 3px; } 

Then add this to your line options

 var lineOptions = { legendTemplate : '<table>' +'<% for (var i=0; i<datasets.length; i++) { %>' +'<tr><td><div class=\"boxx\" style=\"background-color:<%=datasets[i].fillColor %>\"></div></td>' +'<% if (datasets[i].label) { %><td><%= datasets[i].label %></td><% } %></tr><tr height="5"></tr>' +'<% } %>' +'</table>', multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>" var ctx = document.getElementById("lineChart").getContext("2d"); var myNewChart = new Chart(ctx).Line(lineData, lineOptions); document.getElementById('legendDiv').innerHTML = myNewChart.generateLegend(); 

Do not forget to add

 <div id="legendDiv"></div> 

on your html where you want to place your legend. What is it!

Answer 5

I know this question is old. But it can be useful for those who have a problem with the legend. In addition to the answer given by ZaneDarken, I modified the chart.js file to show the legend in a pie chart . I changed the legendTemplate (which is declared many times for each type of chart) just above these lines:

 Chart.Type.extend({ //Passing in a name registers this chart in the Chart namespace name: "Doughnut", //Providing a defaults will also register the deafults in the chart namespace defaults: defaultConfig, ....... 

My legendTemplate changed from

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

For

 legendTemplate: " <ul class=\ "<%=name.toLowerCase()%>-legend\"> <% for (var i=0; i<segments.length; i++){%> <li><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:<%=segments[i].fillColor%>\"> </span> <%if(segments[i].label){%> <%=s egments[i].label%> <%}%> </li> <%}%> </ul>"