✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Freeze modebar after plotly.react

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,


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

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.

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?

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.

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"

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.