How to animate a line chart

🎈 Using Streamlit
2

Hi @cristian.cotoi! Welcome to the Streamlit community! :hugs:

It is absolutely possible to animate matplotlib charts in Streamlit. I’ve modified your code in this gist:

import matplotlib.pyplot as plt
import numpy as np
import streamlit as st
import time

fig, ax = plt.subplots()

max_x = 5
max_rand = 10

x = np.arange(0, max_x)
ax.set_ylim(0, max_rand)
line, = ax.plot(x, np.random.randint(0, max_rand, max_x))
the_plot = st.pyplot(plt)

def init():  # give a clean slate to start
    line.set_ydata([np.nan] * len(x))

def animate(i):  # update the y values (every 1000ms)
    line.set_ydata(np.random.randint(0, max_rand, max_x))
    the_plot.pyplot(plt)

init()
for i in range(100):
    animate(i)
    time.sleep(0.1)

You can run this code right now by running:

streamlit run https://gist.githubusercontent.com/treuille/4f70bff85ec5856cc7696f5c73f1ea11/raw

Please note that if you use Altair, Streamlit also gives you more powerful and efficient constructs to animate charts like add_rows.

To see an example of this more advanced usage (including code snippet), please run

streamlit hello

and choose Plotting Demo from the select-box in the sidebar.

3 Likes