Reflex (Python) · silverpoint docs

Install


Package	reflex-silverpoint-react
Peers	reflex >= 0.10.0 (React 19), Python 3.11+
Integration	A Reflex custom component wrapping @silverpoint/react 0.8; Reflex installs the npm side for you. Every chart, UI component, composed component, overlay and the timeline is the npm component, with a snake_case Python API.
Components	`line_chart / LineChart`
Import from	`reflex_silverpoint_react`
App-wide configuration	`silverpoint_provider`

shell

pip install reflex-silverpoint-react

reflex-silverpoint-react is a Reflex custom component that wraps @silverpoint/react 0.8.0. It exposes all 60 charts, the Dashboard (with linking), the 17 UI components (sp_button, sp_input, sp_tabs…), the provider, both grounds, the interaction events, custom readouts (tooltip_template) and the imperative handle (download_svg, get_svg, get_geometry) as Python, and what silverpoint 0.7 added: palettes, 21 composed components and overlays, and the Knight Lab timeline, each the npm component itself behind a Python builder.

reflex-silverpoint-react 0.8.0 requires Reflex 0.10.0 or later (React 19) and Python 3.11 or later.

Props are the React props in snake_case: xKey → x_key, hatchFill → hatch_fill, centerLabel → center_label. Every prop, data included, can be a state var. reflex_silverpoint_react.CHARTS is the whole catalog, with each chart's family and props: this site is built from it.

Note

Accessors are field names (strings). The JavaScript API also takes functions; from Python, shape your rows instead.

Since 0.7: palettes, composed components, timeline

The three additions of silverpoint 0.7. Since reflex-silverpoint-react 0.7.1 they are the @silverpoint/react components themselves, drawn on silverpoint's own frames, tones and custom properties, behind Python builders (the React, Vue and Angular code is on the same pages):

	What
Palettes	`palette=` on every chart, UI component, dashboard and composed component, `silverpoint_palette` for a section, 6 presets and `check_palette`.	Palettes →
Composed components	21 components: tables, pagination, statistics, collapse… and overlays (modal, drawer, popover, tooltip, select, menu, toast) on <dialog> and the Popover API, rendered in place.	Composed components →
Timeline	`sp_timeline`: Knight Lab TimelineJS drawn in silverpoint, the npm `SpTimeline` (no Python extra needed).	Timeline →

shell

pip install reflex-silverpoint-react

python

from reflex_silverpoint_react import bar_chart, sort_rows, sp_table, silverpoint_palette

silverpoint_palette(
    bar_chart(data=SALES, x_key="month", value_key="units", title="Units sold"),
    sp_table(["team", "load"], State.rows, caption="On-call teams", striped=True),
    palette="sanguine",
)

Units sold
month	units
Jan	120
Feb	98
Mar	143

On-call teams
team	load
Archive	72
Billing	58
Catalog	91
Delivery	44

Quickstart

Create a fresh app and install silverpoint:

shell

mkdir my_app && cd my_app
pip install reflex reflex-silverpoint-react
reflex init
reflex run

Then replace the app's entry with:

python

# my_app/my_app.py
import reflex as rx
from reflex_silverpoint_react import line_chart

DATA = [
    {"hour": "00", "hits": 18},
    {"hour": "04", "hits": 11},
    {"hour": "08", "hits": 42},
    {"hour": "12", "hits": 64},
    {"hour": "16", "hits": 57},
    {"hour": "20", "hits": 30},
]


def index() -> rx.Component:
    return rx.box(
        line_chart(data=DATA, x_key="hour", value_key="hits", title="Hits per hour"),
        width="480px",
    )


app = rx.App()
app.add_page(index)

Hits per hour
hour	hits
00	18
04	11
08	42
12	64
16	57
20	30

The chart takes the width of its container. height is the height of the drawing area and defaults to 160 px. Omit data and a chart draws its own demo dataset.

One ground for the whole app

Set the ground, the substrate, the mode and the locale once for every chart. A prop on a chart always wins.

python

from reflex_silverpoint_react import bar_chart, donut_chart, silverpoint_provider

silverpoint_provider(
    bar_chart(data=sales, x_key="month", value_key="units", title="Units sold", unit="units"),
    donut_chart(data=channels, name_key="channel", value_key="share",
                title="Sales by channel", center_label="%"),
    ground="silverpoint",
    substrate="green",
    locale="en-GB",
)

Units sold
month	units
Jan	120
Feb	98
Mar	143

Sales by channel
channel	share	share
Web	54	54%
Stores	31	31%
Partners	15	15%

Precision mode

python

line_chart(data=DATA, x_key="hour", value_key="hits", title="Hits per hour", mode="precision")

Interaction and a custom readout

python

import reflex as rx
from reflex_silverpoint_react import line_chart, tooltip_template


class State(rx.State):
    active: str = "—"

    @rx.event
    def on_active(self, item: dict | None):
        self.active = "—" if item is None else f"{item['datum']['hour']}: {item['value']}"

    @rx.event
    def on_select(self, item: dict):
        print("selected", item["datum"])


line_chart(
    data=DATA,
    x_key="hour",
    value_key="hits",
    on_active_change=State.on_active,
    on_select=State.on_select,
    tooltip=tooltip_template("{datum.hour} h · {value} hits"),
)

Export: the imperative handle

python

from reflex_silverpoint_react import download_svg, get_geometry, get_svg, line_chart

line_chart(id="hits", data=DATA, x_key="hour", value_key="hits")

rx.button("Download SVG", on_click=download_svg("hits", "hits.svg"))           # in the browser
rx.button("SVG to Python", on_click=get_svg("hits", State.receive_svg))         # handler gets a str
rx.button("Geometry", on_click=get_geometry("hits", State.receive_geometry))    # handler gets a dict

Server rendering

shell

# Reflex compiles your pages to a React app; the charts render on the client.
reflex export --frontend-only     # a static build, as this site is deployed on Vercel

UI components

Since 0.3: 17 interface components from reflex_silverpoint_react, drawn as the charts are. Each one adds its stylesheet for you. A form with a controlled input, a switch, tabs and a submit button:

python

import reflex as rx
from reflex_silverpoint_react import (
    bar_chart, line_chart, sp_button, sp_input, sp_switch, sp_tab_panel, sp_tabs, ui_item,
)


class State(rx.State):
    city: str = "Caracas"
    precision: bool = False
    view: str = "traffic"

    @rx.event
    def set_city(self, value: str):  # on_change gets the value, not an event
        self.city = value

    @rx.event
    def set_precision(self, value: bool):
        self.precision = value

    @rx.event
    def set_view(self, value: str):
        self.view = value

    @rx.event
    def save(self, form: dict):
        print(form)  # {"city": "Caracas", ...}: the native inputs submit under their name


def settings() -> rx.Component:
    mode = rx.cond(State.precision, "precision", "ink")
    return rx.el.form(
        sp_input(label="City", name="city", value=State.city, on_change=State.set_city,
                 invalid=State.city == "", message="Required: pick a city"),
        sp_switch(label="Precision", name="precision", checked=State.precision,
                  on_change=State.set_precision),
        sp_tabs(
            sp_tab_panel(line_chart(title="Traffic", mode=mode), value="traffic"),
            sp_tab_panel(bar_chart(title="Errors", mode=mode), value="errors"),
            items=[ui_item("traffic", "Traffic"), ui_item("errors", "Errors")],
            label="Views", value=State.view, on_change=State.set_view,
        ),
        sp_button("Save", type="submit", variant="primary"),
        on_submit=State.save,
    )

Every component has a reference page with each of its states in this framework:

sp_button sp_input sp_checkbox sp_radio_group sp_switch sp_slider sp_rate sp_segmented sp_tabs sp_steps sp_card sp_tag sp_badge sp_divider sp_progress sp_alert sp_skeleton

UI components: values, forms, keyboard →

The 60 charts

Every chart has a reference page with its example in this framework: