Chartjs doughnut chart piece selection
Selects a piece with animation. Based on this fiddle: https://jsfiddle.net/lkwfahrer/4c7p2ash/2/
by Sascha
HTML
<script src="https://www.chartjs.org/docs/latest/gitbook/gitbook-plugin-chartjs/Chart.bundle.js"></script>
<script src="https://www.chartjs.org/docs/latest/gitbook/gitbook-plugin-chartjs/chartjs-plugin-deferred.js"></script>
<div style="width:400px;">
<canvas id="myChart" width="200" height="200"></canvas>
</div>
JavaScript
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
layout: {
padding: 30
}
},
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
label: '# of Votes',
data: [4, 5, 3],
backgroundColor: [
'rgba(255, 0, 0, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 3
}]
}
});
var defaultOuterRadius;
var defaultInnerRadius;
var addRadiusMargin = 10;
var currentSelectedPieceLabel = "";
$(document).ready(function() {
defaultOuterRadius = myChart.outerRadius;
defaultInnerRadius = myChart.innerRadius;
explodePieceOnSelect();
});
function explodePieceOnSelect() {
$('#myChart').on('click', function(event) {
var activePoints = myChart.getElementsAtEvent(event);
if (activePoints.length > 0) {
//get the internal index of slice in pie chart
var clickedElementindex = activePoints[0]["_index"];
//get specific label by index
var clickedLabel = myChart.data.labels[clickedElementindex];
if (currentSelectedPieceLabel.toUpperCase() == "") {
// no piece selected yet, save piece label
currentSelectedPieceLabel = clickedLabel.toUpperCase();
// clear whole pie
myChart.outerRadius = defaultOuterRadius;
myChart.update();
// update selected pie
activePoints[0]["_model"].outerRadius = defaultOuterRadius + addRadiusMargin;
} else {
if (clickedLabel.toUpperCase() == currentSelectedPieceLabel.toUpperCase()) {
// already selected piece clicked, clear the chart
currentSelectedPieceLabel = "";
// clear whole pie
myChart.outerRadius = defaultOuterRadius;
myChart.update();
// update selected pie
activePoints[0]["_model"].outerRadius = defaultOuterRadius;
activePoints[0]["_model"].innerRadius = defaultInnerRadius;
} else {
...