Python

Hide Modebar in Plotly Dash

Plotly Dash or Dash is a free and open-source web framework for building machine learning and data science web applications. Built on top of Plotly.js, React, and Flask, Dash offers incredible features including modern UI elements with minimal code. Dash is also very easy to learn making it very convenient for both beginners and professionals.

Dash also offers unparalleled customization for the plots and figures in a simple config entry. In this tutorial, we will learn how to use the Dash configuration features to hide the modebar.

Let’s get started.

Installing Plotly Dash

Before getting started on the Dash configuration features, it is good to ensure that Dash is installed and available on your system.

We can do by running pip as shown:

$ pip install dash

If you are using Jupyter Notebook or a similar Jupyter environment, you can install Dash by running the command:

$ pip install jupyter-dash

Keep in mind that you will require Pandas to use Plotly Express.

Creating a Simple Dash App

The next step is to create a simple web application using Dash. For this tutorial, we will use a Pie chart which is both simple and informative.

Consider the source code as shown:

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)
databases = ['MySQL', 'PostgreSQL', 'SQLite', 'Redis', 'Elasticsearch']
usage = [8000, 5000, 3000, 2500, 1800]
fig = px.pie(labels=databases, values=usage, names=databases)
app.layout = html.Div(children=[
    html.H1(children='Simple Pie Chart'),
    html.Div(children='''A pie chart of the most popular databases'''),
    dcc.Graph(
        id='pie',
        figure=fig
    )
])
if __name__ == '__main__':
    app.run_server(debug=True)

In the code above, we start by importing the required module. We import Dash, html, and dcc from dash,. These modules will allow us to create a simple web app and plot the figure on the client.

Next, we create an app instance using Dash class.

In the next step, we create the data we wish to use. Since we are creating a simple pie chart, we set the labels and values as a list.

The next step is composing the layout. Here, we use various components such as html.Div., html.H1, and dcc.Graph.

The Dash component module provides us with useful components for popular HTML tags. For example, the html.H1 is a simple <h1> tag.

Keep in mind that not all components are HTML elements. For example, Dash core components are high-level components generated through the React.js library

The children property allows us to pass the data that we wish to display. This is the first attribute which means you can skip it.

Once completed, we can run the app with the command:

$ python3 app.py

We can then visit the target URL to view the plot as:

Dash Hide Modebar

You will notice that the Modebar appears on hover. Although this can be useful, it can also result in poor visibility, especially on small devices.

To hide the modebar in Plotly Dash, we can use the config parameter and set the displayModeBar to false as shown:

dcc.Graph(
        id='pie',
        figure=fig,
        config={
        'displayModeBar': False
    }

Using the config parameter in the dcc.Graph component, we can specify the ‘displayModeBar’ property to False. This should remove the Modebar from the figure.

Closing

In this tutorial, you learned the basics of customizing Plotly dash components. We also covered how to disable the modebar from Figures in Dash.

About the author

John Otieno

My name is John and am a fellow geek like you. I am passionate about all things computers from Hardware, Operating systems to Programming. My dream is to share my knowledge with the world and help out fellow geeks. Follow my content by subscribing to LinuxHint mailing list