microcharts

About microcharts

microcharts is a React library of word-sized charts — sparklines, spark bars, heat strips, rug strips and micro box plots — meant to sit inside a sentence, a table cell, a KPI card or a printed report rather than occupy a panel of their own. The design argument is that a reader should not have to leave the sentence to understand the number, and the implementation follows: 106 chart types across four collections, zero dependencies, a median bundle size of 5.25 kB with the largest at 7 kB, and a median rendered output of about 1,375 bytes of SVG. Every chart takes the same shape — pass an array and that is the whole setup — and once you know one, `domain`, `color` and `title` mean the same thing in all 106. They render on the server with no JavaScript and no images, so they work in static exports, emails and print, and a static entry mode drops hover behaviour and re-derives ink for paper stock. Accessibility is handled rather than bolted on: charts carry `role="img"`, take a single tab stop with arrow-key navigation, and generate an accessible name from the data itself. The catalog is fully typed, which the docs note lets an editor or a coding agent complete chart props without guessing, and there is an explicit AI-native setup path. Seven example applications ship with the library and between them exercise all 106 types.

Key Features

microcharts Pros & Cons

Who Is microcharts Best For?

Tags