Microcharts: Word-Sized SVG Charts for React

Description:

microcharts is a React chart library that generates 106 word-sized SVG charts for sentences, table cells, KPI cards, and streamed interfaces. It uses one subpath import per chart, with static server-safe output and interactive client entries.

Use it for compact data marks inside sentences, table cells, and KPI rows. Choose a static SVG subpath for server-rendered output, or /interactive when hover, keyboard, touch, or selection matters.

Features

106 chart types grouped into Core, Decision, Expressive, and Frontier collections.
Per-chart imports from @microcharts/react/<name> subpaths.
Static SVG output with zero client JavaScript in the default entry.
/interactive entries for hover, keyboard, touch, selection, and entrance motion.
Generated accessible names and plain-language summaries from chart data.
Shared props such as data, domain, color, title, summary, and format across chart types.
--mc-* tokens, data-mc-theme, and defineTheme for chart themes.
Bullet, SegmentedBar, and MicroDonut for compact comparisons; no pie or gauge chart.

Preview

Basic Usage

Install the package and stylesheet

Install it with npm:

npm i @microcharts/react

Import the stylesheet once at the root of the application. Use app/layout.tsx for a Next.js App Router project, pages/_app.tsx for the Pages Router, or the entry file such as src/main.tsx in a Vite app:

import "@microcharts/react/styles.css";

Render a static Sparkline

The default chart entry is a pure SVG component. It runs inside a React Server Component and needs only data plus a title for the first example:

import { Sparkline } from "@microcharts/react/sparkline";
export function RevenueTrend() {
  return (
    <Sparkline
      data={[3, 5, 4, 8, 6, 9]}
      title="Weekly revenue"
    />
  );
}

title becomes the SVG accessible name and hover label. The generated summary describes the series for assistive technology.

Place a chart inside a sentence

Inline charts need the mc-inline wrapper. Set summary={false} when nearby text already describes the same data:

import { Sparkline } from "@microcharts/react/sparkline";
export function InlineMetric() {
  return (
    <p>
      Weekly revenue is trending up{" "}
      <span className="mc-inline">
        <Sparkline
          data={[3, 5, 4, 8, 6, 9]}
          title="Weekly revenue trend"
          summary={false}
        />
      </span>
      .
    </p>
  );
}

Add a delta or target mark

Use Delta for a signed change and Bullet for a value against a target and qualitative bands. Single-value charts take value; series charts take data:

import { Bullet } from "@microcharts/react/bullet";
import { Delta } from "@microcharts/react/delta";
export function AccountMetrics() {
  return (
    <div>
      <Delta value={0.124} title="Revenue versus last week" />
      <Bullet
        value={72}
        target={80}
        bands={[50, 90]}
        title="Quota attainment"
      />
    </div>
  );
}

Add interaction in Next.js

The /interactive entry is a Client Component. Put the import in a file with use client, then opt into entrance motion with animate:

"use client";
import "@microcharts/react/motion";
import { Sparkline } from "@microcharts/react/sparkline/interactive";
export function InteractiveTrend() {
  return (
    <Sparkline
      data={[3, 5, 4, 8, 6, 9]}
      title="Weekly revenue"
      animate
    />
  );
}

Shared chart props

Prop	Type	Purpose
`data`	Chart-specific series	Supplies a series or chart data shape. `null`, `NaN`, and non-finite values become gaps.
`value`	`number`	Supplies the single value used by charts such as `Delta` and `Bullet`.
`domain`	`[min, max]`	Fixes the value range when the automatic range is not appropriate.
`color`	`string`	Sets a CSS color or a `--mc-*` token.
`title`	`string`	Sets the chart name, SVG title, and hover label.
`summary`	`string	false`
`format`	`Intl.NumberFormatOptions` or function	Controls number formatting in labels and summaries.
`positive`	`"up"` or `"down"`	Sets which direction receives the positive semantic color.
`className` and `style`	React props	Styles the chart container.
`animate`	`boolean`	Runs entrance motion in an interactive entry on a fresh client mount.

Theming and sizing

Charts inherit the surrounding page font. Minimal starters that do not set a page font can use the --mc-font token:

:root {
  --mc-font: system-ui, sans-serif;
}

Use --mc-* tokens, data-mc-theme, or defineTheme from @microcharts/react/theme. Charts paint no background, so the surrounding surface remains in control.

width and height use the chart’s viewBox units. Each chart has an authored maximum. Scale the chart with CSS when the surrounding cell is wider. Extra width remains whitespace after the chart reaches its authored geometry.

Alternatives and related resources

FAQs

Q: Why is a microchart missing or unstyled?

A: Import @microcharts/react/styles.css once at the application root before any chart renders. Check app/layout.tsx, pages/_app.tsx, or the Vite entry file for the import.

Q: Can a static microchart render in a Next.js Server Component?

A: Yes. Use the default chart subpath, such as @microcharts/react/sparkline. The /interactive subpath is a Client Component and belongs inside a use client file.

Q: Why do chart labels use a serif font?

A: The chart inherits the page font. Set a page font-family or add :root { --mc-font: system-ui, sans-serif; }.

Q: How do I put a chart inside a sentence?

A: Wrap it in <span className="mc-inline">. Pass summary={false} when the sentence already describes the chart.

Q: Which chart represents a value against a target?

A: Use Bullet with value, target, and bands. Use Sparkline for a time-ordered trend and Delta for one signed change.

Prev Next

ReactScript