<!DOCTYPE html>
<html>

  <head><link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <canvas id="doghnut1" width="180" height="180"></canvas>
    <div class="custom-legend doghnut-meter-legend clearfix padding-20"></div>
    
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="chartjs@2.2.1" data-semver="2.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
// Code goes here

var doghnutElm = document.getElementById('doghnut1');
var doghnut1data = [45, 20, 14, 11, 11, 11];
var cloneData = doghnut1data.slice(0);
var doghnut1dataset = {
  labels: [
        'E-Inspection',
        'E-Revenue',
        'Visit Abu Dhabi',
        'Event Licensing',
        'Event Permits',
        'Abu Dhabi Events'
    ],
  datasets: [
    {
      data: doghnut1data,
      backgroundColor: [
                '#3aa4d2',
                '#1875f0',
                '#f18f1c',
                '#5553ce',
                '#9013fe',
                '#50d166'
            ],
      hoverBorderWidth: 0
                    }]
};
var doghnutOptions = {
  responsive: false,
  cutoutPercentage: 80,
  animation: {
    animateScale: true
  },
  legend: {
    display: false,
    labels: {
      usePointStyle: true
    }
  },
  onResize: function () {
    console.log('resized')
  }
};

if (doghnutElm) {
  var doghnut1 = doghnutElm.getContext('2d');
  var myDoughnutChart = new Chart(doghnut1, {
    type: 'doughnut',
    data: doghnut1dataset,
    options: doghnutOptions
  });
  $('.doghnut-meter-legend').append(myDoughnutChart.generateLegend());
  $('.doghnut-meter-legend li').each(function () {
    $(this).append('<b>' + cloneData[$(this).index()] + '</b>')
  });
  $('.doghnut-meter-legend').on('click', 'li', function () {
    myDoughnutChart.data.datasets[0].data[$(this).index()] = cloneData[$(this).index()] !== myDoughnutChart.data.datasets[0].data[$(this).index()] ? cloneData[$(this).index()] : 0;
    myDoughnutChart.update();
    $(this).toggleClass('striked');
  });
};
/* Styles go here */
.custom-legend ul {column-count: 2;column-gap: 10px;}
.custom-legend  li {
    list-style: none;
    font: 700 12px 'Roboto';
    white-space: nowrap;
    padding: 6px;
    cursor: pointer;
    color: #b3b3b3;
}
.custom-legend li.striked {text-decoration: line-through;}
.custom-legend li.striked span {background: #b3b3b3}
.custom-legend span {height: 10px;width: 10px;border-radius: 50%;display: inline-block;margin-right: 20px;vertical-align: middle;}