Chartjs-Chart.js legend customisation

by

0👍

Step 1:
set callback for legend on options

legendCallback: function(chart) {
        var legendHtml = [];
        legendHtml.push('<ul>');
        var item = chart.data.datasets[0];
        for (var i=0; i < item.data.length; i++) {
            legendHtml.push('<li>');
            legendHtml.push('<span></span>');//add what ever you want :-p
            legendHtml.push('<span class="chart-legend-label-text">' + chart.data.labels[i]+'</span>');
            legendHtml.push('</li>');
        }

        legendHtml.push('</ul>');
        return legendHtml.join("");
    },legend:false,

Step 2:
Place your legend where ever you want :-p

<div id="my-legend-con" class="legend-con"></div>

Step 3:
Initialise the legend.

$('#my-legend-con').html(myChartName.generateLegend());

Step 3:
Do what ever you want…

Leave a comment