Javascript examples for Chart.js:Doughnut Chart
ChartJS to get points information on hovering the points
<html> <head> <title>chart.js onHover</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> <script type="text/javascript"> window.onload=function(){/*from w w w. j a v a 2 s . c o m*/ var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", backgroundColor: "rgba(255,99,132,0.2)", borderColor: "rgba(255,99,132,1)", borderWidth: 2, hoverBackgroundColor: "rgba(255,99,132,0.4)", hoverBorderColor: "rgba(255,99,132,1)", data: [65, 59, 20, 81, 56, 55, 40], }] }; var option = { legend: false, title: { display: true, }, onHover: function(evt) { var item = myLineChart.getElementAtEvent(evt); if (item.length) { console.log("onHover",item, evt.type); console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]); } }, onClick: function(evt) { var el = myLineChart.getElementAtEvent(evt); console.log("onClick",el,evt); } }; var myLineChart = Chart.Line('myChart', { data: data, options: option }); } </script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> </body> </html>