58👍
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.
- [Chartjs]-Limit labels number on Chart.js line chart
- [Chartjs]-Skip decimal points on y-axis in chartJS
44👍
-
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>
13👍
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.
4👍
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 : '<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();
Don’t forget to add
<div id="legendDiv"></div>
on your html where do you want to place your legend. That’s it!
3👍
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 :
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 is 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>"
To
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>"