How to catch an onClick event on bubble chart?

Question

I am trying to catch an onlick event on a bubble in bubble chart. I want to log the label of clicked bubble into the console. I have written a function to do the job which actually looks like this

$("#myChart").click(function(evt) {
    var activePoints = myBubbleChart.getElementAtEvent(evt);
    console.log(activePoints.label);
});

Every time I click on a bubble this function logs "undefined" into console. I have even tried getBarsAtEvent and getSegmentsAtEvent none of them worked. What's wrong in my code? And can anybody please tell me how can I get the label value of bubble which I clicked?

tektiv · Accepted Answer · 2016-09-09T13:38:18.040

4

Chart.js options have a built-in onClick property (see documentation).

It works like this :

options: {
     onClick: function(e) {
        var element = this.getElementAtEvent(e);

        // If you click on at least 1 element ...
        if (element.length > 0) {
            // Logs it
            console.log(element[0]);

            // Here we get the data linked to the clicked bubble ...
            var datasetLabel = this.config.data.datasets[element[0]._datasetIndex].label;
            // data gives you `x`, `y` and `r` values
            var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index];
        }
    }
}

Check this jsFiddle for a full example.

edited Sep 09 '16 at 13:38

answered Sep 09 '16 at 12:49

tektiv

14,010
5
61
70

Thanks for the help. That makes some sense,But I am still unable to get the value of label. element[0] gives some information about model,view,xscale,yscale,etc.. But what I need is label and data value of that bubble which I clicked. Can you please let me know how can I get it? – Chiyaan Suraj Sep 09 '16 at 13:23
@ChiyaanSuraj I have updated [my fiddle](https://jsfiddle.net/Lakbc0ck/2/) to show you how to get your data. Using both `element[0]._datasetIndex` and `element[0]._index` can help you finding this. -- FYI, *`this`* in the `onClick` callback is the chart. – tektiv Sep 09 '16 at 13:30
1

Thanks a lot Tektiv. – Chiyaan Suraj Sep 09 '16 at 13:37

score 0 · Answer 2 · answered Dec 21 '21 at 11:11

Getting the name of the clicked item, the current dataset, or the item in the current dataset is straightforward:

onClick: (e, i) => {
            const bubbleSelected = i[0];
            console.log(this.widget.data.bubblesData[bubbleSelected.datasetIndex].tooltipData[bubbleSelected.index]);
        }

Parameter i contains an array of clicked elements which contains the following:

With these image data, knowing which dataset you have selected and which element of the dataset you have clicked, you can, from an array of data, obtain the data, names or whatever you want from the current dataset of the current position.

In my case I had in bubblesData a list of datasets (datasetIndex) and in each dataset an object called tooltipData with a list of data for each element of the dataset (index).

If you want to see how to also modify the tooltip to show it like this visit this link: Chart JS Show HTML in Tooltip

Documentation:

How to catch an onClick event on bubble chart?

2 Answers2