Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Graphing

/

Plotly

Plotly is a graphing library that can be used to create interactive graphs.

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

First create a plotly figure. In this example we use plotly express to do so.

import plotly.express as px

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(
    df,
    x="year",
    y="lifeExp",
    title="Life expectancy in Canada",
)

Now pass the plotly figure to the Plotly component.

rx.plotly(data=fig, height="400px")

Now lets take a look at a more complex example. Let's create a 3D surface plot of Mount Bruno.

Read in the Mount Bruno data as a csv and create a plotly figure.

import plotly.graph_objects as go

import pandas as pd

# Read data from a csv
z_data = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv"
)

fig = go.Figure(data=[go.Surface(z=z_data.values)])
fig.update_traces(
    contours_z=dict(
        show=True,
        usecolormap=True,
        highlightcolor="limegreen",
        project_z=True,
    )
)
fig.update_layout(
    scene_camera_eye=dict(x=1.87, y=0.88, z=-0.64),
    width=500,
    height=500,
    margin=dict(l=65, r=50, b=65, t=90),
)

Now pass the plotly figure again to the plotly component.

rx.plotly(data=fig, height="400px")

Display a plotly graph.

PropTypeDescriptionValues
dataFigure

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

layoutDict

The layout of the graph.

templateTemplate

The template for visual appearance of the graph.

configDict

The config of the graph.

use_resize_handlerbool

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

Event Triggers

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

← PiechartRadarchart →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting