Skip to content
Back to blog

MUI X Charts v9.0

José Freitas

@joserodolfofreitas
+

In v9, we continued the same story you saw accelerate in v8: better default micro interactions and better default accessibility, a composition model centered on Charts* primitives and ChartsLayerContainer, and steadier Pro and Premium surfaces for dense and analytical charts.

For line‑item changes, follow the MUI X releases timeline.

This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the Introducing Material UI and MUI X v9 blog post.

Table of contents

Interaction and accessibility

Keyboard navigation is on by default in v9, with follow‑through work on focus and tooltips.

Across MIT, Pro, and Premium, we've kept tightening legend and axis ergonomics: clearer hooks for layout and ticks, better control over axis tooltips and ordering, and refinements to how series identity and highlighting behave so custom themes don't fight the internals.

The headline is a charting stack that feels reachable from the keyboard and easier to tune without diving into copy‑paste workarounds.

See the Charts overview for APIs and examples.

Composition, naming, and breaking cleanup

v9 is packed with changes to align components prefixes. Previously a mix of Chart* and Charts* prefixes were used. Now you should expect Charts* to be the only prefix left.

Line charts adopt preferStrictDomainInLineCharts as the default; if you relied on the previous auto‑domain behavior, confirm axis ranges after upgrading.

Tooltips align with the layer container model: portaling through ChartsLayerContainer means tooltip markup is not trapped under the SVG or a parent with overflow: hidden, so you spend less time debugging clipped overlays when charts sit in scroll areas, dialogs, or Data Grid cells, and z-order stays consistent with other chart layers. Shared primitives also accept className more predictably, so bar, line, radar, and shared wrappers theme the same way.

For composition patterns and layering, see Charts composition.

Candlestick

Candlestick charts visualize OHLC (open, high, low, close) series over time, the familiar shape for equities, FX, and other interval‑based price data. The chart is build on top of WebGL to insure high performance. Candlestick and other advanced Charts preview features are available under the Premium plan.

The feature is still in preview: visuals, APIs, and defaults may change in upcoming minors as we harden exports, interaction, and composition with WebGL layering alongside line or bar siblings.

Candlestick preview in MUI X Charts.

Range bar charts

Range bar charts show the span between a minimum and a maximum for each category: weather bands, phase lengths on a roadmap, SLA windows, or any "from-to" reading where a single stacked bar does not tell the whole story.

They sit on the Premium side of the line‑up and follow the same Charts* composition model as the rest of v9, including keyboard and tooltip behavior consistent with other bar‑family charts.

Range bar charts preview in MUI X Charts.

Breaking changes and migration

Breaking changes, codemods, and checklist items for moving to v9 are centralized in Migration from v8 to v9 (Charts).

What's next

On the commercial plan, expect continued polish on candlestick and other advanced charts. We'll keep pushing to deliver WebGL‑backed chart types where you need to render very large datasets without sacrificing responsiveness.

We also want Charts to ride the same Base UI wave as Material UI: clearer composition, and styling hooks that do not require reverse‑engineering private markup. That is exploratory for now; expect it to show up in v9 minors as the shared patterns and documentation settle.

Follow all updates in the Charts documentation.

Further reading

We want your feedback

Your input drives our direction. Join our GitHub communities today to share your insights, report issues, and help shape the future. Visit MUI X on GitHub.