Vue-chartjs: How to access or get value of specific graph on chart plot by click event?

[Jung-Younghun]

I used vue-chartjs for drawing some chart like line, bar, ...

In my project, there are many cases using specific value or lable of data in chart.
Using tooltip option of vue-chartjs, I can check that value or label of data item when hovered.

I want to know how to access or get information of specific data matched with point or bar in graph when clicked(not hovered).
Here is my code about chart options.

chartOptions: {
responsive: false,
onClick: function(evt){
//Some logic to get value of label of specific data...(type, label, value, ...)
}

Environment

• vue.js version: 2.5.2
• vue-chart.js version: 3.3.2
• npm version: 5.6.0

[apertureless]

Well it depends on what you want to get.
I am not even sure that there is a global onClick callback in the options.

• https://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente

You have however onClick callbacks for the tooltips and legend items:

https://www.chartjs.org/docs/latest/configuration/legend.html#custom-on-click-actions

This might help you.

[gabrielcabola]

onClick: function (evt, item) {
var label = item[0]['_model'].label
}

[pranavkumar389]

onClick: function (evt, item) {
var label = item[0]['_model'].label
}

This is for the first dataset, as only the 0th index is considered. How to tackle this problem for chart having multiple datasets?

[adamfriedland]

I also have the same question as @pranavkumar389. What if a particular use case was drilling down to data related to a specific dataset? Is there any way of identifying what dataset id was clicked on?

[NaveedZahoorKhan]

I have my onclick handler working fine but I can't seem to get props in this method.

For example:

const item = event[0];
const index = item._index;
const hotSpot = item._model.label;
console.log('chart', item, point, hotSpot, index, this.batches);

In the following snippet this.batches returns undefined.

[kerrpeter]

Why is this closed? As said already the example given only references the first data set, How do you determine which dataset has been clicked?

[kerrpeter]

I found a solution as detailed https://stackoverflow.com/questions/51219973/how-to-access-or-get-value-of-specific-graph-on-chart-plot-by-click-event#answer-66280509 using the undocumented (as far as I could see) $data._chart property of the vue component