<!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;}