Chart.js: Bar Chart Click Events

Question

I\'ve just started working with Chart.js, and I am getting very frustrated very quickly. I have my stacked bar chart working, but I can\'t get the click \"events\" to work.<

Answer 1

Let's say that you declared a chart using a method like so:

  window.myBar = new Chart({chart_name}, {
       type: xxx,
       data: xxx,
       events: ["click"],
       options: {
           ...
       }
  });

A good way of declaring onclick events would involve listening for the canvas click, like so:

({chart_name}.canvas).onclick = function(evt) {
     var activePoints = myBar.getElementsAtEvent(evt);
     // let's say you wanted to perform different actions based on label selected
     if (activePoints[0]._model.label == "label you are looking for") { ... }
}

Answer 2

I found this solution at https://github.com/valor-software/ng2-charts/issues/489

public chartClicked(e: any): void {
  if (e.active.length > 0) {
  const chart = e.active[0]._chart;
  const activePoints = chart.getElementAtEvent(e.event);
  if ( activePoints.length > 0) {
   // get the internal index of slice in pie chart
   const clickedElementIndex = activePoints[0]._index;
   const label = chart.data.labels[clickedElementIndex];
   // get value by index
   const value = chart.data.datasets[0].data[clickedElementIndex];
   console.log(clickedElementIndex, label, value)
  }
 }
}

Answer 3

I was able to make this work in another way. Might not be supported, but sometimes, I find that neither the label nor the value is adequate to get me the necessary information to populate a drill-through.

So what I did was add a custom set of attributes to the data:

var ctx = document.getElementById("cnvMyChart").getContext("2d");
if(theChart != null) {theChart.destroy();}
theChart = new Chart(ctx, {
type: typ,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datakeys: ["thefirstone","thesecondone","thethirdone","thefourthone","thefifthone","thesixthone"],
datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3],

...etc

Then when I need to push the drillthrough key into another ajax call, I was able to get it with this:

var theDrillThroughKey = theChart.config.data.datakeys[activePoints[0]._index];

So I'm really not sure that it's appropriate to be adding custom elements into the data for the Chart, but it's working so far in Chrome, IE and Firefox. I needed to be able to put more information into the drillthrough than I really wanted displayed.

Example of the full thing: https://wa.rrdsb.com/chartExamples

Thoughts?

Answer 4

I managed to find the answer to my question by looking through the Chart.js source code.

Provided at line 3727 of Chart.js, Standard Build, is the method .getElementAtEvent. This method returns me the "chart element" that was clicked on. There is sufficent data here to determine what data to show in a drill-down view of the dataset clicked on.

On the first index of the array returned by chart.getElementAtEvent is a value _datasetIndex. This value shows the index of the dataset that was clicked on.

The specific bar that was clicked on, I believe, is noted by the value _index. In my example in my question, _index would point to One in chart_config.data.labels.

My handleClick function now looks like this:

function handleClick(evt)
{
    var activeElement = chart.getElementAtEvent(evt);

..where chart is the reference of the chart created by chart.js when doing:

chart = new Chart(canv, chart_config);

The specific set of data that was selected by the click can therefore be found as:

chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];

And there you have it. I now have a datapoint that I can build a query from to display the data of the bar that was clicked on.

Answer 5

Hi this is the click event under options which is getting values from x and y-axis

onClick: function(c,i) {
    e = i[0];
    console.log(e._index)
    var x_value = this.data.labels[e._index];
    var y_value = this.data.datasets[0].data[e._index];
    console.log(x_value);
    console.log(y_value);
}

Answer 6

Well done! This seems to return the data value being charted though, which in many cases might be possible to appear more than once, thus making it unclear what was clicked on.

This will return the actual data label of the bar being clicked on. I found this more useful when drilling down into a category.

chart_config.data.labels[activeElement[0]._index]