Highcharts - Double click event

Question

High charts has double click event like?

plotOptions: {
    series: {
        cursor: 'pointer',
        marker: {
            radius: 2
        },
        point: {
            events: {
                // like this any event?If not, any alternative
                dbclick: function () {
                    $('.highcharts-tooltip').show();
                },
                click: function () {
                    $('.highcharts-tooltip').show();
                },
                mouseOver: function () {
                    $('.highcharts-tooltip').hide();
                },
                mouseOut: function () {
                    $('.highcharts-tooltip').hide();
                }
            }
        }
    }
}

What i want to achieve is, i want to show tool tip on double click on point.

Answer 1

I tried using the extension, but it did not work, so I decided to write a small double click event (based on click event).

The downside is that it's encapsulated inside the 'click' event, but that's not a big issue since it calls a separate function.

First, define 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
              }
            };

and in the highcharts settings of the chart:

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

        }
       }
    }]

Answer 2

You can use an extension, which allows do this.

http://www.highcharts.com/plugin-registry/single/15/Custom-Events

Answer 3

I used the capture of the variable as a double click parameter. And when true I cleaned the doubleclick.

  series: {
    cursor: 'pointer',
    point: {
        events: {
            click: function () {

                if (clickdouble == ('Category: ' + this.category + ', value: ' + this.y)) {
                    alert('Category: ' + this.category + ', value: ' + this.y);
                    clickdouble = '';
                }else{
                    clickdouble = 'Category: ' + this.category + ', value: ' + this.y;
                }

            }
        }
    }
}

It works for me.

Answer 4

You can add an ondblclick event listener at the container's dom element in which you have the chart. Currently highcharts doesn't seem to handle the event so the event will simply propagate to the container.