Chart.js Legend Customization

by Rostislav Melkumyan

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="chart" style="width: 100%; height: auto;"></canvas>
</div>
<div id="legendes" class="chart-legend"></div>

CSS

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

JavaScript

var data = [{
    value: 8.59,
    color: "#F38630",
    label: "dody"
  }, {
    value: 10.11,
    color: "#E0E4CC",
    label: "Foo"
  }
  /*...*/
];
var bar_ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(bar_ctx).Doughnut(data, {});

document.getElementById('legendes').innerHTML = myChart.generateLegend();