Streamlit Line Chart using Plotly, Matplotlib and Seaborn

Let us see how we can use plot line charts in the Streamlit module using various methods. For those who don’t know Streamlit, it is a Python module that can be used to create web apps. Similar to Django or Plotly, you can use the Streamlit module to create web applications in Python. This is an awesome tool that needs very less effort and time to create fully interactive web applications.

In this short article, we will discuss Streamlit Line charts in detail and learn how we can use various modules including Plotly to plot Streamlit line charts. For this tutorial, we will be using an air pollution dataset ( you can use your own datasets).

If you have any questions or suggestions, please let us know through comments and we will try to help you to sort the problem.

Streamlit Line Chart – Setup

Before going into the details and start plotting line charts in Streamlit, we first need to set up the web app and run the application to see if everything goes fine. First, make sure that you have installed the latest version of the Streamlit module on your system. You can check the version of the Streamlit module by running the following commands:

import streamlit as st

print(st.__version__)

Output:

1.22.0

In your case, the version might be different but if the version is less than 1.22.0, then I will recommend updating the version of the streamlit module to any of the listed ones.

In the next step, we will import the required modules and the dataset. Again, if any of the given modules are not installed on your system, then please go through the documentation and install the module before running the application.

import streamlit as st
import pandas as pd
import plotly.express as px
import matplotlib.pyplot as plt

PM1_pred = pd.read_csv("Forecasting/Data/PM1_predictions.csv")

Now, we will add the title to the application and will print out the dataset in tabular form. The code for the title and printing anything on the web app is very simple which is given below:

# printing the dataset to the web app
st.title("Streamlit Line Chart")

# printing the table
st.write(PM1_pred)

The st.title() function is used to put the title on the web application while the st.write() method is used to print anything on the application. In our case, we have printed the dataset.

How to Run Streamlit Web App?

We need to open the terminal in the same directory and run the following commands to open the Streamlin Web App.

streamlit run [application name]

Note that in the application name, you must type the name of the Python file where you have written your code and the name should be with .py extension. For example, my Python file name is app.py so I will run streamlit run app.py.

Once you run the command, you will see something like this:

The application will be opened in a new tab in the default browser.

Streamlit Line Chart Using Plotly

Plotly is a powerful Python module that is used to create interactive graphs and dashboards. It has gained so much popularity in very less time. We can use the Plotly to plot different interactive graphs and a line chart is one of them.

One of the best features of Streamlit is that we can use different visualization modules to plot graphs and then add them to the Streamlit Web App. Let us first visualize the dataset using plotly line charts.

# creating the plotly chart
fig = px.line(PM1_pred)

# adding the heading to the streamlit web app
st.subheader("Plotly line chart in streamlit")

# creating line chart in streamlit
st.plotly_chart(fig)

Output:

The px.line() is a function in Plotly that is used to plot line charts. We have plotted a line chart and stored this chart in a variable known as Fig. Then we are using st.plotly_chart() function to plot the line chart of plotly in the Streamlit module. It is that simple.

You May also like

Interactive Plots in Python Using Plotly

Streamlit Line Chart Using Matplotlib

Matplotlib is another Python module that is used for visualization. This module has many important functions that can be used to plot various graphs.

We will learn how we can use Matplotlib module to plot line charts in the Streamlit Web App. First, we need to create a line chart in the Matplotlib module and then show that chart in our web application.

# creating line chart in matplotlib
fig1, ax = plt.subplots()
ax.plot(PM1_pred)

# adding heading to streamlit line chart using matplotlib
st.subheader("Matplotlib line chart in Streamlit")

# showing the plot
st.pyplot(fig1)

Output:

As you can see, we first plotted the line chart using the Matplotlib module and then we just visualized the chart in our app using st.pyplot() function.

You may also like

3D Plots in Python using Matplotlib and Plotly

Streamlit Line Chart Using Seaborn

Seaborn is another very powerful module in Python that can be used for visualization. We can use seaborn for various kinds of interactive and colorful visualizations.

Let us first create a line chart in the Seaborn module and then we will visualize the plot on our web application.

# seaborn line chart in streamlit
fig2 = plt.figure(figsize=(10, 4))
sns.lineplot(PM1_pred)

# adding heading
st.subheader("Seaborn Line chart in Streamlit")

# plotting
st.pyplot(fig2)

Output:

As you can see, we first plotted the line chart in Seaborn and then used the st.pyplot() method to visualize the chart on the web application.

Full Code of Streamlit Line Chart Web App

Here is the full code of the dashboard that we just created and visualized line charts using three different Python libraries. Copy the code and paste it into your Python file and run the web application.

import streamlit as st
import pandas as pd
import plotly.express as px
import matplotlib.pyplot as plt
import seaborn as sns

PM1_pred = pd.read_csv("PM1_predictions.csv")

# printing the dataset to the web app
st.title("Streamlit Line Chart")

# printing the table
st.write(PM1_pred)

# creating the plotly chart
fig = px.line(PM1_pred)

# adding the heading to the streamlit web app
st.subheader("Plotly line chart in streamlit")

# creating line chart in streamlit
st.plotly_chart(fig)

# creating line chart in matplotlib
fig1, ax = plt.subplots()
ax.plot(PM1_pred)

# adding heading to streamlit line chart using matplotlib
st.subheader("Matplotlib line chart in Streamlit")

# showing the plot
st.pyplot(fig1)

# seaborn line chart in streamlit
fig2 = plt.figure(figsize=(10, 4))
sns.lineplot(PM1_pred)

# adding heading
st.subheader("Seaborn Line chart in Streamlit")

# plotting
st.pyplot(fig2)

Hopefully, this tutorial was useful and you have learned how you can plot line charts in Streamlit Web Application. If you are stuck somewhere or some part was not clear, please let us know through comments.

Summary

Streamlit is a Python module that can be used to create interactive web apps. In this article, we learned about Streamlit line charts and we used various Python modules to create Streamlit line charts.