How to get know index of the area clicked in chartjs?

Question

I have a chart which not necessarily have element at a specified index, but I want to know the index of the area which is clicked.

If I hover on an area which don't have an element it shows me the tooltip assigned to the area. I just need the same with click and get the index of the area.

Answer 1

In chart js options you can have onClick event , you can read here ChartJS onClick .

Using the onClick you will the get the event and you can check the below code to get the index.

Addition to it the x and y value are also logged.

i hope the below code will solve your issue.

 var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"], datasets: [{ label: '# of Tomatoes', data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)', 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: false, onClick: function(c,i){ e = i[0]; console.log("index",e._index) var x_value = this.data.labels[e._index]; var y_value = this.data.datasets[0].data[e._index]; console.log("x value",x_value); console.log("y value",y_value); }, scales: { xAxes: [{ ticks: { maxRotation: 90, minRotation: 80 } }], yAxes: [{ ticks: { beginAtZero: true } }] } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <canvas id="myChart"></canvas>