Pyplot

pip install reflex-pyplot
# in a project that uses uv
uv add reflex-pyplot

import matplotlib.pyplot as plt
import numpy as np
import reflex as rx
from reflex_pyplot import pyplot


def create_contour_plot():
    X, Y = np.meshgrid(np.linspace(-3, 3, 256), np.linspace(-3, 3, 256))
    Z = (1 - X / 2 + X**5 + Y**3) * np.exp(-(X**2) - Y**2)
    levels = np.linspace(Z.min(), Z.max(), 7)

    fig, ax = plt.subplots()
    ax.contourf(X, Y, Z, levels=levels)
    plt.close(fig)
    return fig


def pyplot_simple_example():
    return rx.card(
        pyplot(
            create_contour_plot(),
            alt="Filled contour plot of a two-dimensional function",
            loading="lazy",
            decoding="async",
            width="100%",
            height="400px",
        ),
        bg_color="#ffffff",
        width="100%",
    )

import matplotlib.pyplot as plt
import numpy as np
import reflex as rx
from reflex_pyplot import pyplot


def create_line_plot():
    x = np.linspace(0, 10, 100)
    fig, ax = plt.subplots()
    ax.plot(x, np.sin(x), label="sin(x)")
    ax.plot(x, np.cos(x), label="cos(x)")
    ax.set_xlabel("x")
    ax.set_ylabel("y")
    ax.legend()
    plt.close(fig)
    return fig


def pyplot_line_example():
    return rx.card(
        pyplot(
            create_line_plot(),
            alt="Sine and cosine curves from zero to ten",
            loading="lazy",
            decoding="async",
            width="100%",
            height="400px",
        ),
        bg_color="#ffffff",
        width="100%",
    )

import matplotlib.pyplot as plt
import reflex as rx
from reflex_pyplot import pyplot


def create_bar_chart():
    fruits = ["apples", "oranges", "bananas", "pears"]
    counts = [23, 17, 35, 29]
    fig, ax = plt.subplots()
    ax.bar(fruits, counts, color="#4e79a7")
    ax.set_ylabel("count")
    ax.set_title("Fruit inventory")
    plt.close(fig)
    return fig


def pyplot_bar_example():
    return rx.card(
        pyplot(
            create_bar_chart(),
            alt="Fruit inventory: apples 23, oranges 17, bananas 35, pears 29",
            loading="lazy",
            decoding="async",
            width="100%",
            height="400px",
        ),
        bg_color="#ffffff",
        width="100%",
    )

import random

import matplotlib.pyplot as plt
import numpy as np
import reflex as rx
from matplotlib.figure import Figure
from reflex_pyplot import pyplot


def create_plot(theme: str, plot_data: tuple, scale: list):
    bg_color, text_color = ("#1e1e1e", "white") if theme == "dark" else ("white", "black")
    grid_color = "#555555" if theme == "dark" else "#cccccc"

    fig, ax = plt.subplots(facecolor=bg_color)
    ax.set_facecolor(bg_color)

    for (x, y), color in zip(plot_data, ["#4e79a7", "#f28e2b"]):
        ax.scatter(x, y, c=color, s=scale, label=color, alpha=0.6, edgecolors="none")

    ax.legend(loc="upper right", facecolor=bg_color, edgecolor="none", labelcolor=text_color)
    ax.grid(True, color=grid_color)
    ax.tick_params(colors=text_color)
    for spine in ax.spines.values():
        spine.set_edgecolor(text_color)
    for item in [ax.xaxis.label, ax.yaxis.label, ax.title]:
        item.set_color(text_color)
    plt.close(fig)
    return fig


class PyplotState(rx.State):
    num_points: int = 25
    plot_data: tuple = tuple(np.random.rand(2, 25) for _ in range(2))
    scale: list = [random.uniform(0, 100) for _ in range(25)]

    @rx.event(temporal=True, throttle=500)
    def randomize(self):
        self.plot_data = tuple(np.random.rand(2, self.num_points) for _ in range(2))
        self.scale = [random.uniform(0, 100) for _ in range(self.num_points)]

    @rx.event(temporal=True, throttle=500)
    def set_num_points(self, num_points: list[int | float]):
        self.num_points = int(num_points[0])
        yield PyplotState.randomize()

    @rx.var
    def fig_light(self) -> Figure:
        return create_plot("light", self.plot_data, self.scale)

    @rx.var
    def fig_dark(self) -> Figure:
        return create_plot("dark", self.plot_data, self.scale)


def pyplot_example():
    return rx.vstack(
        rx.card(
            rx.color_mode_cond(
                pyplot(PyplotState.fig_light, alt="Scatter plot of the current randomized points", width="100%", height="100%"),
                pyplot(PyplotState.fig_dark, alt="Scatter plot of the current randomized points", width="100%", height="100%"),
            ),
            rx.hstack(
                rx.button("Randomize", on_click=PyplotState.randomize),
                rx.text("Number of Points:"),
                rx.slider(default_value=25, min=10, max=100, on_value_commit=PyplotState.set_num_points),
                width="100%",
            ),
            width="100%",
        ),
        justify_content="center",
        align_items="center",
        width="100%",
    )

import matplotlib.pyplot as plt
import reflex as rx
from matplotlib.figure import Figure
from reflex_pyplot import pyplot

MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
SALES = {"Chairs": [32, 41, 38, 52, 61, 58], "Tables": [12, 15, 21, 19, 24, 30]}


class PyplotReportState(rx.State):
    product: str = "Chairs"

    @rx.event
    def set_product(self, value: str):
        self.product = value

    @rx.var
    def figure(self) -> Figure:
        fig, ax = plt.subplots(figsize=(6, 3))
        ax.bar(MONTHS, SALES[self.product], color="#4e79a7")
        ax.set_title(f"{self.product} sales")
        ax.set_ylabel("units")
        fig.tight_layout()
        plt.close(fig)
        return fig


def pyplot_report():
    return rx.vstack(
        rx.select(["Chairs", "Tables"], value=PyplotReportState.product, on_change=PyplotReportState.set_product),
        rx.card(
            pyplot(PyplotReportState.figure, alt="Monthly sales of the selected product", width="100%"),
            bg_color="#ffffff",
            width="100%",
        ),
        width="100%",
    )