Bind event to right-click

Question

How do I bind to or recognize a right-click event?

I have a scatter plot where left-click adds a point at the clicked location; I would like right-click to remove the point (if present).

This is my current code:

var chart = new Highcharts.Chart({
   chart: {
       renderTo: 'container',
       events: {
           click: function(event) {
               var cs = [Math.floor(event.xAxis[0].value),
                         Math.floor(event.yAxis[0].value)];
               this.series[0].addPoint(cs);
           }
       },
        type: 'scatter',

   },
   ... etc. ...
});

score 0 · Answer 1 · answered Jan 27 '22 at 08:19

Currently, there are only a few events supported by Highcharts. for ref : https://www.highcharts.com/blog/tutorials/introduction-to-highcharts-events/

To add custom events, such as

double click (including mobile devices)
right click (context menu)
mouse over
mouse out
mouse down
mouse move

we can add a plugin

highcharts-custom-events

https://www.npmjs.com/package/highcharts-custom-events

hope you find this helpful and solves your problem.

score 0 · Answer 2 · answered Feb 09 '12 at 15:30

0

This should help:Making Highcharts support right click context menu

answered Feb 09 '12 at 15:30

Will H

1,408
1
13
20

I appreciate the LMGTFY attempt, but this isn't really helpful -- 1) I don't want to patch HighCharts as I want to be able to use future releases and 2) I don't want a context menu. – Matt Fenwick Feb 09 '12 at 15:48

score 0 · Answer 3 · answered Feb 09 '12 at 20:28

This is not a full solution: I did not figure out how to capture right-click events.

But here's a workaround for clicking on the chart background:

have the user do a shift-click
supply a callback as before
in the callback, inspect the event. If shift was pressed, do something different

Here's what the callback might look like:

function clickChart(event) {
    var isShiftPressed = event.shiftKey;
    if(isShiftPressed) {
        // do something
    } else {
        // do something different
}

The event object has boolean attributes shiftKey (and altKey).

Here's a workaround for removing points: (actually, it's not a workaround -- I just didn't realize there was an easier way!)

points have their own events
just set up a callback that removes points when they're clicked

Example:

function clickPoint(event) {
    this.remove();
}

var chart = new Highcharts.Chart({
    chart: {
        type: 'scatter',
        renderTo: 'chart',
    },
    series: [{
         point: {
             events: {
                 click: clickPoint
             }
         }
    }]
});

Note: the documentation is misleading, at the least, but the jsfiddle examples seem to be correct. It seems to show that the point options are not in series.

Bind event to right-click

3 Answers3