JavaScriptJavaScript

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.

Hey, if you've found this useful, please share the post to help other folks find it:

There's even more:

Subscribe for updates

  • via Twitter: @timonweb
  • old school RSS:
  • or evergreen email ↓ ↓ ↓