For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Reflex Logo
Docs Logo
Library

/

Graphing

/

Other Charts

/

Plotly

Plotly

Plotly is a graphing library that can be used to create interactive graphs. Use the rx.plotly component to wrap Plotly as a component for use in your web page. Checkout Plotly for more information.

When integrating Plotly graphs into your UI code, note that the method for displaying the graph differs from a regular Python script. Instead of using fig.show(), use rx.plotly(data=fig) within your UI code to ensure the graph is properly rendered and displayed within the user interface

Basic Example

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

3D graphing example

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.

Expand

📊 Dataset source: mt_bruno_elevation.csv

Plot as State Var

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

Expand

Adding Styles and Layouts

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

Note that the width and height props are not recommended to ensure the plot remains size responsive to its container. The size of plot will be determined by it's outer container.
Expand

API Reference

rx.plotly

Display a plotly graph.

Props

PropTypeDescription
data
Figure

The figure to display. This can be a plotly figure or a plotly data json.

layout
dict

The layout of the graph.

template
Template

The template for visual appearance of the graph.

config
dict

The config of the graph.

use_resize_handler
bool

If true, the graph will resize when the window is resized.

Event Triggers

See the full list of default event triggers
TriggerDescription
on_after_plotFired after the plot is redrawn.
on_animatedFired after the plot was animated.
on_animating_frameFired while animating a single frame (does not currently pass data through).
on_animation_interruptedFired when an animation is interrupted (to start a new animation for example).
on_autosizeFired when the plot is responsively sized.
on_before_hoverFired whenever mouse moves over a plot.
on_button_clickedFired when a plotly UI button is clicked.
on_deselectFired when a selection is cleared (via double click).
on_hoverFired when a plot element is hovered over.
on_relayoutFired after the plot is laid out (zoom, pan, etc).
on_relayoutingFired while the plot is being laid out.
on_restyleFired after the plot style is changed.
on_redrawFired after the plot is redrawn.
on_selectedFired after selecting plot elements.
on_selectingFired while dragging a selection.
on_transitioningFired while an animation is occurring.
on_transition_interruptedFired when a transition is stopped early.
on_unhoverFired when a hovered element is no longer hovered.
Built with Reflex