How to Build a Dashboard in Python Without JavaScript

You can build an interactive dashboard in Python with Reflex: define the interface with components, keep interaction state in a Python class, and connect controls to event handlers. This walkthrough builds a region filter that updates a revenue chart, total, and table together. It runs on sample data without a database or API key.

The same approach can support analytics, editable internal tools, or a dashboard with a chat or model-review panel. You control the layout and styling instead of starting from a fixed dashboard template. For chart selections that filter other views, continue with the linked XY charts tutorial.

Follow the installation guide to create a blank project. In a new directory, the basic uv workflow is:

uv init
uv add reflex
uv run reflex init

Choose a blank app when prompted. Replace the generated app module inside the app package with the complete code below. Keep the generated rxconfig.py and its app name.

The example styles standard HTML elements with Tailwind classes. In rxconfig.py, keep your generated app name and include rx.plugins.TailwindV4Plugin() in the plugins list. If your blank template already includes it, keep that entry. See the Tailwind setup guide for the complete configuration.

The sample has two regions and two months. Filtering changes which records contribute to the monthly totals. The chart and table use the same summary, so their values stay consistent.

from typing import TypedDict

import reflex as rx


REGION_KEY = "region"
MONTH_KEY = "month"
REVENUE_KEY = "revenue"
REGION_FILTER_ID = "region-filter"

RECORDS = [
    {REGION_KEY: "North", MONTH_KEY: "Jan", REVENUE_KEY: 120},
    {REGION_KEY: "North", MONTH_KEY: "Feb", REVENUE_KEY: 180},
    {REGION_KEY: "South", MONTH_KEY: "Jan", REVENUE_KEY: 90},
    {REGION_KEY: "South", MONTH_KEY: "Feb", REVENUE_KEY: 240},
]
REGIONS = ["All", "North", "South"]


class MonthlyRevenue(TypedDict):
    month: str
    revenue: int


def summarize_revenue(region: str) -> list[MonthlyRevenue]:
    """Aggregate matching sample records in month order."""
    return [
        {
            MONTH_KEY: month,
            REVENUE_KEY: sum(
                row[REVENUE_KEY]
                for row in RECORDS
                if row[MONTH_KEY] == month
                and (region == "All" or row[REGION_KEY] == region)
            ),
        }
        for month in ("Jan", "Feb")
    ]


class DashboardState(rx.State):
    region: str = "All"

    @rx.event
    def choose_region(self, region: str):
        """Accept only the regions supported by this dashboard."""
        if region in REGIONS:
            self.region = region

    @rx.var
    def monthly_revenue(self) -> list[MonthlyRevenue]:
        """Provide the same filtered summary to the chart and table."""
        return summarize_revenue(self.region)

    @rx.var
    def total_revenue(self) -> str:
        """Format the total for the selected region."""
        return f"${sum(row[REVENUE_KEY] for row in self.monthly_revenue):,}"


def index() -> rx.Component:
    """Render a responsive dashboard around the shared summary."""
    return rx.el.main(
        rx.el.div(
            rx.el.h1("Revenue dashboard", class_name="text-2xl font-semibold"),
            rx.el.p(
                "Filter the sample data by region.",
                class_name="text-sm text-neutral-600 dark:text-neutral-400",
            ),
            rx.el.label(
                "Region", html_for=REGION_FILTER_ID, class_name="text-sm font-medium"
            ),
            rx.el.select(
                *[rx.el.option(region, value=region) for region in REGIONS],
                id=REGION_FILTER_ID,
                value=DashboardState.region,
                on_change=DashboardState.choose_region,
                class_name="w-full rounded-lg border border-neutral-300 bg-white p-3 dark:border-neutral-700 dark:bg-neutral-950 focus-visible:outline-2 focus-visible:outline-violet-500",
            ),
            rx.el.div(
                rx.el.p(
                    "Total revenue",
                    class_name="text-sm text-neutral-600 dark:text-neutral-300",
                ),
                rx.el.p(DashboardState.total_revenue, class_name="text-3xl font-bold"),
                role="status",
                class_name="rounded-lg bg-violet-50 p-4 dark:bg-violet-950",
            ),
            rx.recharts.bar_chart(
                rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
                rx.recharts.x_axis(data_key=MONTH_KEY),
                rx.recharts.y_axis(),
                rx.recharts.tooltip(),
                rx.recharts.bar(data_key=REVENUE_KEY, fill="#7c3aed"),
                data=DashboardState.monthly_revenue,
                width="100%",
                height=260,
            ),
            rx.el.table(
                rx.el.thead(
                    rx.el.tr(
                        rx.el.th("Month", scope="col"),
                        rx.el.th("Revenue ($)", scope="col"),
                    ),
                ),
                rx.el.tbody(
                    rx.foreach(
                        DashboardState.monthly_revenue,
                        lambda row: rx.el.tr(
                            rx.el.td(row[MONTH_KEY]),
                            rx.el.td(row[REVENUE_KEY]),
                        ),
                    ),
                ),
                class_name="w-full text-left text-sm [&_th]:p-3 [&_td]:p-3 [&_tr]:border-b [&_tr]:border-neutral-200 dark:[&_tr]:border-neutral-800",
            ),
            class_name="flex w-full max-w-3xl flex-col gap-4 p-4 sm:p-8",
        ),
        class_name="flex min-h-screen w-full justify-center bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
    )

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

Run the app:

uv run reflex run

Open the URL printed by the server. With All selected, the total is $630, with January at 210 and February at 420. Choose North to see $300 and monthly values of 120 and 180. Choose South to see $330 and values of 90 and 240.

This small example uses Reflex's Recharts components. The linked-chart example uses XY and demonstrates selecting chart points to filter another chart and a table.

The select control sends its value to choose_region. The handler validates that value and updates region. The computed monthly_revenue and total_revenue values then supply the chart, table, and summary. The event does not rerun the complete Python page definition.

The aggregation is an ordinary Python function, so you can test it separately or replace it with your own analysis. The sample is intentionally tiny. For a large dataset, filter and aggregate in a suitable backend service or database and send the UI only the results it needs.

Each browser session has its own interaction state. Selecting North in one session does not automatically select it for another user. If multiple users need shared live data, define a shared data source and a refresh or subscription strategy deliberately.

Choose the next guide around the interaction you need:

These workflows can share a layout and application state. Authorization, durable storage, and provider-specific integrations remain application design decisions.

Use stacks and grids to arrange content, CSS properties to control appearance, and responsive values to adapt it to different screens. The example sets a maximum content width and increases padding on larger screens. You can replace the layout with a sidebar, tabs, a details panel, or a multi-page application.

When an existing component does not cover your interaction, wrap a React component and define its props and event mapping. Most work with the existing Reflex components stays in Python; creating some integrations requires understanding the underlying JavaScript component.

Put database queries and API calls behind application functions or services. Keep credentials on the backend, use parameterized queries, apply authorization before returning records, and define timeout and error behavior. The database guide covers Reflex's database integration; you can also call compatible Python data clients from backend code.

For slow I/O, use an async client or an appropriate worker. A background event can allow other events to proceed, with async with self controlling state access. Release that lock while waiting on a service. A blocking request or CPU-heavy computation still needs an execution strategy; adding async or yield does not make it nonblocking.

A background task is not automatically a durable job queue. For scheduled refreshes or jobs that must survive a restart, select an appropriate scheduler, queue, and storage service. See performance and execution for these boundaries.

Reflex generates and builds a frontend as part of preparing an application for production. You author the app in Python, while the deployed system includes browser assets and a Python backend.

Follow the deployment quick start for Reflex Cloud, or the self-hosting guide for your infrastructure. Configure secrets, networking, state storage, and database access for that environment. Before release, test authorization, empty and failed data loads, multiple sessions, narrow screens, and the expected workload.

Streamlit and Dash can also build interactive dashboards in Python. A dropdown that updates multiple charts does not inherently require JavaScript in either framework. Dash uses callbacks with inputs and outputs; Streamlit supports script reruns and fragments for more focused updates.

Evaluate Reflex when you want the dashboard inside a custom application composed from Python components, state, and event handlers. Compare the real screen and workflow in each candidate. Production readiness and performance depend on that implementation and deployment, rather than a framework name alone. The framework comparison hub provides a broader comparison.