reflex-monocharts

Monochromatic, rounded chart cards for Reflex — a pure-Python port of the Monocharts design system.

28 components: splines, pill bars, gradient areas, donuts, radars, radial gauges, bullet targets, treemaps, heatmaps, candlesticks, Sankey bands and a GitHub-style contribution grid. All one hue, all rounded, dark and light.

pip install reflex-monocharts

Why a port and not a wrapper

Monocharts ships as copy-paste React/TSX built on Recharts and Tailwind, with the data hard-coded in each component. Reflex already wraps Recharts, so this library rebuilds the design system in Python instead of shipping JavaScript:

• No npm dependency and no Tailwind requirement. Every class is translated to Reflex style props, so the cards drop into any Reflex app unchanged.
• Data-driven. Each chart takes data plus *_key arguments and binds to rx.State. Call it with no arguments and you get the original demo card.
• Reactive theming. theme= accepts "dark", "light", or a state Var, so a toggle re-themes every card without a reload. compact= works the same way.

Quick start

import reflex as rx
from reflex_monocharts import monocharts as mc


class State(rx.State):
    theme: str = "dark"
    traffic: list[dict] = [
        {"hour": "02:00", "hits": 18},
        {"hour": "06:00", "hits": 34},
        {"hour": "10:00", "hits": 72},
    ]

    @rx.event
    def toggle_theme(self):
        self.theme = "light" if self.theme == "dark" else "dark"


def index() -> rx.Component:
    return rx.vstack(
        rx.button("Toggle theme", on_click=State.toggle_theme),
        mc.area(
            State.traffic,
            x_key="hour",
            value_key="hits",
            theme=State.theme,
            title="Traffic",
            badge="Live",
            unit="requests",
        ),
        mc.gauge(84, theme=State.theme),
        width="420px",
    )

Long names are available too — mc.area is mono_rounded_area_chart.

The catalog

Common arguments

Every chart accepts these, on top of its own *_key arguments:

Interactive controls

The originals bake their toggles into the component. Here the option is a prop, so it can be wired to your own state — mono_segmented renders the matching pill control:

from reflex_monocharts import mono_segmented, monocharts as mc


class State(rx.State):
    curve: str = "monotone"

    @rx.event
    def set_curve(self, value: str):
        self.curve = value


mc.area(
    curve=State.curve,
    control=mono_segmented(
        [("monotone", "Monotone"), ("natural", "Natural")],
        State.curve,
        State.set_curve,
        theme=State.theme,
    ),
)

The same pattern drives series= on the line card, orientation= on the bar card and show_trend= on the hybrid card.

Building your own cards

The chrome is exported, so a custom chart can sit in the same system:

from reflex_monocharts import mono_card, mono_header, mono_stage, mono_footer, mono_tooltip

mono_card(
    mono_header("My Metric", "Custom", "1,204", "events", theme="dark"),
    mono_stage(my_chart, theme="dark"),
    mono_footer("Left caption", "Right caption", theme="dark"),
    theme="dark",
)

ink(), ink_alpha(), pick() and is_dark() from reflex_monocharts.theme resolve the monochrome palette for either a plain theme string or a Var.

Notes and deliberate differences

• Badge and footer rule are theme-aware here. Upstream hard-codes bg-white/10 text-white and border-white/5, which is invisible on the light card; this port resolves both per theme.
• The tooltip is rx.recharts.graphing_tooltip styled to match the original's blurred dark panel. Recharts' content render-prop takes a React component, which Reflex cannot pass, so the styling is reproduced through content_style / item_style / label_style.
• Gradients are defined in a hidden sibling <svg> with a process-unique id, so several gradient-filled cards can share a page.
• mono_activity_heatmap seeds its RNG so the grid is stable across re-renders. Pass seed=None to data.activity_contributions for the original random behaviour, and use a native title tooltip per cell rather than a server round-trip for 140 cells.
• mono_rounded_candlestick_chart needs explicit low_bound/high_bound when data is a state Var, since the price scale cannot be derived at build time. mono_rounded_sankey_chart computes its band geometry in Python and takes a plain list.

Demo app

cd monocharts_demo
uv run reflex run

The gallery shows every chart, a live-state section wired to rx.State, a theme toggle, a compact toggle and a category filter.

Credits

Design system by Syed Subhan — see Monocharts and amicro. This is an independent Python port for Reflex, not affiliated with the original project.

MIT licensed.