How to detect double clicks or long clicks on points in Highcharts charts?

Question

Highcharts offers the opportunity to detect clicks on chart points, but is it possible to detect other events, such as the double click or mousedown event?

Thanks in adv

Answer 1

It's possible, but in a different way. In Highcharts you can add event to each element using element.on. For example:

    chart.series[0].data[0].graphic.on('dblclick', function() {
       //callback here
    });

And simple jsFiddle for you. Good thing is that you can add to all elements, and make sure work in all browsers.

Answer 2

Each component only supports certain events, for example the Chart component will detect addSeries, click, load, redraw, and selection. I don't believe this set is extensible, so you can't capture a different event like mousedown.

You could try to inspect the source of your page and attach listeners to the elements that HighCharts generates, but this would be an undocumented work-around and would be liable to break in future releases. In addition, if you have to support < IE9 you would need handlers for both SVG and VML generated markup.

You can get creative with some events. Here's an example of detecting a double click using a click handler:

Working Demo

var clickDetected = false;

// create the chart
$('#container').highcharts({
    chart: {
        events: {
            click: function(event) {
                if(clickDetected) {
                    alert ('x: '+ event.xAxis[0].value +', y: '+ event.yAxis[0].value);
                    clickDetected = false;
                } else {
                    clickDetected = true;
                    setTimeout(function() {
                        clickDetected = false;
                    }, 500); 
                }
            }
        }        
    },
   ...