Click event on whole chart area

[reactdeveloper]

I want to handle click events not only when I click precisely on a small point, but also when I click on another area of the chart. Sometimes it can be too difficult to click exactly on a point… How can I do this?

[reactdeveloper]

Is it possible to do it in React with functional component?

• This reply was modified 2 years, 3 months ago by reactdeveloper.

[Manoj Mohan]

@reactdeveloper,

To show datapoint information on clicking part of area chart as well, you can bind a click event on chart container and with the help of tooltip updated event, you can display the information about datapoint when clicked. Please take at the below code snippet for the same.

let currentViewedDps = [];
.
toolTip: {
  updated: function (e) {
    currentViewedDps = [];
    e.entries.forEach((entry) => {
      currentViewedDps.push(entry.dataPoint);
    });
  },
    hidden: function (e) {
      currentViewedDps = [];
    },
}
.
.
useEffect(() => {
  if (chart != null) {
    chart.container.addEventListener('click', handleClick);
    return function () {
      chart.container.removeEventListener('click', handleClick);
    };
  }
});
.
.

Also, check out this StackBlitz project for complete code.

—-
Manoj Mohan
Team CanvasJS

[reactdeveloper]

Big thanks! But one small problem. This click event also affected onresize event (my chart have zoom and panning), how to prevent it on resize?

[reactdeveloper]

@manoj-mohan

It doesn’t work after the resize event, because the chart is redrawn and here’s the point in the UseEffect (chart == null) condition and addEventListener is not set.

• This reply was modified 2 years, 3 months ago by reactdeveloper.

[Manoj Mohan]

@reactdeveloper,

You can set a flag on rangeChanging and rangeChanged event handler and check the flag before executing the functionality of click event handler as shown in the code snippet below.

let chartRangeChanging = false
.
.
rangeChanging: () => { chartRangeChanging = true },
rangeChanged: () => { chartRangeChanging = false },
.
.
function handleClick() {
  if (currentViewedDps.length != 0 && !chartRangeChanging)
    alert(
      'DataPoint with { label: ' +
      currentViewedDps[0].label +
      ', y: ' +
      currentViewedDps[0].y +
      '} is clicked'
    );
}
.
.

Please take a look at this updated Stackblitz example for complete working code.

—-
Manoj Mohan
Team CanvasJS