[Bug]: click event fires multiple times

[Nazir-10012000]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I am using react-google-charts for making PieChart.

I am navigating onClick of Chart, so I need a click event but when I click it, it calls 3 to 8 times.

This is my code:

<Chart chartType="PieChart" data={[ ['status', 'Compliance Status'], ['Ready For Use',10], ['Attention needed',20], ['Warning',30], ]} options={{ pieHole: 0.8, legend: { position: 'none' }, chartArea: { left: 10, top: 15, right: 10, width: '100%', height: '80%', }, pieSliceBorderColor: '#fff', pieSliceText: 'none', slices: [ { color: '#5ac26a' }, { color: "#eba500" }, { color: '#ea2b1b' }, ], }} chartEvents={[ { eventName: "ready", callback: ({ chartWrapper, google }) => { const chart = chartWrapper.getChart(); google.visualization.events.addListener(chart, "click", e => { let id = e.targetID?.split('#')[1] if (id === '0') history.push({ pathname: '/pathname', search: '?level=info' }) else if (id === '1') history.push({ pathname: '/pathname', search: '?level=warning' }) else if (id === '2') history.push({ pathname: '/pathname', search: '?level=danger' }) }); } } ]} rootProps={{ 'data-testid': '1' }} />

Reproduction

https://codesandbox.io/s/gracious-pateu-hfl7f?file=/App.tsx

react-google-charts version

^3.0.15

Possible solution

No response

[arunabhverma]

I think this may happen because you are not removing the listener try with removing this listener.