From 6fdf0b05438ef0f7349909f52938c65dca6bfa72 Mon Sep 17 00:00:00 2001 From: amsraman Date: Wed, 15 Jul 2026 15:39:56 -0700 Subject: [PATCH 1/3] docs: expand the Plotly page with 14 chart-type recipes Converts the Plotly chart recipes from Reflex Build's AI builder knowledge base into doc sections: bubble, gantt, sunburst, funnel join the Plotly Express section; new Financial (candlestick, waterfall, bullet), Statistical (continuous error bands), Maps (geo, scatter map), Tables and Diagrams (go.Table, sankey), and 3D (scatter, axis config) groups. Every demo block is self-contained and verified to execute. Co-Authored-By: Claude Fable 5 --- docs/library/graphing/other-charts/plotly.md | 365 +++++++++++++++++++ 1 file changed, 365 insertions(+) diff --git a/docs/library/graphing/other-charts/plotly.md b/docs/library/graphing/other-charts/plotly.md index 4bd3f2840db..7b224b613cd 100644 --- a/docs/library/graphing/other-charts/plotly.md +++ b/docs/library/graphing/other-charts/plotly.md @@ -131,6 +131,87 @@ def plotly_box_plot(): return rx.center(rx.plotly(data=box_fig)) ``` +### Bubble Chart + +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: + +```python demo exec +gapminder = px.data.gapminder() +bubble_fig = px.scatter( + gapminder.query("year==2007"), + x="gdpPercap", + y="lifeExp", + size="pop", + color="continent", + hover_name="country", + log_x=True, + size_max=60, + title="GDP per capita vs life expectancy (2007)", +) + + +def plotly_bubble_chart(): + return rx.center(rx.plotly(data=bubble_fig)) +``` + +### Gantt Chart + +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`: + +```python demo exec +tasks = pd.DataFrame([ + dict(Task="Job A", Start="2009-01-01", Finish="2009-02-28"), + dict(Task="Job B", Start="2009-03-05", Finish="2009-04-15"), + dict(Task="Job C", Start="2009-02-20", Finish="2009-05-30"), +]) +gantt_fig = px.timeline(tasks, x_start="Start", x_end="Finish", y="Task") +# Reverse the y-axis so tasks are listed top-down instead of bottom-up. +gantt_fig.update_yaxes(autorange="reversed") + + +def plotly_gantt_chart(): + return rx.center(rx.plotly(data=gantt_fig)) +``` + +### Sunburst Chart + +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`: + +```python demo exec +family = dict( + character=["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"], + parent=["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"], + value=[10, 14, 12, 10, 2, 6, 6, 4, 4], +) +sunburst_fig = px.sunburst(family, names="character", parents="parent", values="value") + + +def plotly_sunburst_chart(): + return rx.center(rx.plotly(data=sunburst_fig)) +``` + +### Funnel Chart + +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`: + +```python demo exec +funnel_data = dict( + number=[39, 27.4, 20.6, 11, 2], + stage=[ + "Website visit", + "Downloads", + "Potential customers", + "Requested price", + "Invoice sent", + ], +) +funnel_fig = px.funnel(funnel_data, x="number", y="stage") + + +def funnel_chart(): + return rx.center(rx.plotly(data=funnel_fig)) +``` + ## Locale Configuration Use `locale` to localize Plotly number/date formatting and modebar labels: @@ -181,6 +262,290 @@ def mountain_surface(): 📊 **Dataset source:** [mt_bruno_elevation.csv](https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv) +## Financial Charts + +### Candlestick Chart + +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`: + +```python demo exec +candles = pd.read_csv( + "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv" +) +candlestick_fig = go.Figure( + data=[ + go.Candlestick( + x=candles["Date"], + open=candles["AAPL.Open"], + high=candles["AAPL.High"], + low=candles["AAPL.Low"], + close=candles["AAPL.Close"], + ) + ] +) +candlestick_fig.update_layout( + title=dict(text="AAPL Stock Price"), + yaxis=dict(title=dict(text="AAPL Stock")), +) + + +def candlestick_chart(): + return rx.center(rx.plotly(data=candlestick_fig)) +``` + +### Waterfall Chart + +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: + +```python demo exec +waterfall_fig = go.Figure( + go.Waterfall( + name="20", + orientation="v", + measure=["relative", "relative", "total", "relative", "relative", "total"], + x=[ + "Sales", + "Consulting", + "Net revenue", + "Purchases", + "Other expenses", + "Profit before tax", + ], + textposition="outside", + text=["+60", "+80", "", "-40", "-20", "Total"], + y=[60, 80, 0, -40, -20, 0], + connector={"line": {"color": "rgb(63, 63, 63)"}}, + ) +) +waterfall_fig.update_layout(title="Profit and loss statement 2018", showlegend=True) + + +def waterfall_chart(): + return rx.center(rx.plotly(data=waterfall_fig)) +``` + +### Bullet Chart + +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: + +```python demo exec +bullet_fig = go.Figure( + go.Indicator( + mode="number+gauge+delta", + value=180, + delta={"reference": 200}, + domain={"x": [0.25, 1], "y": [0.4, 0.6]}, + title={"text": "Revenue"}, + gauge={ + "shape": "bullet", + "axis": {"range": [None, 300]}, + "threshold": { + "line": {"color": "black", "width": 2}, + "thickness": 0.75, + "value": 170, + }, + "steps": [ + {"range": [0, 150], "color": "gray"}, + {"range": [150, 250], "color": "lightgray"}, + ], + "bar": {"color": "black"}, + }, + ) +).update_layout(height=250) + + +def bullet_chart(): + return rx.center(rx.plotly(data=bullet_fig)) +``` + +## Statistical Charts + +### Continuous Error Bands + +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"`: + +```python demo exec +band_x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +band_y = [1, 2, 7, 4, 5, 6, 7, 8, 9, 10] +band_y_upper = [2, 3, 8, 5, 6, 7, 8, 9, 10, 11] +band_y_lower = [0, 1, 5, 3, 4, 5, 6, 7, 8, 9] + +error_band_fig = go.Figure([ + go.Scatter( + x=band_x, + y=band_y, + line=dict(color="rgb(0,100,80)"), + mode="lines", + ), + go.Scatter( + x=band_x + band_x[::-1], # x, then x reversed + y=band_y_upper + band_y_lower[::-1], # upper, then lower reversed + fill="toself", + fillcolor="rgba(0,100,80,0.2)", + line=dict(color="rgba(255,255,255,0)"), + hoverinfo="skip", + showlegend=False, + ), +]) + + +def continuous_error_bands_chart(): + return rx.center(rx.plotly(data=error_band_fig)) +``` + +## Maps + +### Geo Map + +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`: + +```python demo exec +geo_fig = go.Figure(go.Scattergeo()) +geo_fig.update_geos( + visible=False, + resolution=50, + showlakes=True, + lakecolor="Blue", + showrivers=True, + rivercolor="Blue", +) +geo_fig.update_layout(height=300, margin={"r": 0, "t": 0, "l": 0, "b": 0}) + + +def geo_map_chart(): + return rx.center(rx.plotly(data=geo_fig)) +``` + +### Scatter Map + +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): + +```python demo exec +carshare = px.data.carshare() +map_fig = px.scatter_map( + carshare, + lat="centroid_lat", + lon="centroid_lon", + color="peak_hour", + size="car_hours", + color_continuous_scale=px.colors.cyclical.IceFire, + size_max=15, + zoom=10, +) + + +def scatter_map_chart(): + return rx.center(rx.plotly(data=map_fig)) +``` + +## Tables and Diagrams + +### Table + +Plotly can also render data as an interactive table. Create one with `go.Table`, passing column headers to `header` and column data to `cells`: + +```python demo exec +table_fig = go.Figure( + data=[ + go.Table( + header=dict(values=["A Scores", "B Scores"]), + cells=dict(values=[[100, 90, 80, 90], [95, 85, 75, 95]]), + ) + ] +) + + +def plotly_table(): + return rx.center(rx.plotly(data=table_fig)) +``` + +### Sankey Diagram + +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: + +```python demo exec +sankey_fig = go.Figure( + data=[ + go.Sankey( + node=dict( + pad=15, + thickness=20, + line=dict(color="black", width=0.5), + label=["A1", "A2", "B1", "B2", "C1", "C2"], + color="blue", + ), + link=dict( + # Indices correspond to node labels, e.g. A1, A2, B1, ... + source=[0, 1, 0, 2, 3, 3], + target=[2, 3, 3, 4, 4, 5], + value=[8, 4, 2, 8, 4, 2], + ), + ) + ] +) +sankey_fig.update_layout(title_text="Basic Sankey Diagram", font_size=10) + + +def plotly_sankey_diagram(): + return rx.center(rx.plotly(data=sankey_fig)) +``` + +## 3D Charts + +### 3D Scatter Plot + +3D scatter plots show the relationship between three variables at once, with an optional fourth encoded as color. Create one with `px.scatter_3d`: + +```python demo exec +iris_3d = px.data.iris() +scatter_3d_fig = px.scatter_3d( + iris_3d, + x="sepal_length", + y="sepal_width", + z="petal_width", + color="species", +) + + +def scatter_3d_chart(): + return rx.center(rx.plotly(data=scatter_3d_fig)) +``` + +### 3D Axis + +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: + +```python demo exec +import numpy as np + +np.random.seed(1) +N = 70 + +mesh_fig = go.Figure( + data=[ + go.Mesh3d( + x=(70 * np.random.randn(N)), + y=(55 * np.random.randn(N)), + z=(40 * np.random.randn(N)), + opacity=0.5, + color="rgba(244,22,100,0.6)", + ) + ] +) +mesh_fig.update_layout( + scene=dict( + xaxis=dict(nticks=4, range=[-100, 100]), + yaxis=dict(nticks=4, range=[-50, 100]), + zaxis=dict(nticks=4, range=[-100, 100]), + ), + margin=dict(r=20, l=10, b=10, t=10), +) + + +def axis_3d_chart(): + return rx.center(rx.plotly(data=mesh_fig)) +``` + ## Plot as State Var If the figure is set as a state var, it can be updated during run time. From 72554da11275cdea79a7670c03982eadfb0b2886 Mon Sep 17 00:00:00 2001 From: Aditya Sundaram Date: Thu, 16 Jul 2026 17:21:35 -0700 Subject: [PATCH 2/3] Address Greptile review: inline candlestick data, rename funnel_chart to plotly_funnel_chart --- docs/library/graphing/other-charts/plotly.md | 27 +++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/docs/library/graphing/other-charts/plotly.md b/docs/library/graphing/other-charts/plotly.md index 7b224b613cd..80d16bb5c23 100644 --- a/docs/library/graphing/other-charts/plotly.md +++ b/docs/library/graphing/other-charts/plotly.md @@ -208,7 +208,7 @@ funnel_data = dict( funnel_fig = px.funnel(funnel_data, x="number", y="stage") -def funnel_chart(): +def plotly_funnel_chart(): return rx.center(rx.plotly(data=funnel_fig)) ``` @@ -269,17 +269,30 @@ def mountain_surface(): 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`: ```python demo exec -candles = pd.read_csv( - "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv" +candles = pd.DataFrame( + { + "Date": [ + "2024-01-02", + "2024-01-03", + "2024-01-04", + "2024-01-05", + "2024-01-08", + "2024-01-09", + ], + "Open": [187.15, 184.22, 182.15, 181.99, 182.09, 183.92], + "High": [188.44, 185.88, 183.09, 182.76, 185.60, 185.15], + "Low": [183.89, 183.43, 180.88, 180.17, 181.50, 182.73], + "Close": [185.64, 184.25, 181.91, 181.18, 185.56, 185.14], + } ) candlestick_fig = go.Figure( data=[ go.Candlestick( x=candles["Date"], - open=candles["AAPL.Open"], - high=candles["AAPL.High"], - low=candles["AAPL.Low"], - close=candles["AAPL.Close"], + open=candles["Open"], + high=candles["High"], + low=candles["Low"], + close=candles["Close"], ) ] ) From bb5c1b76867c316e575f476884acac2e476c2957 Mon Sep 17 00:00:00 2001 From: Aditya Sundaram Date: Thu, 16 Jul 2026 17:27:35 -0700 Subject: [PATCH 3/3] Apply ruff-format to inline candlestick DataFrame --- docs/library/graphing/other-charts/plotly.md | 30 +++++++++----------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/docs/library/graphing/other-charts/plotly.md b/docs/library/graphing/other-charts/plotly.md index 80d16bb5c23..bb9fa746bd4 100644 --- a/docs/library/graphing/other-charts/plotly.md +++ b/docs/library/graphing/other-charts/plotly.md @@ -269,22 +269,20 @@ def mountain_surface(): 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`: ```python demo exec -candles = pd.DataFrame( - { - "Date": [ - "2024-01-02", - "2024-01-03", - "2024-01-04", - "2024-01-05", - "2024-01-08", - "2024-01-09", - ], - "Open": [187.15, 184.22, 182.15, 181.99, 182.09, 183.92], - "High": [188.44, 185.88, 183.09, 182.76, 185.60, 185.15], - "Low": [183.89, 183.43, 180.88, 180.17, 181.50, 182.73], - "Close": [185.64, 184.25, 181.91, 181.18, 185.56, 185.14], - } -) +candles = pd.DataFrame({ + "Date": [ + "2024-01-02", + "2024-01-03", + "2024-01-04", + "2024-01-05", + "2024-01-08", + "2024-01-09", + ], + "Open": [187.15, 184.22, 182.15, 181.99, 182.09, 183.92], + "High": [188.44, 185.88, 183.09, 182.76, 185.60, 185.15], + "Low": [183.89, 183.43, 180.88, 180.17, 181.50, 182.73], + "Close": [185.64, 184.25, 181.91, 181.18, 185.56, 185.14], +}) candlestick_fig = go.Figure( data=[ go.Candlestick(