Chart.js Pie chart demo

Simple pie chart demo implementation.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js  Copy"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0-rc.1/Chart.js"></script>
<div class="container">
  <h2>Chart.js — Pie Chart Demo</h2>
  <div>
     <div id="legend"></div>
    <canvas id="myChart"></canvas>
  </div>
</div>

CSS

.container {
  width: 80%;
  margin: 15px auto;
}

[class$="-legend"] {
  list-style: none;
  cursor: pointer;
  padding-left: 0;
  
}
[class$="-legend"] li {
  display: inline-block;
  padding: 0 5px;
}
[class$="-legend"] li.hidden {
  text-decoration: line-through;
}
[class$="-legend"] li span {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 10px;
  width: 10px;
}

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  },
  options: {
  	            legend: {
                display: false
            },
  }
});

				var myLegendContainer = document.getElementById("legend");
        // generate HTML legend
        myLegendContainer.innerHTML = chart.generateLegend();
        // bind onClick event to all LI-tags of the legend
        var legendItems = myLegendContainer.getElementsByTagName('li');
        for (var i = 0; i < legendItems.length; i += 1) {
          legendItems[i].addEventListener("click", legendClickCallback, false);
        }

        function legendClickCallback(event) {
          event = event || window.event;

          var target = event.target || event.srcElement;
          while (target.nodeName !== 'LI') {
              target = target.parentElement;
          }
          var parent = target.parentElement;
          var chartId = parseInt(parent.classList[0].split("-")[0], 10);
          var chart = Chart.instances[chartId];
          var index = Array.prototype.slice.call(parent.children).indexOf(target);
          var meta = chart.getDatasetMeta(index);
          console.log(meta);


          if (meta.hidden === null) {
            meta.hidden = !chart.data.datasets[index].hidden;
            target.classList.add('hidden');
          } else {
            target.classList.remove('hidden');
            meta.hidden = null;
          }
          chart.update();
        }