Create Bar Chart in Plotly Dashboard

Leave a Comment / By /

You might be wondering how you can create bar chart in Plotly dashboard. Well, here we go! There are a few setups that we need to do in order to create a bar chart in Plotly Dashboard.

In this short article, we will learn what is Plotly dashboard and how it can be used to visualize interactive bar charts. We will learn how we can set up a bar chart layout in the Plotly dashboard from the scratch. Moreover, we will also learn how we can add filters in the form of a dropdown button so that the graph will change by selecting different items from the dropdown list.

What is Plotly Dashboard?

Plotly Dash is a library for creating interactive web-based dashboards with Python. It allows you to create visualizations of your data using a variety of different chart types (e.g. bar charts, line plots, scatter plots, etc.), as well as to arrange those visualizations in a flexible and interactive layout. Dashboards created with Plotly Dash are built using the Python programming language and are rendered as a standalone web application.

One of the key features of Plotly Dash is the ability to easily connect your dashboards to a variety of different data sources. This means that you can create dashboards that display live, up-to-date data, and that can be updated automatically as new data becomes available.

In addition to its core functionality, Plotly Dash also provides a number of advanced features such as the ability to embed interactive graphics and animations and to create custom interactive controls that allow users to interact with the data in your dashboard. Overall, Plotly Dash is a powerful tool for creating interactive data visualizations and dashboards that can be shared with others online.

Setting up the Plotly Dashboard

To get started, you’ll need to install the Plotly and dash libraries using pip as shown below:

# installing plotly dash module
pip install plotly dash

Once the installation is complete, the next step is to create a new Python file. You can name it anything and then import all the necessary modules that we will be using to create a bar chart layout in the Plotly dashboard. 

#importing all the required modules to create bar chart layout
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go

Now, we can create a new Dash app and define the layout of the dashboard. The layout consists of a header and a container for the bar chart. We can use the HTML library to define the structure of the dashboard using HTML, and the DCC library to add interactive components such as the bar chart as shown below:

# creating the dash app
app = dash.Dash()

# giving the app  layout
#this layout is done using html
app.layout = html.Div([
    html.H1('My Dashboard'),
    html.Div([
        dcc.Graph(id='bar-chart')
    ])
])

Once we created the simple layout, we can then run the Dash app by calling the run_server method:

#running the server
if __name__ == '__main__':
    app.run_server(debug=True)

At this point, you should have a basic Dash app with an empty bar chart container. When you run the dashboard, it gives a link, open the link in any browser, and then you will be able to see an empty chart as shown below:

bar-chart-layout-in-the-pltoly-dashboard-emtpy-layout

Now, let us add a graph to the dashboard.

Adding a Bar Chart in Plotly to the Dashboard

To add a bar chart layout to the Plotly dashboard, we’ll need to provide some data to plot. Let’s say we have the following data:

#creating the dataset
x = ['apple', 'banana', 'orange', 'grape']
y = [4, 2, 3, 5]

We can use the go.Bar function from the plot.graph_objects library to create a bar chart trace as shown below:

# creating a bar chart
trace = go.Bar(x=x, y=y)

Once you create your bar chart, now the next step is to add the trace to the dcc.Graph component in the layout using the figure argument. If we will not add the graph to the dcc.Graph, it will not be displayed in the dashboard. 

# giving the app  layout
#this layout is done using html
app.layout = html.Div([
    html.H1('My Dashboard'),
    html.Div([
        dcc.Graph(id='bar-chart', figure={'data': [trace]})
    ])
])

Now, let us run the dashboard refresh the dashboard or run it again to see the changes.

bar-chart-in-plotly-dashboard-barcharts

Customizing the Bar Chart in the Plotly Dashboard

The bar chart that we have created is very simple. We can customize it to make it more interactive and beautiful.

To customize the layout of the bar chart, you can modify the properties of the layout object.

For example, you can change the x-axis and y-axis labels by setting the xaxis.title and yaxis.title properties, respectively:

#labeling the axises
layout = go.Layout(
    title='Fruit Counts',
    xaxis={'title': 'Fruit'},
    yaxis={'title': 'Count'}
)

You can also customize the range of the x-axis and y-axis by setting the range property of the respective axis.

layout = go.Layout(
    title='Fruit Counts',
    xaxis={'title': 'Fruit', 'range': [0, 5]},
    yaxis={'title': 'Count', 'range': [0, 6]}
)

If you will run your app, nothing will change because we have not yet added these properties to the layout. So, no we need to specify in the layout that we need to add the above properties to our plotly dashboard. We will add the layout parameter in the dcc.Graph as shown below:

# giving the app  layout
#this layout is done using html
app.layout = html.Div([
    html.H1('My Dashboard'),
    html.Div([
        dcc.Graph(id='bar-chart', figure={'data': [trace], 'layout': layout})
    ])
])

Now run the dashboard again and you will see the changes.

Adding Interactivity to the Bar Chart

We can add interactivity to the bar chart by using Dash’s built-in callback functions. Callback functions allow us to update the chart based on user input, such as a dropdown selection or a slider.

To add a dropdown to the dashboard, you can use the dcc.Dropdown component from the dash_core_components library. For example, we can add a dropdown to select the fruit to display on the bar chart:

app.layout = html.Div([
    html.H1('My Dashboard'),
    html.Div([
        dcc.Dropdown(
            id='fruit-dropdown',
            options=[{'label': fruit, 'value': fruit} for fruit in x],
            value='apple'
        ),
        dcc.Graph(id='bar-chart', figure={'data': [trace], 'layout': layout})
    ])
])

To update the bar chart based on the dropdown selection, you’ll need to define a callback function that takes the dropdown value as input and returns the updated trace and layout objects. You can use the @app.callback decorator to define the callback function:

@app.callback(
    Output('bar-chart', 'figure'),
    [Input('fruit-dropdown', 'value')]
)
def update_bar_chart(selected_fruit):
    y = [4 if fruit == selected_fruit else 0 for fruit in x]
    trace = go.Bar(x=x, y=y, marker={'color': ['red', 'green', 'blue', 'orange']})
    layout = go.Layout(
        title='Fruit Counts',
        xaxis={'title': 'Fruit', 'range': [0, 5]},
        yaxis={'title': 'Count', 'range': [0, 6]}
    )
    return {'data': [trace], 'layout': layout}

In this example, the callback function takes the value of the fruit-dropdown component as input and returns an updated figure object for the bar-chart component. The updated figure has a trace with the y-values set to 4 for the selected fruit and 0 for the other fruits.

To add additional interactivity to the bar chart, you can define additional callback functions and input/output pairs. For example, you might add a slider to control the range of the y-axis, or a button to toggle between different data sets.

Once we run the dashboard, we will get the following output with a dropdown button from where we can select the name, and accordingly, the bar chart will change.

bar-chart-plotly-dashboard

Here is the full code of the bar chart layout in the Plotly dashboard. 

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash import Dash, html, dcc, Input, Output

# creating the dash app
app = dash.Dash()

#creating the dataset
x = ['apple', 'banana', 'orange', 'grape']
y = [4, 2, 3, 5]


# creating a bar chart
trace = go.Bar(x=x, y=y)

# layout
layout = go.Layout(
    title='Fruit Counts',
    xaxis={'title': 'Fruit'},
    yaxis={'title': 'Count'}
)

layout = go.Layout(
    title='Fruit Counts',
    xaxis={'title': 'Fruit', 'range': [0, 5]},
    yaxis={'title': 'Count', 'range': [0, 6]}
)

# giving the app  layout
#this layout is done using html
app.layout = html.Div([
    html.H1('My Dashboard'),
    html.Div([
        dcc.Dropdown(
            id='fruit-dropdown',
            options=[{'label': fruit, 'value': fruit} for fruit in x],
            value='apple'
        ),
        dcc.Graph(id='bar-chart', figure={'data': [trace], 'layout': layout})
    ])
])



@app.callback(
    Output('bar-chart', 'figure'),
    [Input('fruit-dropdown', 'value')]
)
def update_bar_chart(selected_fruit):
    y = [4 if fruit == selected_fruit else 0 for fruit in x]
    trace = go.Bar(x=x, y=y, marker={'color': ['red', 'green', 'blue', 'orange']})
    layout = go.Layout(
        title='Fruit Counts',
        xaxis={'title': 'Fruit', 'range': [0, 5]},
        yaxis={'title': 'Count', 'range': [0, 6]}
    )
    return {'data': [trace], 'layout': layout}





#running the server
if __name__ == '__main__':
    app.run_server(debug=True)

If you are good at CSS, you can add your own styling to the chart and make it more beautiful.

Summary

A dashboard is a visual interface that displays information in a clear and organized manner. Dashboards are often used to present data and analysis in a way that is easy to understand and interpret and to monitor the performance of a system or process.

In this short article, we learned how we can create a bar chart layout in the Plotly dashboard. We discussed each step in detail and at last, we were able to create a bar chart layout in the Plotly dashboard.

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top