CODEWITHSUNDEEP
eventshighcharts
user2285877
user2285877

Reputation: 33

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

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 advance

Upvotes: 2

Views: 3869

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

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.

Upvotes: 2

colestrode
colestrode

Reputation: 10668

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

Upvotes: 5

Related Questions