Temporarly disable mouse click interactions on a Plotly plot ("freeze the plot")

Question

With Javascript, how to disable/enable all mouse interactions on a Plotly.js plot? (click, drag and drop for selection or zooming, etc.)

This does not work: the interactions are still available on the plot, even after clicking the button:

Plotly.newPlot('myDiv', [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}], {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}});


document.getElementById("button").onclick = () => {
    document.getElementById("container").onclick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
};

#button { background: gray; }

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="button">Click here to disable/enable interaction on plot</div>
<div id="container"><div id="myDiv"></div></div>

Answer 1

I couldn't find a native Plotly method to make this do what you want. However, I did come up with a workaround. I don't think it's particularly robust, but it does work.

Essentially there's an overlay that will cover the plot when static so that no pointer events work. When you make it interactive, it hides the overlay.

Plotly.newPlot('myDiv', [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}], {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}});


document.getElementById("button").onclick = () => {
    document.getElementById("container").onclick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
};


function static() {
over = document.querySelector('#overlay');
over.style.display = 'block';
}
function interactive(){
over = document.querySelector('#overlay');
over.style.display = 'none';
}

stat = document.querySelector("#static");
inta = document.querySelector("#interactive");

stat.addEventListener('click', static);
inta.addEventListener('click', interactive);

#button { background: gray; }
input {
cursor: pointer;
background-color: #003b70;
color: white;
padding: 10px 50px;
margin: 10px;
z-index:10000;           /* always on top */
}
input:active { /* make it move */
position: relative;
top: 1px;
}
#overlay {
height: calc(100vh - 100px); /* below the buttons */
width: 100vw;
top: auto;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;          /* above everything but the buttons */
display: none;
position: fixed;
}

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="button">Click here to disable/enable interaction on plot</div>
<div style="width:100%;height:100%;"><input type="button" id="static" value="Make Plot Static"></input><input type="button" id="interactive" value="Make Plot Interactive"></input></div><div id="overlay"></div>
<div id="container"><div id="myDiv"></div></div>