CODEWITHSUNDEEP
reactjshighcharts
harsha
harsha

Reputation: 31

Integrate highcharts-custom-events with React

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.

Upvotes: 3

Views: 1330

Answers (2)

Bernardo Marques
Bernardo Marques

Reputation: 1055

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);
            }
          }

        }
       }
    }]

Upvotes: 1

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

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?

Upvotes: 2

Related Questions