Present custom menu on right click Plotly.js

Question

Is it possible to present a custom sub-menu when a user right clicks a plotly chart, instead of the default one?

Answer 1

You can add an event to contextmenu plotly container.

Here is the reference to contextmenu docs - https://developer.mozilla.org/en/docs/Web/Events/contextmenu

You will have prevent the default behaviour of context menu so that the browsers default context menu doesn't overlap with yours.

You can use this

document.querySelector('#plotly-container').addEventListender('contextmenu', function(event) {
    event.preventDefault();

    // Your code here
});

In the callback function, you need to identify the mouse position with event.clientX and event.clientY and position a container absolutely at those co-ordinates.

You can refer to this question to understand how to create a div container next to your mouse position.

How do I position a div next to a mouse click using JQuery?

You can refer to this question to understand more on how to bind contextmenu event.

How can I capture the right-click event in JavaScript?