vue.jsvuejs2chart.jsvue-chartjs

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


I use vue-chartjs to draw some chart like line, bar, etc.

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 on 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, ...)
    }

In my case, I use 'onclick' option to access specific data on point triggered 'click' event. In 'onClick' callback, I checked all of chart elements and dataset, etc.

How can I get value of label specific dataItem on point of graph(like line) or bar of graph(like bar) when triggered click event?


Solution

  • 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.