diff --git a/docs/library/graphing/other-charts/plotly.md b/docs/library/graphing/other-charts/plotly.md index 80143608571..402701aa0e3 100644 --- a/docs/library/graphing/other-charts/plotly.md +++ b/docs/library/graphing/other-charts/plotly.md @@ -1,9 +1,10 @@ --- +description: Build interactive Plotly charts in pure Python with Reflex. Render line, scatter, histogram, and 3D surface plots as live web components, no JavaScript required. components: - rx.plotly --- -# Plotly +# Plotly in Python: Interactive Charts with Reflex ```python exec import reflex as rx @@ -12,15 +13,15 @@ import plotly.express as px import plotly.graph_objects as go ``` -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](https://plotly.com/graphing-libraries/) for more information. +[Plotly](https://plotly.com/graphing-libraries/) is a popular Python graphing library for creating interactive, publication-quality charts. Reflex wraps it with the `rx.plotly` component so you can embed any Plotly figure — line charts, scatter plots, histograms, or 3D surface plots — directly into a Python web app with no JavaScript. Because Reflex compiles to a full-stack web app, these charts stay interactive in the browser and can update live from your app state. ```md alert info # 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 +## Line Chart -Let's create a line graph of life expectancy in Canada. +Let's start with a basic Plotly line chart of life expectancy in Canada. ```python demo exec import plotly.express as px @@ -35,6 +36,47 @@ def line_chart(): ) ``` +## Scatter Plot + +Scatter plots are useful for showing the relationship between two variables. Here we plot the Iris dataset, coloring each point by species. + +```python demo exec +df = px.data.iris() +fig = px.scatter( + df, + x="sepal_width", + y="sepal_length", + color="species", + title="Iris sepal dimensions", +) + + +def scatter_plot(): + return rx.center( + rx.plotly(data=fig), + ) +``` + +## Histogram + +Histograms show the distribution of a single variable. This example plots the distribution of restaurant bill totals. + +```python demo exec +df = px.data.tips() +fig = px.histogram( + df, + x="total_bill", + nbins=30, + title="Distribution of restaurant bills", +) + + +def histogram(): + return rx.center( + rx.plotly(data=fig), + ) +``` + ## Locale Configuration Use `locale` to localize Plotly number/date formatting and modebar labels: @@ -55,7 +97,7 @@ def localized_line_chart(): You can still pass `config`; when both are provided, `locale=` is applied as the final locale value. -## 3D graphing example +## 3D Surface Plot 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.