# How to trigger a Modebar action from somewhere else?

**URL:** <https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663>\
**Category:** plotly.js\
**Created:** [November 10, 2016, 5:01pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663 "2016-11-10T17:01:38Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![felix.veysseyre](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@felix.veysseyre](https://community.plotly.com/u/felix.veysseyre)\
**Post date:** [November 10, 2016, 5:01pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/1 "2016-11-10T17:01:38Z")

</div>

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](http://codepen.io/anon/pen/ObMXoK)

Thanks,  
Félix

---

<div class="post-metadata">

**Author:** ![ricky](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ricky/32/726_2.png) [@ricky](https://community.plotly.com/u/ricky)\
**Post date:** [November 10, 2016, 6:11pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/2 "2016-11-10T18:11:29Z")

</div>

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

You can attach event listeners and call API commands directly:

https://codepen.io/rsreusser/embed/preview/KNVNdx?height=300&slug-hash=KNVNdx&default-tabs=js,result&host=https://codepen.io&embed-version=2

(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](https://github.com/plotly/plotly.js/pull/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:

https://codepen.io/rsreusser/embed/preview/JbGRZq?height=300&slug-hash=JbGRZq&default-tabs=js,result&host=https://codepen.io&embed-version=2

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:

https://codepen.io/rsreusser/embed/preview/yVeVJG?height=300&slug-hash=yVeVJG&default-tabs=js,result&host=https://codepen.io&embed-version=2

---

<div class="post-metadata">

**Author:** ![felix.veysseyre](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@felix.veysseyre](https://community.plotly.com/u/felix.veysseyre)\
**Post date:** [November 10, 2016, 8:10pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/3 "2016-11-10T20:10:49Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![destrada](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/destrada/32/984_2.png) [@destrada](https://community.plotly.com/u/destrada)\
**Post date:** [February 16, 2017, 9:35pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/4 "2017-02-16T21:35:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![felix.veysseyre](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@felix.veysseyre](https://community.plotly.com/u/felix.veysseyre)\
**Post date:** [February 17, 2017, 8:40am UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/5 "2017-02-17T08:40:26Z")

</div>

Hi @destrada,

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

Good luck 🙂

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [February 17, 2017, 4:21pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/6 "2017-02-17T16:21:35Z")

</div>

All the modebar button click handlers are defined here:

> <https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js>

---

<div class="post-metadata">

**Author:** ![destrada](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/destrada/32/984_2.png) [@destrada](https://community.plotly.com/u/destrada)\
**Post date:** [February 17, 2017, 8:41pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/7 "2017-02-17T20:41:24Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![destrada](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/destrada/32/984_2.png) [@destrada](https://community.plotly.com/u/destrada)\
**Post date:** [March 14, 2017, 9:29pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/8 "2017-03-14T21:29:40Z")

</div>

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](http://codepen.io/destrada/pen/jyowgR)

---

<div class="post-metadata">

**Author:** ![philschka](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@philschka](https://community.plotly.com/u/philschka)\
**Post date:** [March 20, 2017, 11:07am UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/9 "2017-03-20T11:07:34Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [May 5, 2017, 11:14pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/10 "2017-05-05T23:14:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nitaking](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@nitaking](https://community.plotly.com/u/nitaking)\
**Post date:** [February 9, 2019, 4:09pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/11 "2019-02-09T16:09:20Z")

</div>

How is react-plotly?

---

<div class="post-metadata">

**Author:** ![nitaking](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@nitaking](https://community.plotly.com/u/nitaking)\
**Post date:** [February 9, 2019, 4:42pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/12 "2019-02-09T16:42:27Z")

</div>

> **[react-plotly-custom-modebar - CodeSandbox](https://codesandbox.io/s/5vr5rym3p4)**
>
> The online code editor tailored for web applications

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/22902b64dc83486c061fbbbed937e7751bb3af8d.png)

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

---

<div class="post-metadata">

**Author:** ![nitaking](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@nitaking](https://community.plotly.com/u/nitaking)\
**Post date:** [February 9, 2019, 6:41pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/13 "2019-02-09T18:41:01Z")

</div>

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

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

...

render() {
  return <Plot />
}

```

```auto
// 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?

---

<div class="post-metadata">

**Author:** ![nvaytet](https://avatars.discourse-cdn.com/v4/letter/n/87869e/32.png) [@nvaytet](https://community.plotly.com/u/nvaytet)\
**Post date:** [March 7, 2022, 7:49pm UTC](https://community.plotly.com/t/how-to-trigger-a-modebar-action-from-somewhere-else/2663/14 "2022-03-07T19:49:51Z")

</div>

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

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

```

See here: [layout | Python | Plotly](https://plotly.com/python/reference/layout/#layout-dragmode)