How to add multiple graphs to a Plotly Dash app on a single browser page in Python Plotly?

Plotly is an open-source plotting library in Python that can generate several different types of charts. Python users can use Plotly to create interactive web-based visualizations that can be displayed in Jupyter notebooks, saved to standalone HTML files, or served as a part of web applications using Dash. Plotly can also be used in static document publishing and desktop editors such as PyCharm and Spyder.

Dash is a Python framework and it is used to create interactive web-based dashboard applications. The dash library adds all the required libraries to web based dashboard applications.

In this tutorial, we will show how you can add multiple graphs to a Plotly Dash app on a single browser page. Follow the steps given below to generate multiple Dash apps on a single page.

Step 1

Import the Dash library.

import dash

Step 2

Import the Dash core components, dcc and html.

from dash import dcc,html

Step 3

Import the following Dash dependencies.

from dash.dependencies import Input, Output

Step 4

Import the plotly.express module and alias as px.

import plotly.express as px

Step 5

Generate a dataset using the Pandas module

import pandas as pd
df_bar = pd.DataFrame({
   "Season": ["Summer", "Winter", "Autumn", "Spring"],
   "Rating": [3,2,1,4]
})

Step 6

Generate a bar chart using the following values and store it inside the "fig" variable.

fig = px.bar(df_bar, x="Season", y="Rating", barmode="group")

Step 7

Create the main function to run the App server using the following command ?

app = dash.Dash(__name__)
if __name__ == '__main__':
   app.run_server(debug=True)

Step 8

Generate the App layout for two different HTML children in two "div" sections.

app.layout = html.Div(children=[
   # elements from the top of the page
   html.Div([html.H1(children='Dash app1'),
   html.Div(children='''Dash: First graph.'''),
   dcc.Graph(id='graph1',figure=fig),]),

   # New Div for all elements in the new 'row' of the page
   html.Div([
      html.H1(children='Dash app2'),
      html.Div(children='''Dash: Second graph.'''),
      dcc.Graph(id='graph2',figure=fig),
   ]),
])

Example

Here is the complete code to create multiple graphs on a single web page in Dash ?

<div class="code-mirror  language-python" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> dash
<span class="token keyword">from</span> dash <span class="token keyword">import</span> dcc<span class="token punctuation">,</span>html
<span class="token keyword">from</span> dash<span class="token punctuation">.</span>dependencies <span class="token keyword">import</span> Input<span class="token punctuation">,</span> Output

<span class="token keyword">import</span> pandas <span class="token keyword">as</span> pd
<span class="token keyword">import</span> plotly<span class="token punctuation">.</span>express <span class="token keyword">as</span> px
app <span class="token operator">=</span> dash<span class="token punctuation">.</span>Dash<span class="token punctuation">(</span>__name__<span class="token punctuation">)</span>
df_bar <span class="token operator">=</span> pd<span class="token punctuation">.</span>DataFrame<span class="token punctuation">(</span><span class="token punctuation">{</span>
   <span class="token string">"Season"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"Summer"</span><span class="token punctuation">,</span> <span class="token string">"Winter"</span><span class="token punctuation">,</span> <span class="token string">"Autumn"</span><span class="token punctuation">,</span> <span class="token string">"Spring"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
   <span class="token string">"Rating"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

fig <span class="token operator">=</span> px<span class="token punctuation">.</span>bar<span class="token punctuation">(</span>df_bar<span class="token punctuation">,</span> x<span class="token operator">=</span><span class="token string">"Season"</span><span class="token punctuation">,</span> y<span class="token operator">=</span><span class="token string">"Rating"</span><span class="token punctuation">,</span> barmode<span class="token operator">=</span><span class="token string">"group"</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span>layout <span class="token operator">=</span> html<span class="token punctuation">.</span>Div<span class="token punctuation">(</span>children<span class="token operator">=</span><span class="token punctuation">[</span>
   <span class="token comment"># elements from the top of the page</span>
   html<span class="token punctuation">.</span>Div<span class="token punctuation">(</span><span class="token punctuation">[</span>
      html<span class="token punctuation">.</span>H1<span class="token punctuation">(</span>children<span class="token operator">=</span><span class="token string">'Dash app1'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      html<span class="token punctuation">.</span>Div<span class="token punctuation">(</span>children<span class="token operator">=</span><span class="token triple-quoted-string string">'''
      Dash: First graph.'''</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

      dcc<span class="token punctuation">.</span>Graph<span class="token punctuation">(</span>
         <span class="token builtin">id</span><span class="token operator">=</span><span class="token string">'graph1'</span><span class="token punctuation">,</span>
         figure<span class="token operator">=</span>fig
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
   <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
   <span class="token comment"># New Div for all elements in the new 'row' of the page</span>
   html<span class="token punctuation">.</span>Div<span class="token punctuation">(</span><span class="token punctuation">[</span>
      html<span class="token punctuation">.</span>H1<span class="token punctuation">(</span>children<span class="token operator">=</span><span class="token string">'Dash app2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      html<span class="token punctuation">.</span>Div<span class="token punctuation">(</span>children<span class="token operator">=</span><span class="token triple-quoted-string string">'''
      Dash: Second graph. '''</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

      dcc<span class="token punctuation">.</span>Graph<span class="token punctuation">(</span>
         <span class="token builtin">id</span><span class="token operator">=</span><span class="token string">'graph2'</span><span class="token punctuation">,</span>
         figure<span class="token operator">=</span>fig
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
   <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">'__main__'</span><span class="token punctuation">:</span>
app<span class="token punctuation">.</span>run_server<span class="token punctuation">(</span>debug<span class="token operator">=</span><span class="token boolean">True</span><span class="token punctuation">)</span>
</div>

Output

When you execute the above program, you will get the following output on the console ?

Dash is running on http://127.0.0.1:8050/
* Serving Flask app 'main'
* Debug mode: on

Upon clicking the URL, you will be redirected to the browser which will show the following output ?