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

I have found a comment on GitHub by nnnick from Chart.js stating to use the function getBarsAtEvent, even though this function cannot be found in the Chart.js documentation at all (go ahead, do a search for it). The documentation does mention the getElementsAtEvent function of the chart reference, but that is for Line Charts only.

I set an event listener (the right way) on my canvas element:

canv.addEventListener('click', handleClick, false);

...yet in my handleClick function, chart.getBarsAtEvent is undefined!

Now, in the Chart.js document, there is a statement about a different way to register the click event for the bar chart. It is much different than nnnick's comment on GitHub from 2 years ago.

In the Global Chart Defaults you can set an onClick function for your chart. I added an onClick function to my chart configuration, and it did nothing...

So, how the heck do I get the on-click-callback to work for my bar chart?!

Any help would be greatly appreciated. Thanks!

P.S.: I am not using the master build from GitHub. I tried, but it kept screaming that require is undefined and I was not ready to include CommonJS just so that I could use this chart library. I would rather write my own dang charts. Instead, I downloaded and am using the Standard Build version that I downloaded straight from the link at the top of the documentation page.

EXAMPLE: Here is an example of the configuration I am using:

var chart_config = {
    type: 'bar',
    data: {
        labels: ['One', 'Two', 'Three'],
        datasets: [
            {
                label: 'Dataset 1',
                backgroundColor: '#848484',
                data: [4, 2, 6]
            },
            {
                label: 'Dataset 2',
                backgroundColor: '#848484',
                data: [1, 6, 3]
            },
            {
                label: 'Dataset 3',
                backgroundColor: '#848484',
                data: [7, 5, 2]
            }
        ]
    },
    options: {
        title: {
            display: false,
            text: 'Stacked Bars'
        },
        tooltips: {
            mode: 'label'
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes: [
                {
                    stacked: true
                }
            ],
            yAxes: [
                {
                    stacked: true
                }
            ]
        },
        onClick: handleClick
    }
};

Answer 1

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.

AUGUST 7TH, 2021. UPDATE

There is now a method for what we are looking for. Take a look at here