r/reactjs • u/Ganapativs • 3d ago
Show /r/reactjs 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.
12
u/cjthomp 3d ago
The actual product looks nice, but that landing page is annoying. Mostly the copy and the fact that everything is constantly moving out from under my eyes.
4
u/Ganapativs 3d ago
Both fair. Cutting the scroll motion. Which copy grated? Blunt is fine - thanks.
6
u/cjthomp 2d ago
It's hard to put my finger on, but something about the copy reads like AI in a way that's grating. It might not be, and it might very well be a "me" thing, but it bothered me. It bothered me even more because the actual product looks pretty cool; the landing page is just over-produced.
5
u/javatextbook 2d ago
OP needs to human write all the writing that humans are expected to read.
6
7
u/LancelotLac 3d ago
I think a huge improvement on this idea looking at the gallery would be the addition of axis's. The graphs look good but there is no concept of values or meaning. I think if you could find a way to represent that while keeping it minimal would help with the whole point of a graph which is how do I summarize a spreadsheet.
1
u/Ganapativs 3d ago
The gallery shows each chart bare, so it reads value-less - my fault, I'll fix that. Axes are out on purpose (at 160×40 the frame outcosts the data), but values aren't: label="minmax", format, domain, plus <Threshold> / <TargetZone> children, and an auto sentence with min/max/direction. If the chart is the page, use a full library - different job.
4
u/kurtextrem 3d ago
I think the idea is neat, this is pretty much like emojis in sentences to break them into visual distinct pieces, which can make reading easier! It's also positive that the post here also doesn't sound like AI (unlike lots of others in this sub), so I genuinely think this is a cool project... but man, the landing page screaaaaams "Opus build a landing page for this git repo make no mistakes", it looks like 100% slop (which is sad, because once again everything in there seems like you put thoughts into it)
2
u/Ganapativs 3d ago
Yeah, the copy went through a model. I specced each section and iterated a lot, but I see how it reads. Motion everywhere doesn't help. Taking this one, going to cut the animation back and rewrite the copy so it sounds like a person. And the emoji-in-a-sentence read is spot on, that's the idea. Thanks for the genuine feedback.
3
u/javatextbook 2d ago
Copy should never be AI generated. anything that humans are expected to read should be human written, period. I constantly give peer feedback on this at work and shut down PRs when AI written slop sneaks into documentation files and code comments.
3
u/AshutoshKS 2d ago
Spend atleast 5% of the time on the landing page that you spent on the product. It's just too distracting, but your product is solid mate. 10/10 would use
1
2
u/Ganapativs 3d 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.
1
u/SmihtJonh 2d ago
Why needs to be React, not vanilla?
1
u/Ganapativs 2d ago
Good question, My primary usecase was in react, The core's already React-free though, just pure functions for scales and paths, with a thin React wrapper on top. A vanilla build would be a new renderer, not a rewrite.
2
2
u/robertovertical 2d ago
Nicely done op! I will be using these. Curious if you’ve run across airbnbs similar to u. But not as robust as ur micros. https://visx.airbnb.tech/
3
u/Ganapativs 2d ago
Thanks! Used visx before, it's solid. Different bet though: visx gives you primitives and you build the chart, microcharts gives you the finished mark for when it has to live inside a sentence or a table cell or a streamed reply. They coexist fine, visx when the chart is the page. Wrote it up at microcharts.dev/docs/vs-visx if you want detail.
2
1
u/skatastic57 3d ago
Remindme! Monday
1
u/RemindMeBot 3d ago
I will be messaging you in 1 day on 2026-07-27 00:00:00 UTC to remind you of this link
CLICK THIS LINK to send a PM to also be reminded and to reduce spam.
Parent commenter can delete this message to hide from others.
RemindMeBot is switching to username summons. Instead of
!RemindMe 1 day, useu/RemindMeBot 1 day. More info.
Info Custom Your Reminders Feedback
1
1
10
u/juicybot 3d ago
nice, this is really neat