Pyplot: Display Matplotlib Charts in a Python Web App

Pyplot (reflex-pyplot) lets you render any Matplotlib figure inside a Reflex web app. Matplotlib's pyplot interface is the most popular way to create plots in Python, but on its own it renders to a static window or an image file. The pyplot component takes a matplotlib.pyplot figure and displays it directly in the browser — no Flask routes, HTML templating, or manual image encoding required — so you can turn plotting scripts and notebooks into interactive, stateful dashboards in pure Python.

matplotlib.pyplot is a collection of functions that make Matplotlib behave like MATLAB: each call (plt.plot, plt.scatter, plt.bar, and so on) builds up a figure by adding lines, bars, labels, or legends. In a normal script you would finish with plt.show() to open a window. In a Reflex app you instead pass the Figure object to the pyplot component, which serves it to the frontend and re-renders it whenever your state changes.

Install the reflex-pyplot package using pip.

To display a Matplotlib plot in your app, you can use the pyplot component. Pass in the figure you created with Matplotlib to the pyplot component as a child.

ExpandCollapse

A line plot is the most common Matplotlib chart. Build it with plt.subplots() and ax.plot() exactly as you would in a script, then hand the figure to pyplot to show it in the browser.

ExpandCollapse

The same pattern works for a Matplotlib bar chart — call ax.bar() with your categories and values, then render the figure with pyplot.

ExpandCollapse

Lets create a scatter plot of random data. We'll also allow the user to randomize the data and change the number of points.

In this example, we'll use a color_mode_cond to display the plot in both light and dark mode. We need to do this manually here because the colors are determined by the matplotlib chart and not the theme.

Randomize

Number of Points:

ExpandCollapse

Create the figure with matplotlib.pyplot as usual, then pass the Figure object to Reflex's pyplot component. Reflex renders it in the browser for you — you don't need Flask, a REST endpoint, or manual base64 image encoding.

Yes. Compute the figure inside an rx.var that depends on your state, then update the state from buttons, sliders, or other events. The chart re-renders automatically, as shown in the Stateful Example above.

No. plt.show() opens a desktop window and is not used in a web app. Instead, return the figure to the pyplot component and call plt.close(fig) after creating it to free memory.