Integrate highcharts-custom-events with React - reactjs

Question

I've installed a highcharts-custom-events package to handle custom events(dblclick).
like the code below
var Highcharts = require('highcharts'),
HighchartsCustomEvents = require('highcharts-custom-events')(Highcharts);
But after adding this code, even the existing click is also not working.
Please help me to implement custom events to react.

Answer 1

Here is an example with implemented custom events in Highcharts with using react wrapper.
import CustomEvents from "highcharts-custom-events";
CustomEvents(Highcharts);
//require('highcharts-custom-events')(Highcharts);
Both above ways work - import and require.
Demo: https://codesandbox.io/s/highcharts-react-demo-1rtxl
If this wouldn't help - could you reproduce your case in the online editor which I could work on?

Answer 2

I was having the same problem using this lib, it was breaking the standard single click, I believe this is a duplicate post from this one.
On that post there is a function implementation of double click, that solution also breakes the single click, the thing is that you can add the single click as a condition inside double click function:
Fisrt define the settings:
var doubleClicker = {
clickedOnce : false,
timer : null,
timeBetweenClicks : 400
};
Then define a 'double click reset' function in case the double click is not fast enough and a double click callback:
// call to reset double click timer
var resetDoubleClick = function() {
clearTimeout(doubleClicker.timer);
doubleClicker.timer = null;
doubleClicker.clickedOnce = false;
};
// the actual callback for a double-click event
var ondbclick = function(e, point) {
if (point && point.x) {
// Do something with point data
}
};
Highcharts settings example
series: [{
point: {
events: {
click: function(e) {
if (doubleClicker.clickedOnce === true && doubleClicker.timer) {
resetDoubleClick();
ondbclick(e, this);
} else {
doubleClicker.clickedOnce = true;
doubleClicker.timer = setTimeout(function(){
resetDoubleClick();
}, doubleClicker.timeBetweenClicks);
}
}
}
}
}]