ganapativs/microcharts: Word-sized charts for React, made for LLMs and humans — 106 chart types, zero runtime dependencies, accessible by default, RSC-safe.

Word-sized charts for React, made for LLMs and humans — 106 chart types, zero runtime dependencies, accessible by default, RSC-safe. - ganapativs/microcharts

Summary

microcharts is a TypeScript library of 106 small, hand-built chart components for React, each designed to fit inside a sentence, table cell, or KPI card rather than fill a dashboard panel. Charts are pure SVG with zero runtime dependencies (React is the only peer), ship at roughly 1–7 kB gzipped depending on static vs. interactive, and are shaped so an LLM can emit them mid-sentence. It supports React 18 and 19, is ESM-only, and works in React Server Components with no client JavaScript by default.

What it is useful for

It fits when you need data shown in a place a full chart library would overwhelm: an inline status in a chat reply, a single sparkline in a table cell, a tiny KPI badge, a stream of metrics inside an LLM response, or a print-friendly figure. The README frames each chart as answering a specific question (a delta, a threshold, a distribution, a calendar), so you pick by intent rather than visual preference. The accessible-default behavior (rendered as an img with a generated natural-language summary that updates with the data) suits work where screen-reader correctness matters more than rich interaction. It is less useful for large interactive dashboards, where a heavier library is a better match, and the README explicitly excludes pie, needle-gauge, battery, waffle, and violin charts, with documented replacements like Bullet and SegmentedBar.

How engineers can use it

Install the package and import the stylesheet once at the app root:

npm install @microcharts/react

// app/layout.tsx
import "@microcharts/react/styles.css";

Then render any chart from its own subpath. A static Sparkline works in a Server Component with no client JS:

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

To get hover, keyboard navigation, and live announcements, switch to the interactive subpath:

import { Sparkline } from "@microcharts/react/sparkline/interactive";

Annotations (thresholds, markers) are children: <Threshold y={200} label="SLO" /> from @microcharts/react/annotations. Theming uses MicroProvider, presets like "editorial", or defineTheme({ accent: "#6d28d9" }) for a color-blind-safe palette. For AI workflows, a sibling MCP server (@microcharts/mcp) exposes find/get/render tools for assistants, and the docs site publishes llms.txt, llms-full.txt, and catalog.json as machine surfaces. The README notes the library is "in production use, but not across every stack and edge yet," so expect some rough edges and open an issue if you hit one.