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.

Plot as State Var

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

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.

API Reference

rx.plotly

Display a plotly graph.

Prop	Type \| Values	Default
`data`	`Figure`
`layout`	`Dict[Any, Any]`
`template`	`Template`
`config`	`Dict[Any, Any]`
`use_resize_handler`	`bool`	`LiteralVar.create(True)`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_click`	Fired when the plot is clicked.
`on_after_plot`	Fired after the plot is redrawn.
`on_animated`	Fired after the plot was animated.
`on_animating_frame`	Fired while animating a single frame (does not currently pass data through).
`on_animation_interrupted`	Fired when an animation is interrupted (to start a new animation for example).
`on_autosize`	Fired when the plot is responsively sized.
`on_before_hover`	Fired whenever mouse moves over a plot.
`on_button_clicked`	Fired when a plotly UI button is clicked.
`on_deselect`	Fired when a selection is cleared (via double click).
`on_hover`	Fired when a plot element is hovered over.
`on_relayout`	Fired after the plot is layed out (zoom, pan, etc).
`on_relayouting`	Fired while the plot is being layed out.
`on_restyle`	Fired after the plot style is changed.
`on_redraw`	Fired after the plot is redrawn.
`on_selected`	Fired after selecting plot elements.
`on_selecting`	Fired while dragging a selection.
`on_transitioning`	Fired while an animation is occuring.
`on_transition_interrupted`	Fired when a transition is stopped early.
`on_unhover`	Fired when a hovered element is no longer hovered.

Learn

Components

Recipes

API Reference

Plotly

Basic Example

3D graphing example

Plot as State Var

Adding Styles and Layouts

API Reference

rx.plotly

Event Triggers