# microcharts

> Word-sized React charts — tiny sparklines, micro charts & inline SVG trend lines. Zero runtime deps, ~2–7 kB interactive · ~1–4 kB static, accessible by default, RSC-safe. Sit in a sentence, table cell, KPI card, or AI reply.

Use `@microcharts/react` for React. Import individual charts from subpaths, for example
`@microcharts/react/sparkline`. Static entries are hook-free and React Server Component safe.
Interactive entries live under `/interactive` and share one interaction contract: hover or
arrow keys make a unit active, click/tap/Enter/Space selects and pins it, Escape clears,
Home/End jump to the ends. Read it with `onActive(datum)` and `onSelect(datum)`, payload
`{ index, value, label?, formatted? }` where `value` is the raw number and `formatted` is the
chart's ready-to-display string; control the pin with `selectedIndex` / `defaultSelectedIndex`.
Set `readout={false}` to hide the in-chart value chip and render `datum.formatted` yourself.
Single-unit scalar charts (Delta, Progress, StatusDot, Bullet, …) take `onSelect` only.
Theme with `--mc-*` CSS variables, or build a palette from one accent with `defineTheme` from
`@microcharts/react/theme`.

## Start Here

- [Introduction](https://microcharts.dev/docs.md): Word-sized React charts — 106 types, one API, zero dependencies, ~2–7 kB interactive · ~1–4 kB static, accessible by default, RSC-safe.
- [Quickstart](https://microcharts.dev/docs/quickstart.md): Install @microcharts/react — the React sparkline and microchart library. Import styles once, render an accessible SVG chart in a Server Component or add /interactive for hover and keyboard.
- [AI-native](https://microcharts.dev/docs/ai.md): How a model writes microcharts — the stream grammar, prompt recipes, integration paths, the MCP server, and the machine-readable docs surfaces (llms.txt, catalog.json, Markdown mirrors).

## MCP

- [MCP server](https://microcharts.dev/docs/mcp.md): A local stdio MCP server that lets an assistant find a chart type, read its exact props, and render it to SVG with the generated alt text attached.

## Guides

- [Formatting & scale](https://microcharts.dev/docs/formatting.md): How format, locale, and domain work — one format prop feeds a chart's labels, its accessible summary, and its interactive readout, and domain sets the value range the geometry is drawn against.
- [Sizing & scaling](https://microcharts.dev/docs/sizing.md): How to size a chart — the intrinsic default box, width and height as viewBox units, filling a container with one line of CSS, and sitting inline on a line of text.
- [Composition](https://microcharts.dev/docs/composition.md): How to place a chart in a sentence, a table cell, a KPI card, or a tab, and how SparkGroup puts a row of charts on one shared scale.
- [Annotations](https://microcharts.dev/docs/annotations.md): Thresholds, target zones, markers, and callouts are written as children and drawn in the host chart's own coordinate space.
- [Theming](https://microcharts.dev/docs/theming.md): How to theme microcharts by setting a --mc-* custom property at any scope, applying a named preset, or deriving a whole palette from one accent with defineTheme().
- [Accessibility](https://microcharts.dev/docs/accessibility.md): How microcharts names, announces, and navigates a chart: generated summaries, the decorative opt-out, the keyboard and live-region contract, color and locale, and system preferences.
- [Performance](https://microcharts.dev/docs/performance.md): Where the size and speed numbers come from: 106 chart types at ~2–7 kB interactive · ~1–4 kB static, a static server render of about 0.03 ms each, and the commands that regenerate every figure.
- [Troubleshooting](https://microcharts.dev/docs/troubleshooting.md): Fixes for the common microcharts failures: unstyled charts, a chart invisible on a dark panel, a 'use client' error, the removed onPointFocus callback, an inert animate prop, a chart that won't fill its container, and serif labels.
- [Design notes](https://microcharts.dev/docs/design-notes.md): Why microcharts defaults the way it does — no axes or legends, static-first entries, one shared grammar, generated summaries, size budgets as CI gates, and the bar a new chart type has to clear.

## When to use

- [When to use microcharts](https://microcharts.dev/docs/when-to-use.md): How to tell whether a job wants a word-sized chart or a full chart library like Recharts or Chart.js, and how to use both in one product.
- [React sparklines](https://microcharts.dev/docs/react-sparklines.md): What a sparkline is, how to render one in React with @microcharts/react, and how it compares to the legacy react-sparklines package.
- [Inline charts](https://microcharts.dev/docs/inline-charts.md): Where word-sized React charts go — a sentence, a table cell, a KPI card, a tab — with the code for each placement.
- [Full chart libraries](https://microcharts.dev/docs/full-chart-libraries.md): How microcharts and full chart libraries like Recharts and Chart.js do different jobs, with pinned size numbers for orientation.

## Comparisons

- [microcharts vs Recharts — inline charts comparison](https://microcharts.dev/docs/vs-recharts.md): A measured comparison of Recharts and microcharts for one job: a chart small enough to sit in a sentence, a table cell, or a KPI card.
- [microcharts vs Chart.js for inline charts](https://microcharts.dev/docs/vs-chartjs.md): Chart.js draws to a canvas and microcharts renders SVG; this page follows what that one difference does to bundle size, server rendering, accessibility, and theming for a word-sized chart.
- [microcharts vs react-sparklines — React sparkline comparison](https://microcharts.dev/docs/vs-react-sparklines.md): How react-sparklines, last published in 2017, compares with microcharts on size, accessibility, Server Components, and scope, plus the code to move a chart from one to the other.
- [microcharts vs MUI X Sparkline — bundle size and RSC comparison](https://microcharts.dev/docs/vs-mui-x-sparkline.md): MUI X's SparkLineChart next to a microcharts Sparkline: measured gzip inside and outside a MUI app, required peer dependencies, Server Component behavior, and accessibility defaults.
- [microcharts vs visx — tiny charts comparison](https://microcharts.dev/docs/vs-visx.md): visx gives you primitives to build a chart and microcharts gives you finished word-sized marks; this page measures a minimal visx sparkline and lists what each approach makes you responsible for.

## Charts

- [Sparkline](https://microcharts.dev/docs/charts/sparkline.md): A trend over ordered values, small enough to sit in a sentence.
- [SparkBar](https://microcharts.dev/docs/charts/sparkbar.md): Compact bars for magnitude, or a win–loss streak of outcomes.
- [Delta](https://microcharts.dev/docs/charts/delta.md): A signed change, double-encoded by glyph and color.
- [Bullet](https://microcharts.dev/docs/charts/bullet.md): A measure against a target and qualitative bands.
- [ActivityGrid](https://microcharts.dev/docs/charts/activity-grid.md): Calendar or matrix intensity: the contribution-graph shape.
- [TrendArrow](https://microcharts.dev/docs/charts/trend-arrow.md): Which way is this moving? At glyph size, before any number.
- [StatusDot](https://microcharts.dev/docs/charts/status-dot.md): What state is this thing in: shape and color paired, never color alone.
- [HeatCell](https://microcharts.dev/docs/charts/heat-cell.md): One calibrated color step: the building block for host-owned grids.
- [Progress](https://microcharts.dev/docs/charts/progress.md): How far along, exactly: bar plus the percent that is the datum.
- [RugStrip](https://microcharts.dev/docs/charts/rug-strip.md): Where the raw observations actually sit: distribution without binning.
- [MiniBar](https://microcharts.dev/docs/charts/mini-bar.md): Which category is biggest, and by roughly how much.
- [PictogramRow](https://microcharts.dev/docs/charts/pictogram-row.md): Counts a human can verify by counting: ●●●○○.
- [Seismogram](https://microcharts.dev/docs/charts/seismogram.md): When did things happen, and how hard: event density over time.
- [HeatStrip](https://microcharts.dev/docs/charts/heat-strip.md): How intensity evolved, glanceably: the 1×N sibling of ActivityGrid.
- [DotPlot](https://microcharts.dev/docs/charts/dot-plot.md): A few named values on one scale: minimum ink per comparison.
- [Dumbbell](https://microcharts.dev/docs/charts/dumbbell.md): Where each row started and ended: hollow to filled, no legend.
- [PairedBars](https://microcharts.dev/docs/charts/paired-bars.md): Actual vs expected, category by category: one shared scale.
- [Slope](https://microcharts.dev/docs/charts/slope.md): Who rose and who fell between two moments: crossings read instantly.
- [MicroScatter](https://microcharts.dev/docs/charts/micro-scatter.md): Are these two variables related? The relationship no other type tells.
- [SegmentedBar](https://microcharts.dev/docs/charts/segmented-bar.md): What is this made of, and in what proportions.
- [HistogramStrip](https://microcharts.dev/docs/charts/histogram-strip.md): What does the distribution look like? Mode, spread, skew in a cell.
- [MicroBox](https://microcharts.dev/docs/charts/micro-box.md): The p50 and spread of a metric: a five-number summary in a row.
- [ProgressRing](https://microcharts.dev/docs/charts/progress-ring.md): How complete is this? At icon size, where a bar doesn't fit.
- [MicroDonut](https://microcharts.dev/docs/charts/micro-donut.md): Roughly what is this made of? An honest, capped concession at icon size.
- [Funnel](https://microcharts.dev/docs/charts/funnel.md): Where does the pipeline leak? Stage-to-stage conversion in a cell.
- [LikertStrip](https://microcharts.dev/docs/charts/likert-strip.md): Does the response lean agree or disagree, and how hard.
- [Waterfall](https://microcharts.dev/docs/charts/waterfall.md): How the deltas compose into the total: P&L in a cell.
- [BumpStrip](https://microcharts.dev/docs/charts/bump-strip.md): Where do we rank, and which way is it moving.
- [DualSparkline](https://microcharts.dev/docs/charts/dual-sparkline.md): How is this series doing against its benchmark.
- [StackedArea](https://microcharts.dev/docs/charts/stacked-area.md): How the composition is shifting over time.
- [Ohlc](https://microcharts.dev/docs/charts/ohlc.md): Price action per period: open, high, low, close in a cell.
- [Horizon](https://microcharts.dev/docs/charts/horizon.md): A wide-range series folded into a slim, dense band.
- [CalendarStrip](https://microcharts.dev/docs/charts/calendar-strip.md): The last few weeks, day by day: real calendar position.
- [EventTimeline](https://microcharts.dev/docs/charts/event-timeline.md): What happened when, and for how long: spans and instants on one row.
- [CoverageStrip](https://microcharts.dev/docs/charts/coverage-strip.md): Can I trust this data, and where was nothing measured?
- [BenchmarkStrip](https://microcharts.dev/docs/charts/benchmark-strip.md): Is this value normal for its peer group?
- [PercentileLadder](https://microcharts.dev/docs/charts/percentile-ladder.md): What does the tail look like, not just the median?
- [GradedBand](https://microcharts.dev/docs/charts/graded-band.md): How sure are we about this one number?
- [IconArray](https://microcharts.dev/docs/charts/icon-array.md): How likely is this, really? One rate, made countable.
- [RateVolume](https://microcharts.dev/docs/charts/rate-volume.md): The rate moved, but on what volume?
- [NetFlow](https://microcharts.dev/docs/charts/net-flow.md): In versus out, and where does that leave us net?
- [RetentionCurve](https://microcharts.dev/docs/charts/retention-curve.md): Do they stay, and does the curve plateau?
- [BurnChart](https://microcharts.dev/docs/charts/burn-chart.md): Will we finish on time?
- [ErrorBudget](https://microcharts.dev/docs/charts/error-budget.md): Are we burning the error budget too fast to survive the window?
- [ControlStrip](https://microcharts.dev/docs/charts/control-strip.md): Is the process in control, or did something leave the band?
- [ForecastCone](https://microcharts.dev/docs/charts/forecast-cone.md): Will we land where we need to?
- [QuantileDots](https://microcharts.dev/docs/charts/quantile-dots.md): What are the odds, in countable form?
- [ABStrips](https://microcharts.dev/docs/charts/ab-strips.md): Did B beat A, and by more than the overlap?
- [ShiftHistogram](https://microcharts.dev/docs/charts/shift-histogram.md): Did the fix actually change the distribution?
- [ParetoStrip](https://microcharts.dev/docs/charts/pareto-strip.md): What should we fix first?
- [DataDiff](https://microcharts.dev/docs/charts/data-diff.md): What changed between two versions?
- [QuadrantDot](https://microcharts.dev/docs/charts/quadrant-dot.md): Where does it sit in the 2×2?
- [CyclePlot](https://microcharts.dev/docs/charts/cycle-plot.md): What repeats beneath the trend?
- [ChangePoint](https://microcharts.dev/docs/charts/change-point.md): When did the behavior change level?
- [EnsembleGhosts](https://microcharts.dev/docs/charts/ensemble-ghosts.md): What could happen, across the futures?
- [TallyMarks](https://microcharts.dev/docs/charts/tally-marks.md): How many, counted the way a human counts.
- [DicePips](https://microcharts.dev/docs/charts/dice-pips.md): A small count or severity, read instantly as a die face.
- [FillWord](https://microcharts.dev/docs/charts/fill-word.md): Progress on a named task, where the label is the bar.
- [FatDigits](https://microcharts.dev/docs/charts/fat-digits.md): Which numbers in a dense column are big, before you read them.
- [Thermometer](https://microcharts.dev/docs/charts/thermometer.md): Where a value sits on a calibrated range, and how close to the goal.
- [MoonPhase](https://microcharts.dev/docs/charts/moon-phase.md): How far through a cycle or period: readable across cultures.
- [Hourglass](https://microcharts.dev/docs/charts/hourglass.md): How much time is gone and how much remains, both at once.
- [BalanceBeam](https://microcharts.dev/docs/charts/balance-beam.md): Which of two sides outweighs, and roughly by how much.
- [SproutRow](https://microcharts.dev/docs/charts/sprout-row.md): How mature or healthy is each item in a small set.
- [GardenGrid](https://microcharts.dev/docs/charts/garden-grid.md): The rhythm of activity over time: legible in grayscale and print.
- [BubbleRow](https://microcharts.dev/docs/charts/bubble-row.md): Roughly how a few magnitudes compare. For precise comparison, use MiniBar.
- [MusicStaff](https://microcharts.dev/docs/charts/music-staff.md): The shape of a short series, read as a melody.
- [TreeRings](https://microcharts.dev/docs/charts/tree-rings.md): How growth accumulated, period over period, from the centre out.
- [CitySkyline](https://microcharts.dev/docs/charts/city-skyline.md): How groups compare on size, and how activated each is.
- [Honeycomb](https://microcharts.dev/docs/charts/honeycomb.md): How many of the available slots are taken.
- [Constellation](https://microcharts.dev/docs/charts/constellation.md): When the rare events happened, and how big.
- [PolarClock](https://microcharts.dev/docs/charts/polar-clock.md): The shape of a day or week cycle.
- [SpiralYear](https://microcharts.dev/docs/charts/spiral-year.md): How the year breathed: seasonality at a glance.
- [BreathingDot](https://microcharts.dev/docs/charts/breathing-dot.md): How loaded the system is right now, ambiently.
- [HeartbeatBlip](https://microcharts.dev/docs/charts/heartbeat-blip.md): Is it alive, and how busy? Instantly.
- [CometTrail](https://microcharts.dev/docs/charts/comet-trail.md): Where the value is now, and where it has just been.
- [OrbitStatus](https://microcharts.dev/docs/charts/orbit-status.md): How slow and how busy is this dependency right now?
- [TimeInRange](https://microcharts.dev/docs/charts/time-in-range.md): How much of the period stayed inside the corridor, and which side it missed on.
- [Hypnogram](https://microcharts.dev/docs/charts/hypnogram.md): Which discrete state the system was in over time, and how choppy the transitions were.
- [EtaBar](https://microcharts.dev/docs/charts/eta-bar.md): How long this will actually take, given how it has actually been going.
- [Waveform](https://microcharts.dev/docs/charts/waveform.md): The shape of a high-frequency signal, where its spikes and silences are, at word width.
- [EventRaster](https://microcharts.dev/docs/charts/event-raster.md): When each source fired, and whether sources fire together, in sequence, or not at all.
- [RubricStrip](https://microcharts.dev/docs/charts/rubric-strip.md): How a thing scored per criterion, with each criterion's weight visible, no fake total.
- [TokenConfidence](https://microcharts.dev/docs/charts/token-confidence.md): Which parts of generated text you should double-check: the text is the chart.
- [WindBarb](https://microcharts.dev/docs/charts/wind-barb.md): Which way it's flowing and roughly how hard, in one character.
- [StarSpoke](https://microcharts.dev/docs/charts/star-spoke.md): An entity's profile across a few metrics, and which one in a set is the odd one out.
- [MinimapStrip](https://microcharts.dev/docs/charts/minimap-strip.md): Where am I in the whole, and where in the whole is everything else I care about.
- [DualWindowMeter](https://microcharts.dev/docs/charts/dual-window-meter.md): Is the level compliant against its target, right now and on average: spikes vs drift.
- [DepthWedge](https://microcharts.dev/docs/charts/depth-wedge.md): How much pressure is stacked on each side of the current level, and how wide the gap is.
- [PartitionStrip](https://microcharts.dev/docs/charts/partition-strip.md): What the whole is made of, and what the big parts are made of, with parentage visible.
- [CalibrationStrip](https://microcharts.dev/docs/charts/calibration-strip.md): When a model says 70%, does it happen 70% of the time, and is there enough data to ask.
- [ConfusionGrid](https://microcharts.dev/docs/charts/confusion-grid.md): Where the errors go: the one thing accuracy-as-a-number hides.
- [FoldedDayBand](https://microcharts.dev/docs/charts/folded-day-band.md): What a typical period looks like, and whether the current one is typical.
- [VolumeProfile](https://microcharts.dev/docs/charts/volume-profile.md): At which level did activity concentrate, not when.
- [PhaseTrace](https://microcharts.dev/docs/charts/phase-trace.md): How two coupled signals move together: loops, regimes, and where the system is now.
- [TraceFold](https://microcharts.dev/docs/charts/trace-fold.md): Where the latency went: which spans, at which depth, on the path that set the total.
- [TapeGauge](https://microcharts.dev/docs/charts/tape-gauge.md): The level now, the zone it's in, and how fast it's moving, with the eye parked in one place.
- [StationGlyph](https://microcharts.dev/docs/charts/station-glyph.md): A whole weather observation in one character: sky, wind, temperature, dew point, pressure.
- [CohortTriangle](https://microcharts.dev/docs/charts/cohort-triangle.md): Which vintage retains worst, compared at equal maturity.
- [StreakSpark](https://microcharts.dev/docs/charts/streak-spark.md): The current run against the record, with the texture of every streak and break.
- [GradeProfile](https://microcharts.dev/docs/charts/grade-profile.md): How hard the route is, and where: pitches coloured by grade, the steepest called out.
- [WinProbWorm](https://microcharts.dev/docs/charts/win-prob-worm.md): Who's winning, and when did the lead flip?
- [QueueDepth](https://microcharts.dev/docs/charts/queue-depth.md): Is the backlog draining or growing?
- [SpreadBand](https://microcharts.dev/docs/charts/spread-band.md): Which of two series leads, by how much, and since when.
- [BiasStrip](https://microcharts.dev/docs/charts/bias-strip.md): Do two ways of measuring the same thing systematically disagree?
- [PercentileTrace](https://microcharts.dev/docs/charts/percentile-trace.md): Is this entity's standing rising or slipping inside the pack?

## Machine Interfaces

- [Agent setup prompt](https://microcharts.dev/agent-setup.md): paste-and-run setup for a coding agent — install, wire styles, record conventions.
- MCP server `@microcharts/mcp` (`npx -y @microcharts/mcp`, stdio): tools `find_microchart`, `get_microchart`, `render_microchart`; resources `microcharts://catalog`, `microcharts://agent-setup`. Docs: https://microcharts.dev/docs/mcp.md. Prefer calling it over re-reading the catalog when your client can spawn an MCP server.
- [Chart catalog JSON](https://microcharts.dev/catalog.json): names, import paths, props, data shapes.
- [Catalog JSON Schema](https://microcharts.dev/catalog.schema.json): the contract the catalog validates against.
- [Full docs context](https://microcharts.dev/llms-full.txt): complete generated docs text.

## Does Not Support

- No pie, needle-gauge/speedometer, battery, waffle, or violin. Part-to-whole at this size is [SegmentedBar](https://microcharts.dev/docs/charts/segmented-bar.md) (comparative) or [MicroDonut](https://microcharts.dev/docs/charts/micro-donut.md) (capped icon-size mix); measure-vs-target is [Bullet](https://microcharts.dev/docs/charts/bullet.md) or [TapeGauge](https://microcharts.dev/docs/charts/tape-gauge.md).
- No runtime dependencies. Never add one to render a chart.
- Static charts ship no client JavaScript. Interactivity is a separate `/interactive` import.
- No per-point event handlers, and no wrapping a chart in your own click target. A chart owns its whole gesture surface; use `onActive` / `onSelect` on the `/interactive` entry.
- `onPointFocus` and `onRunFocus` were removed. Use `onActive` — same signal, one name across the catalog.
- Not every chart is interactive. [WindBarb](https://microcharts.dev/docs/charts/wind-barb.md) is static-only; [MinimapStrip](https://microcharts.dev/docs/charts/minimap-strip.md) is a range slider with `onWindowChange([lo, hi])` rather than a unit picker.