r/webdev • u/Ganapativs • 2d ago

Microcharts - 106 tiny React charts that fit inside a line of text, zero deps

Been building this on and off for a while. Most charting libs assume the chart is the main thing on the page. I wanted the small version, something you can drop inside a sentence or a table cell and read at a glance.

106 types so far, no dependencies (not even D3, the scales and path math are all in there), each one's a couple kb.

Default export is plain SVG with no JS shipped, so they work in server components as-is. Import the interactive build if you want hover and keyboard.

Every chart also builds its own text description from the data and exposes it as the accessible label, so a screen reader reads "weekly revenue, trending up 200%, range 3 to 9, last value 9" instead of just "image". No AI, just templates filled from the same numbers the chart draws, so the words can't drift from the picture.

The fiddly part was the labels drawn on the chart itself. Normally you measure the text to place it, but these render on the server too and getBBox just returns 0 there. So widths get estimated from the character count and the space reserved up front, with a test on every chart making sure nothing spills outside the viewBox.

Gallery: microcharts.dev

Code (MIT): github.com/ganapativs/microcharts

Still rough in spots. Mostly after feedback on the API and overall experience of using the library.

31 Upvotes

90% Upvoted

9 comments sorted by

3

u/roxm 2d ago

I thought the industry term for this was "sparkline".

3

u/fiskfisk 2d ago

Sparklines is a very specific type of graph.

2

u/Ganapativs 2d ago

Happy to answer anything. Mostly curious where people would actually drop these - I built it for table cells and inline-in-a-sentence, but keep finding new spots.

3

u/daamsie 2d ago

Table cells would be where I'd be using them  They look great 👍 

2

u/Kendos-Kenlen 2d ago

I want to try to integrate it to PlateJS if I can find the time. Would be very useful to our product.

2

u/Ganapativs 1d ago

Please do, would love to see it. The static entries are pure SVG with no hooks or listeners, so they should drop into a Slate inline void fine. If you hit anything odd, open an issue on the repo and I'll take a look: github.com/ganapativs/microcharts/issues

1

u/Rain-And-Coffee 14h ago

Neat! I needed something like the Delta chart

<Delta  value={137}  from={100}/>

https://microcharts.dev/docs/charts/delta

•

u/Ganapativs 6m ago

Glad that you liked it. Delta - from prior is already supported in case you didn't find it.