# Freeze modebar after plotly.react

**URL:** <https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607>\
**Category:** plotly.js\
**Created:** [July 9, 2018, 12:10pm UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607 "2018-07-09T12:10:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![FWessels](https://avatars.discourse-cdn.com/v4/letter/f/3ab097/32.png) [@FWessels](https://community.plotly.com/u/FWessels)\
**Post date:** [July 9, 2018, 12:10pm UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607/1 "2018-07-09T12:10:16Z")

</div>

Hi all,

I was wondering if there is an option and what would be the best option, to not update the modebar when doing plotly.react. In my case when user scrolls to the left, new data is loaded automatically (which can influence layout). Unfortunately then the zoom button is by default selected.

Perhaps is it possible to ‘copy’ the current state of the modebar, and update it back after doing plotly.react,

Regards,  
Frank

---

<div class="post-metadata">

**Author:** ![FWessels](https://avatars.discourse-cdn.com/v4/letter/f/3ab097/32.png) [@FWessels](https://community.plotly.com/u/FWessels)\
**Post date:** [July 9, 2018, 12:49pm UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607/2 "2018-07-09T12:49:37Z")

</div>

I see that when a modebar button is selected, the class is set the modebar\_btn\_active. An ugly solution is to save the classes and update ofter plotly.react. Hupefully there is a cleaner 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:** [July 9, 2018, 1:24pm UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607/3 "2018-07-09T13:24:54Z")

</div>

How are you using `Plotly.react` ? If your second state contains `layout.dragmode: 'zoom'` then I’m afraid what you describe is the intended behavior.

---

<div class="post-metadata">

**Author:** ![FWessels](https://avatars.discourse-cdn.com/v4/letter/f/3ab097/32.png) [@FWessels](https://community.plotly.com/u/FWessels)\
**Post date:** [July 10, 2018, 10:53am UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607/4 "2018-07-10T10:53:20Z")

</div>

First I do once:

```
   Plotly.newPlot(id, s["data"], s["layout"],
        {
            showLink: false,
            scrollZoom: true,
            displaylogo: false,
            modeBarButtonsToRemove: [
                "sendDataToCloud", "select2d", "lasso2d", "hoverClosestCartesian", "hoverCompareCartesian"
            ],
            modeBarButtonsToAdd: [
                ...
            ]
        }
    )

```

Then later with an updated s I do:

```
Plotly.react(id, s["data"], s["layout"]);

```

The layout does not contain any modebar related info. Perhaps I am doing something wrong indeed. My question now is if it is intended that when using react, the modebar active button is set to a default?

---

<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:** [July 10, 2018, 1:26pm UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607/5 "2018-07-10T13:26:19Z")

</div>

Can you paste the content of your `s["layout"]` to help us debug. The modebar depends on `layout.dragmode` and `layout.hovermode` among other things.

---

<div class="post-metadata">

**Author:** ![FWessels](https://avatars.discourse-cdn.com/v4/letter/f/3ab097/32.png) [@FWessels](https://community.plotly.com/u/FWessels)\
**Post date:** [July 10, 2018, 1:53pm UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607/6 "2018-07-10T13:53:37Z")

</div>

I do not have time to give a minimal example, I quickly copied layout from console… Tomorrow I can provide a better example.

```
layout : {
    showlegend : true,
    title : "Camera availablility",
    xaxis : {
        autorange : false,
        range : ["2017-02-02 22:59:21", "2017-11-29 23:59:21"],
        type : "date"
    },
    yaxis : {
        autorange : true,
        fixedrange : true,
        range : [-0.5, 3.5],
        type : "category"
    }
}
```

---

<div class="post-metadata">

**Author:** ![FWessels](https://avatars.discourse-cdn.com/v4/letter/f/3ab097/32.png) [@FWessels](https://community.plotly.com/u/FWessels)\
**Post date:** [August 9, 2018, 2:12pm UTC](https://community.plotly.com/t/freeze-modebar-after-plotly-react/11607/7 "2018-08-09T14:12:17Z")

</div>

Btw, I was able to solve my problem, perhaps interesting for other users.

So what I do is keep track of the dragMode events produced by the plot. Whenever the dragMode changes, I save this as an internal variable. Then whenever I update the plot using Plotly.react, I simple set dragmode the same as what I internally stored.