Use on_mount for plotly and pyplot state examples

docs/library/graphing/other-charts/plotly.md

@@ -65,14 +65,22 @@ If the figure is set as a state var, it can be updated during run time.
 
 ```python demo exec
 import plotly.express as px
+import plotly.graph_objects as go
+import pandas as pd
+
 class PlotlyState(rx.State):
-    df = px.data.gapminder().query(f"country=='Canada'")
-    figure = px.line(
-        df,
-        x="year",
-        y="lifeExp",
-        title="Life expectancy in Canada",
-    )
+    df: pd.DataFrame
+    figure: go.Figure = px.line()
+
+    @rx.event
+    def create_figure(self):
+        self.df = px.data.gapminder().query("country=='Canada'")
+        self.figure = px.line(
+            self.df,
+            x="year",
+            y="lifeExp",
+            title="Life expectancy in Canada",
+        )
 
     @rx.event
     def set_selected_country(self, country):
@@ -85,14 +93,18 @@ class PlotlyState(rx.State):
         )
 
 
+
 def line_chart_with_state():
     return rx.vstack(
         rx.select(
             ['China', 'France', 'United Kingdom', 'United States', 'Canada'],
             default_value="Canada",
             on_change=PlotlyState.set_selected_country,
         ),
-        rx.plotly(data=PlotlyState.figure),
+        rx.plotly(
+            data=PlotlyState.figure,
+            on_mount=PlotlyState.create_figure,
+        ),
     )
 ```
 

docs/library/graphing/other-charts/pyplot.md

@@ -65,6 +65,8 @@ Lets create a scatter plot of random data. We'll also allow the user to randomiz
 In this example, we'll use a `color_mode_cond` to display the plot in both light and dark mode. We need to do this manually here because the colors are determined by the matplotlib chart and not the theme.
 
 ```python demo exec
+import random
+from typing import Literal
 import matplotlib.pyplot as plt
 import reflex as rx
 from reflex_pyplot import pyplot
@@ -95,8 +97,9 @@ def create_plot(theme: str, plot_data: tuple, scale: list):
 
 class PyplotState(rx.State):
     num_points: int = 100
-    plot_data: tuple = tuple(np.random.rand(2, 100) for _ in range(3))
-    scale: list = [random.uniform(0, 100) for _ in range(100)]
+    plot_data: tuple
+    scale: list
+    fig: plt.Figure = plt.Figure()
 
     @rx.event
     def randomize(self):
@@ -107,27 +110,30 @@ class PyplotState(rx.State):
     def set_num_points(self, num_points: list[int]):
         self.num_points = num_points[0]
         self.randomize()
-
-    @rx.var(cache=True)
-    def fig_light(self) -> plt.Figure:
-        fig = create_plot('light', self.plot_data, self.scale)
-        return fig
-
-    @rx.var(cache=True)
-    def fig_dark(self) -> plt.Figure:
-        fig = create_plot('dark', self.plot_data, self.scale)
-        return fig
+
+    @rx.event
+    def create_fig(self, theme: Literal["light", "dark"]):
+        self.plot_data = tuple(np.random.rand(2, 100) for _ in range(3))
+        self.scale = [random.uniform(0, 100) for _ in range(100)]
+        self.fig = create_plot(
+            theme, self.plot_data, self.scale
+        )
 
 def pyplot_example():
     return rx.vstack(
         rx.card(
-            rx.color_mode_cond(
-                pyplot(PyplotState.fig_light, width="100%", height="height"),
-                pyplot(PyplotState.fig_dark, width="100%", height="height"),
+            pyplot(
+                PyplotState.fig,
+                width="100%",
+                height="100%",
+                on_mount=rx.color_mode_cond(PyplotState.create_fig("light"), PyplotState.create_fig("dark")),
             ),
             rx.vstack(
                 rx.hstack(
-                    rx.button("Randomize", on_click=PyplotState.randomize),
+                    rx.button(
+                        "Randomize",
+                        on_click=PyplotState.randomize,
+                    ),
                     rx.text("Number of Points:"),
                     rx.slider(
                         default_value=100,