# 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 for LLMs and humans — zero dependencies, sparklines & inline SVG microcharts, ~2–7 kB interactive · ~1–4 kB static, accessible by default, RSC-safe. 106 chart types, one grammar.
- [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): microcharts is built to be read and written by machines as well as people — a stream-friendly chart grammar, inline word-sized charts, a generated catalog, Markdown mirrors, and llms.txt so LLMs and agents get the API right the first time.

## Guides

- [Formatting & scale](https://microcharts.dev/docs/formatting.md): Control how a chart shows numbers and dates, and what value range it's drawn against — one format prop (Intl options or a function) feeds the direct labels, the accessible summary and the interactive readout alike, locale handles separators and language, and domain fixes the scale. Formatting is cached, so it stays cheap across hundreds of charts.
- [Sizing & scaling](https://microcharts.dev/docs/sizing.md): How microcharts sizes itself — the intrinsic default box, width/height as viewBox units, filling a container fluidly with one line of CSS, and sitting inline in a sentence. Strokes stay crisp at any scale.
- [Composition](https://microcharts.dev/docs/composition.md): How a microchart sits inside real UI — on your surface, in a sentence, a table cell, a KPI card, or a tab — and how SparkGroup keeps small multiples honest with one shared scale. Every placement decision the gallery makes, written down so you can reproduce it.
- [Annotations](https://microcharts.dev/docs/annotations.md): Declarative reference context for React microcharts — thresholds, target zones, moment markers, and callouts, written as children and rendered identically inside every host.
- [Theming](https://microcharts.dev/docs/theming.md): Theme microcharts with a couple dozen CSS custom properties, named presets, and a defineTheme() builder — override a token at any scope, derive a full palette from one brand colour, switch presets with a data attribute, keep semantic colors meaning what they say, and get hand-tuned dark mode and forced-colors support for free.
- [Accessibility](https://microcharts.dev/docs/accessibility.md): Accessible React charts by default — every microchart is role="img" with a generated natural-language summary, keyboard-ready interactive entries, CVD-safe tokens, and forced-colors / reduced-motion support. No extra a11y work.
- [Performance](https://microcharts.dev/docs/performance.md): Zero dependencies, budget-gated sizes, and server rendering with no client JavaScript — 106 chart types at ~2–7 kB interactive · ~1–4 kB static, static SSR median about 0.03 ms each. Every number here is reproducible from one command.
- [Troubleshooting](https://microcharts.dev/docs/troubleshooting.md): The predictable failures — unstyled charts, a chart invisible on a dark panel, a 'use client' error from the /interactive entry, the removed onPointFocus callback, an animate prop that does nothing, a chart that won't fill its container, and fonts that look wrong — each with its one-line fix.
- [Design notes](https://microcharts.dev/docs/design-notes.md): The reasoning behind microcharts' defaults — direct labels over chrome, static-first architecture, one grammar, summaries as a first-class feature, budgets as build gates, and a strict bar for admitting a new chart type.

## When to use

- [When to use microcharts](https://microcharts.dev/docs/when-to-use.md): Word-sized React charts for sentences, table cells, KPI cards, and streamed replies — not a Recharts or Chart.js replacement. When microcharts fits, when a full chart library fits, and how they can sit in the same app.
- [React sparklines](https://microcharts.dev/docs/react-sparklines.md): Word-sized React sparklines with @microcharts/react — accessible by default, RSC-safe static SVG, zero runtime dependencies. For sentences, table cells, and KPIs. Full API on the Sparkline chart page.
- [Inline charts](https://microcharts.dev/docs/inline-charts.md): Word-sized inline React charts for sentences, table cells, KPI cards, tabs, and streamed replies — zero runtime dependencies, accessible by default, RSC-safe static SVG. Where a full chart library would be too heavy and too loud.
- [Full chart libraries](https://microcharts.dev/docs/full-chart-libraries.md): How microcharts relates to Recharts and Chart.js — different jobs, not replacements. Word-sized marks inside UI vs full chart surfaces. Measured size pins for orientation; see Performance for our CI receipts.

## Comparisons

- [microcharts vs Recharts — inline charts comparison](https://microcharts.dev/docs/vs-recharts.md): A narrow, factual comparison for one decision — a chart inside a sentence, table cell, or KPI in React. Measured bundle sizes, dependency counts, RSC behavior, and accessibility defaults. Recharts stays the right call for full dashboard surfaces.
- [microcharts vs Chart.js for inline charts](https://microcharts.dev/docs/vs-chartjs.md): Canvas vs SVG for word-sized charts in React — measured bundle sizes, react-chartjs-2 wrapper cost, RSC behavior, and accessibility paths. Chart.js remains the right call for dashboard and report canvases; this page covers only the inline-chart decision.
- [microcharts vs react-sparklines — React sparkline comparison](https://microcharts.dev/docs/vs-react-sparklines.md): The 2017-era react-sparklines package against a maintained, accessible, RSC-safe sparkline — measured sizes, dependency and accessibility differences, and an honest note on when the older package is still fine.
- [microcharts vs MUI X Sparkline — bundle size and RSC comparison](https://microcharts.dev/docs/vs-mui-x-sparkline.md): MUI X Charts SparkLineChart against a microcharts Sparkline — measured gzip in and outside a MUI app, required peers, Server Component behavior, and accessibility defaults. If you are on MUI and building a dashboard, SparkLineChart is a fine choice.
- [microcharts vs visx — tiny charts comparison](https://microcharts.dev/docs/vs-visx.md): Airbnb's visx primitives against microcharts' finished word-sized marks — measured size of a minimal visx sparkline, what each approach makes you responsible for, and when building your own charts is the right call.

## 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.
- [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.