[Chartjs]-How to access or get value of specific graph on chart plot by click event?

by

4👍

✅

I was not able to find a solution that worked for me, but I dug a little bit and this is what I came up with. 


    onClick: function(evt, array) {
        if (array.length != 0) {
            var position = array[0]._index;
            var activeElement = this.tooltip._data.datasets[0].data[position]
            console.log(activeElement);
        } else {
            console.log("You selected the background!");            
        }  
    }

This will get the position in the array that you clicked and grab the data from what position you clicked. This may not be the prettiest or best example, but it worked for me.

1👍

This solution use the getElementAtEvent method of chartjs, but to use that you need reference to the Chart itself, not the Vue component. We can get that from the $data._chart property. To use this in a parent Vue component, we use the $refs as seen below`.

So parent defines the chart options

     {
        ...
        options: {
          onClick: this.handleChartClick
        }
        ...
     }

and then parent method, using $refs with $data._chart to get the chart. We get the datasetIndex and value and also the tooltip

handleChartClick(evt, elements) {
  var chart = this.$refs.periodChart.$data._chart;
  const chartIndex = chart.getElementAtEvent(evt);
  if (chartIndex.length !== 0) {
    const datasetIndex = chartIndex[0]._datasetIndex;
    const position = chartIndex[0]._index;
    const info = {
      datasetIndex: datasetIndex,
      valueIndex: position,
      label: chart.tooltip._data.labels[position],
      value: chart.tooltip._data.datasets[datasetIndex].data[position]
    };
    console.log(info);
  } else {
    console.log("Background clicked");
  }

Leave a comment