Chart.js Legend Customization

by mrcl

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div style="width: 100%; height: 100%;">
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>

CSS

.chart-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

JavaScript

var data = [
   {
    value: 61,
    color: "#09355C",
    label: "Label 1"
}, {
    value: 11,
    color: "#CBCBCB",
    label: "Label 2"
}, {
    value: 28,
    color: "#B61B12",
    label: "Label 3"
}];

var options = {
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    legend: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%= value %>%"
}

var ctx = document.getElementById("myChart").getContext("2d");

var myChart = new Chart(ctx).Doughnut(data, options);

// Note - tooltipTemplate is for the string that shows in the tooltip

// legendTemplate is if you want to generate an HTML legend for the chart and use somewhere else on the page

// e.g:

document.getElementById('js-legend').innerHTML = myChart.generateLegend();