How to trigger a Modebar action from somewhere else?

plotly.js
1

Hello,

I am working with Plotly.js for a project and I would like to know if it was possible to trigger a plot action from a custom element.

For example, I would like to have a custom button somewhere on my page, triggering the Zoom in of my Plotly plot.
I have created a CodePen to explain it: http://codepen.io/anon/pen/ObMXoK

Thanks,
Félix

2

Here’s a couple examples of ways to accomplish this:

You can attach event listeners and call API commands directly:

(Note that you have to use + new Date(...) in order to convert to a unix timestamp. This will change soon in plotly/plotly.js#1078)

It looks like you might be using an older version of plotly. In new versions, there are now updatemenus that can accomplish this by calling API commands from within plotly.js components, as in:

This can be nice if you don’t want to worry about styling buttons etc. yourself. Finally, there are also animations which can make this smooth. See:

3

Thanks for your answer Ricky !

I have understood your method, basically, you are using relayout method to change the axis bounds.

But could I do something similar to this in order to:

  • Activate zooming (2D and 3D)
  • Activate panning (2D and 3D)
  • Active autoscaling (2D)
  • Reset the view (2D and 3D)
  • Toggle data hovering information (2D and 3D)

Thanks for your help !

1 Like
4

Hi @felix.veysseyre, did you ever find out how to trigger the methods programmatically? I’m interested in this as well

5

Hi @destrada,

Sorry but I did not. Things have maybe changed since the time.

Good luck :slight_smile:

6

All the modebar button click handlers are defined here:

1 Like
7

@etienne How are those click handler’s exposed? I tried for example:

Plotly.modeBarButtons.lasso2d.click()

But obviously this doesn’t work…Can you send me an example of how to trigger these click handlers?

Thanks

1 Like
8

I couldn’t’ figure out how to trigger buttons without ‘relayout’. I couldnt even figure out how to trigger the ‘Reset Axes’ button through plotly at all.
If someone can help me understand how to expose the event handlers provided by @etienne, that would be great.

In the meantime, here’s a hacky solution I would like to clean up: http://codepen.io/destrada/pen/jyowgR

1 Like
9

I have same problem and did a “hacky” solution to perform a click at a modebar buttons. Firstly I figured out all ‘datatitles’ of the modebarbuttons to identifiy one and save it in variables:

var modebarButtonDataTitles={//button names of plotly modebar
				zoomIn : "Zoom in",
				zoomOut : "Zoom out",
				zoomMode: "Zoom",
				panMode: "Pan",
				downloadAsPng: "Download plot as a png",
				autoscale: "Autoscale"
		}

To perform a click e.g. to zoomIn-Modebar button I iterate over all modebar-btn and perform a click to that button, of that the dataTitle is ‘Zoom in’.

$.each($("#myDiv .modebar-btn"),function(index, modebarButton){
    if(modebarButtonDataTitles.zoomIn== modebarButtonDataTitle){
        modebarButton.click();
    }
});

Im sure there is a better solution…

1 Like
10

Here’s a more complete solution: https://gist.github.com/etpinard/bb51194651cdb40fa7bcb1f35c34963e

11

How is react-plotly?

12


It worked fine on codesandbox, but sometimes it does not work in my local environment.

image
image.png1580×870 110 KB

Why is this … · · ·. With the exact same code, this error content does not seem to be a code mistake

13

I can not understand but I found a way to go.

// Error
import Plot from 'react-plotly.js';

...

render() {
  return <Plot />
}


// No Error
import Plotly from 'plotly.js';
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);

...

render() {
  return <Plot />
}

This is a bug?

1 Like
14

If anyone ends up here looking for how to activate a modebar tool programmatically from python, I managed to activate the “pan” tool by doing

_ = fig.update_layout(dragmode="pan")

See here: layout | Python | Plotly