ChartJS Legend

by Hyacinthe Hamon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<canvas id="doughnutChart"></canvas>

CSS

.doughnutGraph{
	float: left;
}

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

.doughnut-legend li {
    font-size: 12px;
    text-decoration: none;
    list-style-type: none;
}

JavaScript

// ======================================================
// Doughnut Chart v 2.0
// ======================================================

// Doughnut Chart Options
var options = {
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    tooltipTemplate: "<%= label value %>%",
    showToolTips: true,
}

var doughnutData = {
    labels: ["Utilities", "Insurance", "Telcos", "Entertainment", "Other"],
     options: {
        legend: {
            display: true,
            boxWidth: "20",
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    },   
    datasets: [{
      backgroundColor: [
        "#d2efdb",
        "#1faf4b",
        "#79cf93",
        "#a5dfb7",
        "#FFFFFF"
      ],
      data: [30, 50, 100, 40, 120]
    }]
  }

var ctx = document.getElementById("doughnutChart").getContext('2d');
var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  options: options,
  data: doughnutData
});