Plotly mouse right click/context menu

plotly.js
1

Hi
Is there a way to detect mouse right click on a chart?
I have integrated plotly in my application and need a way to detect mouse right click. Preferably with extra data as well.
I can’t seem to find any reference to it.
Any suggestion or work around?
Many thanks in advance.

2

plotly.js doesn’t expose a right-click event at the moment, so you’ll need to attach a regular DOM event on the graph div: http://codepen.io/etpinard/pen/XRWvaX?editors=1111

3

Thanks for the answer :slight_smile:

4

Hey!
I would like to reactivate the question…is there in the meantime a possibility for handling right click mouse event in my plotly js map when clicking on point? When clicking on a point in the map there should be a checkbox menu…

JsFiddle or Codepen example would be awesome! :slight_smile:

Kind regards…

5

would also be interested to know!

6

The plotly_click event is fired for any mouse button that is pressed including the wheel, to distinguish the button that is pressed, you just have to check the button value of event

	plotLayer.on('plotly_click', data => {
		switch (data.event.button){
			case 0:
				console.log('left click')
				break
			case 1:
				console.log('wheel click')
				break
			case 2:
				console.log('right click')
				break
		}
	})
1 Like
7

Hey Saratoga, thx for this suggestion. I tried some stuff to make it work. But I cannot archieve it.
In my case only the left mouse click is firing and jumping into the “then” clause… wheel click or right mouse click are like muted…is there a way to overwrite “plotly_click”, so that also events like right mouse click are firing? Or any other workaround?

var myPlot = document.getElementById(chartid),
    data = [
        {
            type: "scattermapbox",
            text: info,
            lon: lon,
            lat: lat,
            marker: { color: '#0747A6', size: 10 }
        },
        {
            type: "scattermapbox",
            text: infoCritical,
            lon: lonCritical,
            lat: latCritical,
            marker: { color: "red", size: 15 }
        }
    ],
    layout = {
        dragmode: "zoom",
        mapbox: { style: "open-street-map", center: { lat: lat[0], lon: lon[0] }, zoom: 9 },
        margin: { r: 0, t: 0, b: 0, l: 0 }
    };


Plotly.newPlot(chartid, data, layout, { responsive: true });

myPlot.on('plotly_click', function(d) {
    console.log('d: ');
    console.log(d);

    var imageid = d.points[0]["text"].split(",")[0];
    switch (d.event.button) {
        case 0:
            console.log('left click');
            GetImage(imageid);
            break;
        case 1:
            console.log('wheel click');
            GetImage(imageid);
            break;
        case 2:
            console.log('right click');
            GetImage(imageid);
            break;
    }
});
8

That’s weird because if it works for me as you can see in the image I got all 3 messages

image
image1304×768 36.6 KB

On the other hand, in your code I see two observations, when you use newPlot (), the method is passed the Id of the div that contains the graph or the reference to that div that you obtained with the getElementById () method is passed, in your case you are passing the id of the container div but you are not putting it in quotes it should be something like this

Plotly.newPlot('chartid', data, layout, { responsive: true })

O well

Plotly.newPlot(myPlot, data, layout, { responsive: true })

correct it and see if it works for you

9

Hey Saratoga!

Indeed, it is weird! In other circumstances than my scattermapbox plot it does fire for all three mouse click events… like this codepen example does work properly:

I checked but I passed chartid from outside as ‘map’, this is why it works. unfortunately it is only working and firing for left mouse click. right mouse click and wheel click are still like muted…

10

try the following

	myPlot.addEventListener('mousedown', e => {
		switch (e.button){
			case 0:
				console.log('left click')
				break
			case 1:
				console.log('wheel click')
				break
			case 2:
				console.log('right click')
				break
		}
	})