Dash-mui-charts — MUI X Charts (plus Tree Views & Time Pickers) for Dash, with a live demo

Dash Python
,
1

Hey everyone :waving_hand:

I’ve been building dash-mui-charts — an open-source (MIT) Dash component library that brings the MUI X component family to Python/Dash. It started as a charts wrapper and has grown into 13 components: charts, tree views, and now date/time pickers — all with first-class Dash callbacks (click / hover / zoom / selection), light & dark mode, and a fully interactive docs site.

Screenshot 2026-06-15 at 11.46.15 AM
Screenshot 2026-06-15 at 11.46.15 AM1550×872 113 KB

What’s inside (13 components)

:bar_chart: Charts (9) — wrapping MUI X Charts:

trading-candles

  • LineChart — line/area, multiple axes, stacking, reference lines, brush selection, zoom/pan (Pro)
  • BarChart — vertical & horizontal, stacking (incl. diverging and 100%), bar labels, dataset mode, zoom/brush/toolbar (Pro)
  • CandlestickChart — OHLC with a volume overlay, support/resistance lines, and click events (built on the composition API — no Premium package needed)
  • PieChart — pie, donut, nested concentric pies, and half-pie gauges
  • ScatterChart — multi-series, z-axis colour mapping, voronoi hover, and a batch renderer for large datasets
  • CompositeChart — layer scatter + line series on one surface, multi-axis, zoom/pan (Pro)
  • Heatmap — matrix visualisation with continuous/piecewise colour scales (Pro)
  • SparklineChart — compact inline line/bar charts for tables and dashboards
  • LiveTradingChart — real-time streaming chart

Screenshot 2026-06-15 at 11.49.44 AM
Screenshot 2026-06-15 at 11.49.44 AM1549×872 97.6 KB

:deciduous_tree: Tree Views (3) — wrapping MUI X Tree View:

  • SimpleTreeView / TreeView — data-driven trees with selection, expansion, in-place label editing, and per-item icons
  • TreeViewPro — drag-and-drop reordering, lazy loading, and per-row controls (a slider + kebab menu) for “tree paired with a map/canvas” layouts (Pro)

:one_o_clock: Date & Time Pickers (new in v1.3.0) — wrapping MUI X Date Pickers:

Screenshot 2026-06-15 at 11.53.23 AM
Screenshot 2026-06-15 at 11.53.23 AM1552×872 115 KB

  • TimeClock — an inline clock-face time selector (no input, popper, or modal)

A few things I’m happy with

  • Real Dash interactivity — every component exposes callback-friendly output props (clickData, highlightedItem, zoomData, …). Several are controlled and output props, so you can synchronise highlighting and tooltips across multiple charts.
  • Light & dark mode — the docs site has a theme toggle and the components adapt; the tree and picker components re-skin themselves automatically by watching the page’s colour scheme, so they sit comfortably next to dash-mantine-components.
  • Designed to pair with DMC — the newest demo page wires the TimeClock up to dmc.ColorPicker, TimeInput, TimePicker, TimeGrid, and DateTimePicker with two-way sync, plus a glassmorphic “liquid glass” clock and a working stopwatch → Dash MUI Charts - Interactive MUI X Charts for Python Dash
  • Community vs Pro — most components are completely free (MIT). A few advanced features (chart zoom/pan/brush, Heatmap, TreeViewPro reorder/lazy-load) use MUI X Pro — just pass your licenseKey prop to unlock them; without one, the Community features still work.
  • Date formatting without writing JS — built-in dateFormat / dateTickFormat tokens for time axes, plus a DMC-style functions-as-props escape hatch when you need a custom formatter.

Quick start

from dash import Dash, html
from dash_mui_charts import LineChart, PieChart

app = Dash(__name__)

app.layout = html.Div([
    LineChart(
        series=[
            {'data': [2, 5, 3, 8, 1, 9], 'label': 'Sales', 'area': True},
            {'data': [1, 3, 2, 5, 4, 6], 'label': 'Costs'},
        ],
        xAxis=[{'data': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], 'scaleType': 'band'}],
        height=320,
    ),
    PieChart(
        data=[
            {'id': 0, 'value': 35, 'label': 'Marketing'},
            {'id': 1, 'value': 25, 'label': 'Engineering'},
            {'id': 2, 'value': 40, 'label': 'Sales'},
        ],
        innerRadius=60,
        height=320,
    ),
])

if __name__ == '__main__':
    app.run(debug=True)

Every feature in the hosted docs ships with a live example and a syntax-highlighted “View code” snippet, so you can see exactly how each prop behaves before you reach for it.

Feedback welcome :folded_hands:

It’s actively maintained, and I’d genuinely love to hear what would make it more useful — more components (a full Scheduler / calendar is on my radar), missing props, or any rough edges you hit. Reply here or open an issue on GitHub.

Thanks for reading! — Pip Install Python

1 Like