var chart;
var config = {
type: 'pie',
data: {
datasets: [{
data: [
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100)
],
backgroundColor: [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)"
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
onClick: function (event) {
/* checking where the click actually happens */
var box = chart.boxes[0];
if((box.position === "top" && event.clientY >= box.height) || (box.position === "right" && event.clientX <= box.left)) {
console.log("chart click @ x: " + event.clientX + ", y:" + event.clientY);
}
},
legend: {
position: 'top',
onClick: function (event, elem) {
console.log("legend click @ x: " + event.clientX + ", y:" + event.clientY);
}
}
}
};
$(function() {
chart = new Chart($('#chart-area')[0].getContext('2d'), config);
});
html, body {height: 100%; width: 100%; margin: 0;}
canvas#chart-area {height: 100px; width: 100px;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="canvas-holder"><canvas id="chart-area"></canvas></div>