Phil Phil - 7 months ago 1768
Javascript Question

Custom Legend with ChartJS v2.0

I'm trying to create a custom legend template in ChartJS v2.0. In v1* of ChartJS I simply added a property to the new Chart constructor such as...

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>'


I can't seem to find any documentation in v2.0 for this option. Is it even available anymore? Can anyone show an example of how to accomplish this?

Thank you!

Update - Working code below

legendCallback: function(chart) {
console.log(chart.data);
var text = [];
text.push('<ul>');
for (var i=0; i<chart.data.datasets[0].data.length; i++) {
text.push('<li>');
text.push('<span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">' + chart.data.datasets[0].data[i] + '</span>');
if (chart.data.labels[i]) {
text.push(chart.data.labels[i]);
}
text.push('</li>');
}
text.push('</ul>');
return text.join("");
}

Answer

There is a legendCallback function:

legendCallback Function function (chart) { }
Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.

Details can be found here: http://www.chartjs.org/docs/#getting-started-global-chart-configuration