/

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.

📊 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.

Adding Styles and Layouts

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

API Reference

rx.plotly

Display a plotly graph.

Prop	Type \| Values	Default
`data`	`Figure`
`layout`	`dict`
`template`	`Template`
`config`	`dict`
`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_double_click`	Fired when the plot is double 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 laid out (zoom, pan, etc).
`on_relayouting`	Fired while the plot is being laid 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 occurring.
`on_transition_interrupted`	Fired when a transition is stopped early.
`on_unhover`	Fired when a hovered element is no longer hovered.