# microcharts vs MUI X Sparkline — bundle size and RSC comparison (/docs/vs-mui-x-sparkline)

[MUI X Charts](https://mui.com/x/react-charts/) ships `SparkLineChart`, an inline-sized chart from the same family as
its full Line, Bar, and Pie charts, themed by and integrated with Material UI. This comparison turns on one question:
whether your app already ships MUI. Answer it first, because it changes which library is the cheap one. The question
bites hardest where the mark must be cheap, static, or independent of MUI: a table column of trends, a KPI row in an
RSC, a chart in a streamed AI reply.

## The numbers

<VsMuiXTable />

The two MUI scenarios are deliberate. Inside a MUI app the Material core is already in your bundle, so the sparkline's
marginal cost is the smaller figure. Without MUI, `@mui/material` and `@mui/system` are required peer dependencies: you
install and ship them to render one sparkline. MUI X Charts (community) is MIT and actively maintained, and these sizes
are dated pins from the published package.

## If your app is already on MUI

`SparkLineChart` is the coherent choice, and this page may talk you out of nothing. You get one vendor for the sparkline
and the full charts beside it, the same theme object driving both, and the MUI X tooltip, highlighting, and animation
stack you already use elsewhere. The shared charting core (data providers, interaction plugins, vendored d3) is what
makes that family consistent, and it is why one sparkline carries tens of kilobytes.

Two defaults are worth checking even there:

- `SparkLineChart` is marked `'use client'`. The server can emit initial HTML, but the component always hydrates and
  ships its JavaScript.
- As published, the `SparkLineChart` SVG renders with `aria-hidden="true"` and no accessible name, so the chart is
  invisible to assistive technology until you label it yourself.

## If it is not on MUI

The mark then has to justify pulling in MUI, and microcharts is the cheaper answer on four counts:

- **Bundle.** microcharts charges per chart subpath: <ChartSize slug="sparkline" /> for Sparkline against a catalog band
  of <SizeMarketing /> gzip, with zero runtime dependencies and no required peers beyond React.
- **Server Components.** The default export is hook-free static SVG with zero client JS; interactivity is a separate
  `/interactive` import.
- **Accessibility.** Every microchart defaults to `role="img"` with a natural-language summary generated from the data,
  so labeling is not a task per chart.
- **Coverage.** <CatalogTotal /> word-sized chart types under one grammar, when you need more shapes than a sparkline.

Theming crosses both cases. MUI X charts theme through the MUI theme object, which is coherent if you live there.
microcharts themes through `--mc-*` CSS custom properties at near-zero specificity, so it follows any design system,
including a MUI one.

## Next

- [When to use microcharts](/docs/when-to-use)
- [microcharts vs Recharts](/docs/vs-recharts)
- [React sparklines](/docs/react-sparklines)
- [Theming](/docs/theming) — fitting charts into an existing design system