How to hide the floating toolbar in Plotly

Jul 22, 2020 · by Tim Kamanin

Plotly has this annoying and useless floating toolbar (aka mode bar) that appears when you hover a graph.

Most of the time, I want to hide it. I remember how in the early days of Plotly, I had to use CSS to do that, and it felt hacky.

Luckily for you (and me), today, we can pass a single config parameter to disable it once and forever. In your Plotly (JavaScript, Python, R, whatever version), you should have the config object that you pass into your plot or graph.

Just add displayModeBar: false to the config object and it will disable the floating toolbar in Plotly. Example for JavaScript:

javascript
const data = []; // It's a stub, put graph data here.
const layout = {}; // It's a stub, put layout config here.

const config = {
  'displayModeBar': false // this is the line that hides the bar.
};

Plotly.newPlot('myDiv', data, layout, config ); // This where we create the graph.

You're welcome, enjoy Plotly, it's an excellent DataViz tool. You just need a little bit of patience and results will come.

Want to get more 🔥 tips like this one?

Subscribe to get notified about new dev tutorials