How to create Python Interactive Dashboards with Plotly Dash: 6 steps Tutorial - Just into Data (2023)

In this tutorial, you’ll learn how to create Python interactive dashboards using plotly Dash, with an example.

Web-based dashboards are an efficient way to display and share information with others. But it often involves a complicated process that only expert web developers can achieve. As Python programmers in data science, how can we build an interactive web application with data visualizations?

Plotly Dash is the go-to library. It empowers us to build beautiful looking, interactive, and easy to share dashboards, all in Python.

Following this Python Dash tutorial, you’ll learn:

  • What is Dash
  • How to build the Dash app layout with data visualization
  • How to add interactive features (callbacks)
  • How to run and display the dashboard

So if you want to build your first interactive dashboard with Python Dash, this tutorial will walk you through an example step-by-step.

Let’s get started!

Editor’s Note:This tutorial is updated in April 2022 to include the new features in Dash 2.0.

Further learning: to learn more details and depth about Dash, please take our video course: Python Interactive Dashboards with Plotly Dash. It includes step-by-step explanations, more advanced functions, all with real-world dataset examples.

To follow this Python interactive dashboard in Dash tutorial, you need to know Python, includingbasic knowledge of pandas. If you need help, please check out the below resources:

  • Python basics: FREEPython crash course
  • Pythonpandas:Python for Data Analysis with projectscourse. This course teaches pandas, which is necessary to transform the dataset into a dashboard, and much more!

Table Of Contents

(Video) Introduction to Dash Plotly - Data Visualization in Python

  1. What is Dash?
  2. Step #1: Exploring the dataset
  3. Step #2: Setting up the Python environment
  4. Step #3: Preparing to build the Dash app
  5. Step #4: Building the layout of the dashboard
  6. Step #5: Adding interactivity to the dashboard
  7. Step #6: Running the dashboard

What is Dash?

Dash is a free Python library built by the same company that created the plotly graphing library. With Dash, you can develop web-based, customizable, interactive dashboards, all in Python, without writing HTML or JavaScript.

Each Dash app has two main parts:

  • layout: determines what the Dash app looks like
  • callback functions: the function that connects the Dash components and defines their interactive features

We’ll build both parts in this tutorial. Now let’s go through our example to make an interactive data visualization using Dash.

Step #1: Exploring the dataset

Before building the Dash app, we need to explore the dataset. We recommend doing this in JupyterLab/Notebook. Since it has an interactive interface, we can easily code and examine the outputs.

First, we’ll import two libraries (please install them if you haven’t):

  • pandas: for loading and manipulating datasets
  • for generating data visualizations
    Dash is built on top of plotly, so it’s easy to put plotly figures into Dash apps. This is why we are using plotly, instead of other Python data visualization libraries

In this tutorial, we’ll use the Avocado Prices dataset to build our example dashboard. So let’s load it and take a look at its summary.

As you can see, the dataset contains information about avocados.

<class 'pandas.core.frame.DataFrame'>RangeIndex: 30021 entries, 0 to 30020Data columns (total 13 columns): # Column Non-Null Count Dtype --- ------ -------------- ----- 0 date 30021 non-null object 1 average_price 30021 non-null float64 2 total_volume 30021 non-null float64 3 4046 30021 non-null float64 4 4225 30021 non-null float64 5 4770 30021 non-null float64 6 total_bags 30021 non-null float64 7 small_bags 30021 non-null float64 8 large_bags 30021 non-null float64 9 xlarge_bags 30021 non-null float64 10 type 30021 non-null object 11 year 30021 non-null int64 12 geography 30021 non-null object dtypes: float64(9), int64(1), object(3)memory usage: 3.0+ MB

Now suppose we want to present the average prices of different types of avocados for various geographies across time, i.e., we want to focus on presenting the information of the columns date, average_price, type, and geography.

Let’s explore these columns more. What are the different type and geography of avocados? Let’s take a look at the categories using the value_counts method. This will show us the unique categories for these variables.

From the results below, you can see that there are two categories of type, and many different categories for geography.

conventional 15012organic 15009Name: type, dtype: int64
Phoenix/Tucson 556Northeast 556Las Vegas 556Sacramento 556Tampa 556Spokane 556Southeast 556New York 556Raleigh/Greensboro 556Syracuse 556Plains 556California 556Orlando 556Albany 556Boise 556Boston 556Houston 556West 556Portland 556Harrisburg/Scranton 556Cincinnati/Dayton 556Miami/Ft. Lauderdale 556Dallas/Ft. Worth 556Hartford/Springfield 556Great Lakes 556Louisville 556Philadelphia 556Pittsburgh 556Baltimore/Washington 556Roanoke 556Jacksonville 556Midsouth 556Chicago 556San Francisco 556South Central 556San Diego 556Detroit 556Grand Rapids 556Nashville 556Charlotte 556Seattle 556Los Angeles 556Northern New England 556Indianapolis 556Buffalo/Rochester 556Total U.S. 556Richmond/Norfolk 556New Orleans/Mobile 556Denver 556St. Louis 556Atlanta 556South Carolina 556Columbus 556West Tex/New Mexico 553Name: geography, dtype: int64

Since there are only two avocados types, we can plot their average_price time series on the same line chart. Let’s try creating such a figure when geography is ‘Los Angeles’.

Further Learning: If you are not familiar with plotly, please look at our tutorial, Plotly Python Tutorial: How to create interactive graphs.

(Video) Starting Data Visualizations With Dash and Python

How to create Python Interactive Dashboards with Plotly Dash: 6 steps Tutorial - Just into Data (1)

This is a nice chart, but it’s only for one geography of ‘Los Angeles’.

How can we make it easy for users to explore this information from different geography?

If we have a dropdown with geography options, the users would be able to choose among them. Then according to the geography selected by the users, we can display the above line plot to them for that specific geography.

This is something we can do easily with Dash!

It’s time to use Dash.

Step #2: Setting up the Python environment

After exploring the dataset in Jupyter Notebook, we recommend using one of the Python editors to implement Dash apps. This is because when working on Dash apps, we want to focus on building and running the dashboards as a whole script. So it’s easier to test in Python editors such as PyCharm.

We’re using the PyCharm Editor – Community Edition. It’s free and has many useful features for writing Python code. However, if you still prefer Jupyter Notebook, you can try out the library jupyter-dash, which will not be covered in this tutorial.

It’s also necessary to use the pip install dash command in your terminal to install Dash before using it.

Step #3: Preparing to build the Dash app

We can head over to the Python editor such as PyCharm to start writing the Dash app.

The code snippets below need to be combined and run as a single Python script. We are breaking them down into pieces so that it’s easier to explain. You can either type them into your Python file or copy and paste the complete version, which will be provided in the last step of this tutorial.

First, we need to import the libraries. The necessary ones for our dashboard are:

  • dash: the Dash library, which includes:
    • Dash: class Dash
    • html (Dash HTML Components module): for building the layout, which contains components for every HTML tag, such as the H1 heading
    • dcc (Dash Core Components module): for building the layout, which contains various higher-level components such as dropdown and graph
    • Input, Output: for defining callback functions
  • pandas: loading and manipulating the data
  • creating figures

Then we can load the dataset as a pandas DataFrame, which is the same as earlier. Please make sure you’ve saved this Python script and the dataset avocado-updated-2020.csv in the same directory to avoid setting the path in the read_csv function.

We’ll also create a Dash app object called app. This app is what we’ll be focusing on for the rest of the tutorial.

(Video) Dash Plotly - Financial Dashboards in Python

Step #4: Building the layout of the dashboard

The app-building process always starts from the layout. So first, we need to design the look of the dashboard.

The layout has the structure of a tree of components. And we use the keyword layout of the app to specify its layout. Then, using the two modules: html and dcc, we can display three components on our dashboard, from top to down:

  • an H1 heading (html.H1) as the dashboard’s title. We specify its children property to be the text ‘Avocado Prices Dashboard’
  • a dropdown menu (geo_dropdown, which is a dcc.Dropdown) based on the geography
    We’ve built it as a variable outside and then referenced it within the layout:
    options: this property specifies the options of unique geographies the dropdown has
    value: this property is the selected geography when we first launch the app. We made it as ‘New York’
  • a graph (dcc.Graph) with id ‘price-graph’

Below is the code to set up the layout.

As you might have noticed, we are using an html.Div component to hold our three Dash components. The html.Div is a container component, which is always used when we have multiple Dash components in the layout. We put the other Dash components as a list inside its children property.

After setting up the dashboard’s look, it’s time to add a callback function to make it interactive.

Step #5: Adding interactivity to the dashboard

The callback functions are Python functions. They get automatically called by Dash whenever their inputs change. As a result, the functions run and update their outputs.

The two main sections of the callback function are:

  • decorator, which starts with @app.callback
  • function itself, which begins with def

Below is the code of our callback function to make the plotly figure dependent on the dropdown.

Within the decorator @app.callback, we specify the Output and the Input objects of the callback function. They are both the properties of Dash components.

In our example, the output is the figure property of the Dash component with id = ‘price-graph’, which is the dcc.Graph component set in the layout. While the input is the value property of the Dash component with the variable name geo_dropdown, which is the dcc.Dropdown component set in the layout. So you’ve seen two ways of specifying components in the callback function:

  • pass the ID to component_id
  • pass the variable name directly to component_id, in which case Dash autogenerates IDs for the component

After specifying them, we use them within the function below. Within the parenthesis after the def update_graph, we name the input as selected_geography. This corresponds to the Input(component_id=geo_dropdown, component_property='value'). Then within the body of the function, we ask the function to:

  • generate a filtered dataset filtered_avocado based on selected_geography
  • create a plotly line figure called line_fig based on this filtered dataset

The function returns this line_fig as the output, which corresponds to Output(component_id='price-graph', component_property='figure').

Here is an example. When the user selects ‘Los Angeles’ in the dropdown component, its value property will become ‘Los Angeles’, which means the input of the function selected_geography='Los Angeles'. This change will trigger the callback function, and update the output, as the line figure is only for Los Angeles.

(Video) Python Interactive Dashboard STEP BY STEP

That’s all the work needed for the callback function!

We are ready to run the dashboard.

Step #6: Running the dashboard

By default, the Dash app runs on our local computers. To complete the script, we need to add code to run the server. We can add these two lines of code after the callback function.

And that’s it!

As mentioned earlier, we need to run all the code as a whole script. So if you haven’t, you can copy the complete script below and save it into your Python editor:

So we can name this Python script avocado_example, and save it under the same directory as the dataset avocado-updated-2020.csv. Then we can go to the terminal to run it by typing in the command python

After running successfully, you should see the below messages in the terminal window.

Dash is running on * Serving Flask app "avocado_example" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on

Remember that Dash creates web applications? So this URL is the default address to access the app. You can go to it and see your first Python interactive dashboard opening in the browser!

This is what it should look like:

How to create Python Interactive Dashboards with Plotly Dash: 6 steps Tutorial - Just into Data (2)

If you haven’t got the chance to run your app, look here. We have deployed this app on Heroku so that you can interact with it as a user. Try to select different geographies within the dropdown and see the updated graph.

In this tutorial, you’ve successfully created your first Python interactive dashboard with plotly Dash!

Again, to learn about how to:

  • set up more Dash components such as range slider, radio items, datatable
  • customize the look of the dashboards
  • create a grid layout dashboard
  • more dynamic interactive features

Please take our video-format course: Python Interactive Dashboards with Plotly Dash. You’ll also get an overview of HTML and CSS within the course to better understand Dash.

(Video) Build Interactive Python Dashboards With Plotly And Dash

Leave a comment for any questions you may have or anything else.


How do I create a data visualization dashboard? ›

Five tips to create effective data visualization dashboards
  1. Understand your audience. When you're creating a data visualization, remember – it's not about you. ...
  2. Communicate to a specific audience. ...
  3. Choose the best visual(s) ...
  4. Use proper design principles. ...
  5. Provide context for visualizations.

How do I create a dashboard in Plotly dash? ›

To start building your own dashboard, remember the three components for Dash: 1) graphs; 2) layout; and 3) callback.
  1. Step 1: Visualisation Preparation. For this dashboard, I planned to have four graphs: fig1 = ...
  2. Step 2: Setup the Dash Layout. ...
  3. Step 3: Setup Callback.
Mar 9, 2021

Which software is best for dashboards in Python? ›

Python Dashboarding Landscape: Plotly Dash, Panel, Voila, and Streamlit. Python offers many amazing tools for building dashboards and other web apps, all listed at The most popular dashboard-focused tools are Dash, Panel, Voila, and Streamlit.

Which programming language is best to create interactive dashboard? ›

Most open-source dashboards use R programming or Python as a foundation. Both languages offer statistical and visualization libraries that can quickly model the data. They are perfect for developing complex data models such as regressions, clustering and machine learning models.

Which IDE is best for Python Dash? ›

The best Python IDEs for Windows are PyCharm, Spyder, Pydev, IDLE, Wing, Eric Python, etc. Python is a popular programming language which was developed in 1991. Python as a programming language is principally used for software development, server-side web development, artificial intelligence, and scripting.

How do you make a dashboard step by step? ›

Here's a simple step-by-step guide on how to create a dashboard in Excel.
  1. Step 1: Import the necessary data into Excel. No data. ...
  2. Step 2: Set up your workbook. ...
  3. Step 3: Add raw data to a table. ...
  4. Step 4: Data analysis. ...
  5. Step 5: Determine the visuals. ...
  6. Step 6: Create your Excel dashboard. ...
  7. Step 7: Customize your dashboard.
Mar 16, 2023

How do I create an interactive dashboard spreadsheet? ›

To create an interactive dashboard in Excel, you first need to create interactive charts. To do so, you first have to convert your data into a Pivot table. These pivot tables will then be used to create interactive charts which will then go on the Excel dashboard.

What data visualization tool is best for dashboards? ›

The Best Data Visualization Software of 2023
  • Microsoft Power BI: Best for business intelligence (BI)
  • Tableau: Best for interactive charts.
  • Qlik Sense: Best for artificial intelligence (AI)
  • Klipfolio: Best for custom dashboards.
  • Looker: Best for visualization options.
  • Zoho Analytics: Best for Zoho users.
Apr 22, 2023

How do I create a dashboard from a CSV file in Python? ›

Build a dashboard in python from a CSV file [ Easy Steps ]
  1. Step 1: Plot the data using Plotly. We'll be using a simple CSV file for the data source, namely a COVID time series dataset. ...
  2. Step 2: Embed the graph with Dash. To render our dashboard application, we'll be using Dash. ...
  3. Step 3: Run the application server with Flask.
Feb 26, 2021

Can I create dynamic dashboards using Excel? ›

well-organized data that can easily be turned into a dynamic table. This means ensuring that all data is in the proper rows and columns. Select the data you want to include in the table and then, on the Insert Tab on the Excel ribbon, locate the tables Group and select Pivot Table.

What is a Plotly dashboard? ›

A dashboard is a collection of plots and images organized with a certain layout. There are two ways to create a Plotly dashboard: using the online creator or programmatically with Plotly's python API. In Plotly, dashboards can contain plots, text and webpage images.

How does Plotly Dash work? ›

Built on top of Plotly. js, React, and Flask, Dash ties modern UI elements like dropdowns, sliders and graphs directly to your analytical python code. Dash apps consist of a Flask server that communicates with front-end React components using JSON packets over HTTP requests.

Is Python Plotly free? ›

Yes. Plotly for Python is free and open-source software, licensed under the MIT license. It costs nothing to install and use.

What is an interactive dashboard? ›

An interactive dashboard is a business data management tool that allows users to interact with data by tracking, analyzing, monitoring, and displaying key business metrics. By using an interactive dashboard, users can dig deeper into an organization's operational information and filter it in several ways.

What is the most popular Python visualization? ›

matplotlib is the O.G. of Python data visualization libraries. Despite being over a decade old, it's still the most widely used library for plotting in the Python community. It was designed to closely resemble MATLAB, a proprietary programming language developed in the 1980s.

Which Python tool is best for data analysis? ›

Pandas. Pandas (Python data analysis) is a must in the data science life cycle. It is the most popular and widely used Python library for data science, along with NumPy in matplotlib. With around 17,00 comments on GitHub and an active community of 1,200 contributors, it is heavily used for data analysis and cleaning.

What tool do most Python developers use? ›

Table of Contents
  • Top Python developer tools.
  • 1.1. PyCharm IDE.
  • 1.2. Jupyter Notebook.
  • 1.3. Keras.
  • 1.4. Pip Package.
  • 1.5. Vim.
  • 1.6. Selenium.
  • 1.7. Sublime Text.

What tool to use to create dashboard? ›

Some of the best free dashboard tools for visualizing your metrics and KPIs are Datapad, Grafana, Databox, Dasheroo, FineReport, Metabase, Google Data Studio, Matomo, Tableau, and Inetsoft.

Which two interactive elements can you add to a dashboard? ›

The URL actions and filter actions are the interactive elements which add to the dashboard for users.

Which tool can add interactivity to a dashboard? ›

Tableau is a great tool to build user-friendly and customized interactive dashboards which allows you to create tooltips, filters, sets, parameters and many sheet and dashboard actions.

How much does Python Dash cost? ›

Dash Pricing. Dash has 1 pricing edition that costs $59. A free trial of Dash is also available.

Is Jupyter a python IDE? ›

Jupyter began a transition to look more like an IDE, although it still kept its own way of doing this, and it still is nothing like any other conventional IDE.

Is AnaConda a python IDE? ›

Though they are independent tools, PyCharm vs AnaConda can be used together for projects that can benefit from both tools. PyCharm is an IDE built to make it easier to write Python code, by providing a text editor and debugging, among other features. Anaconda is a Python distribution focused on data driven projects.

What is the first step in the 7 step dashboard design guidelines? ›

1. Requirement gathering. This is the most important step of the process - asking your users and stakeholder the right questions and gathering accurate requirements. It will set a solid foundation for your build and will deeply influence your next steps as well.

How do I create a dynamic dashboard? ›

To create or edit a Salesforce Dynamic Dashboard, navigate to the Dashboards tab, click New Dashboard to create or click on an existing dashboard to edit. First, when building a new dashboard, name it, add a description if you'd like, and select the right folder for proper organization.

What is the basic structure of dashboard? ›

Overview. From top down, there are 3 main components of dashboard: Application, Dashboard and Widget. The Application contains many Dashboards and each Dashboard contains many Widgets. And all 3 main components are able to connect to database through DataSource.


1. Python Dash Tutorial
(Clinton Daniel)
2. Getting Started With Dash: Easy Data Visualization In Python - Part 1/3
3. How to Create a Beautiful Python Visualization Dashboard With Panel/Hvplot
(Thu Vu data analytics)
4. Create Web App Dash Plotly Python
(Python In Action)
5. Plotly Dash - Real time candlestick dashboards (Python only)
(Chad Thackray)
6. How to Build an Analytical Dashboard using Plotly Dash
(Augmented Startups)


Top Articles
Latest Posts
Article information

Author: Madonna Wisozk

Last Updated: 07/13/2023

Views: 6052

Rating: 4.8 / 5 (68 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Madonna Wisozk

Birthday: 2001-02-23

Address: 656 Gerhold Summit, Sidneyberg, FL 78179-2512

Phone: +6742282696652

Job: Customer Banking Liaison

Hobby: Flower arranging, Yo-yoing, Tai chi, Rowing, Macrame, Urban exploration, Knife making

Introduction: My name is Madonna Wisozk, I am a attractive, healthy, thoughtful, faithful, open, vivacious, zany person who loves writing and wants to share my knowledge and understanding with you.