Chart.js: onClick for inside the chart, not the whole canvas

[Hedva]

Expected Behavior

I expect that if i use chart.options.onClick, that the onclick functon works on the chart, and not the whole canvas

Current Behavior

At this moment the onClick responds on the whole canvas. Alsof if you click on the legend.

Possible Solution

Maybe a seperate function to check if there has been click in the chart box, instead the whole canvas. Because the chart onClick function also responds if there is a onClick function on the Legend.

Steps to Reproduce (for bugs)

Create a chart and

chartTemplate.options.onClick = function () {
  console.log('Click on chart');
};

chartTemplate.options.legend.onClick = function () {
  console.log('Chart click on legend?');
};

Context

I want different to use different functions for:

• Chart (box) onClick
• Legend onClick (options.legend.onClick)
• Chart Element onClick (getElementAtEvent)

So if someone clicks on the Legend, something happens.
If someone clicks on an element of the chart, specific things happen for the data behind that point/element
If someone clicks on the chart, the chart resizes to a bigger size for a better view / get smaller again.

A this moment, using config.legend.onClick and config.onClick both, alsways fires config.onClick when you click on the legend.

Environment

• Chart.js version: 2.7.2
• Browser name and version: Chrome

If there is any way to get the onClick only on the box of the chart (axes and everything inside), please let me know! Couldn't figure it out myself

[Hedva]

Maybe this is a enhancement, and not a bug

[gkemp94]

This might only help a little, but I needed something similar and have this piece of code which works for me.

        onClick: function (event) {
          const { left, right, top, bottom} = this.chart.chartArea;
          if (
            event.offsetX > left && 
            event.offsetX < right &&
            event.offsetY > top && 
            event.offsetY < bottom
           ) {
            // dosomething()
          }
        }

You'll need to extend that to include the axis areas if you need them. You can access them through this.chart.boxes I believe. Hope that helps.

[yusufozturk]

Actually this is what we are looking for. We have custom made zoom functionality but when people tries to click on legend, they mistakenly zoom into the chart. That’s because legend is also considered as in the chart area.

But of course, not really a bothering issue for us. It would just be a good enhancement to the chart.

[benmccann]

We have that bug in chartjs-plugin-zoom as well: https://github.com/chartjs/chartjs-plugin-zoom/issues/205