Plotly in Python: Interactive Charts with Reflex

Plotly is a popular Python graphing library for creating interactive, publication-quality charts. Reflex wraps it with the rx.plotly component so you can embed any Plotly or Plotly Express figure — line charts, scatter plots, histograms, heatmaps, or 3D surface plots — directly into a Python web app with no JavaScript. Because Reflex compiles to a full-stack web app, these charts stay interactive in the browser and can update live from your app state.

Let's create a line graph of life expectancy in Canada.

Plotly Express (plotly.express, imported as px) builds common chart types in a single line of Python, and every figure renders in Reflex with rx.plotly.

Create a Plotly Express bar chart with px.bar:

Create a Plotly scatter plot with px.scatter:

Create a Plotly pie chart with px.pie:

Create a Plotly heatmap with px.density_heatmap:

Create a Plotly histogram with px.histogram:

Create a Plotly box plot with px.box:

A bubble chart is a scatter plot in which a third dimension of the data is shown through the size of the markers. Create one with px.scatter by passing a column to the size argument:

A Gantt chart is a type of bar chart that illustrates a project schedule: tasks are listed on the vertical axis, time intervals on the horizontal axis, and the width of each bar shows the duration of the activity. Create one with px.timeline:

Sunburst charts visualize hierarchical data spanning outwards radially from root to leaves: the root sits at the center and children are added to the outer rings. Create one with px.sunburst, defining the hierarchy with names and parents:

Funnel charts represent data as it moves through the stages of a business process, making them a common Business Intelligence tool for spotting where a process loses volume. Create one with px.funnel:

Use locale to localize Plotly number/date formatting and modebar labels:

You can still pass config; when both are provided, locale= is applied as the final locale value.

Let's create a 3D surface plot of Mount Bruno. This is a slightly more complicated example, but it wraps in Reflex using the same method. In fact, you can wrap any figure using the same approach.

📊 Dataset source: mt_bruno_elevation.csv

The candlestick chart is a financial chart describing the open, high, low, and close values for a given x coordinate (most likely time): boxes show the spread between open and close, and lines show the spread between low and high. Create one with go.Candlestick:

The waterfall chart visualizes how an initial value is affected by a series of positive and negative changes — for example, a profit and loss statement. Create one with go.Waterfall, marking each value as "relative" or "total" via the measure argument:

The bullet chart, designed by Stephen Few as a compact replacement for dashboard gauges and meters, combines a quantitative bar, qualitative ranges (steps), and a performance threshold line in one simple layout. Build one with go.Indicator using the "bullet" gauge shape:

Continuous error bands represent error or uncertainty as a shaded region around a main trace, rather than as discrete whisker-like error bars. Build one with go.Scatter by drawing the main line, then a second trace that walks the upper bound forward and the lower bound in reverse, filled with fill="toself":

Geo maps are outline-based maps drawn from geographic features rather than map tiles. Figures created with px.scatter_geo, px.line_geo, or px.choropleth — or containing go.Scattergeo or go.Choropleth traces — store their map configuration in the figure's layout.geo object, which you can adjust with update_geos:

Scatter maps plot markers on a tile-based map, sized and colored by your data — useful for visualizing geographic point data like vehicle locations or store sites. Create one with px.scatter_map (or a go.Scattermap trace for lower-level control):

Plotly can also render data as an interactive table. Create one with go.Table, passing column headers to header and column data to cells:

A Sankey diagram is a flow diagram in which the width of the arrows is proportional to the flow quantity. Create one with go.Sankey, defining the nodes and the links between them by index:

3D scatter plots show the relationship between three variables at once, with an optional fourth encoded as color. Create one with px.scatter_3d:

3D figures place their traces in a scene, and each scene axis is configured through the figure's scene layout — set nticks, range, or axis titles per axis. This example renders a go.Mesh3d cloud with custom tick counts and ranges on all three axes:

If the figure is set as a state var, it can be updated during run time.

Use update_layout() method to update the layout of your chart. Checkout Plotly Layouts for all layouts props.