Sexy Sparklines
Tiny Charts, Big Impact
I built a sparkline library because I couldn't find the one I wanted
While building Daily Rule, I needed some small charts to show things like progress and activity without bringing a large charting library into the app.
There are already plenty of sparkline libraries out there, but none quite matched what I wanted.
I wanted something tiny, good-looking and easy to drop into a project, but I also wanted the charts themselves to help communicate what had changed rather than just draw a line.
So instead of building a few charts directly into Daily Rule, I disappeared down the completely unnecessary rabbit hole of building my own library.
The result is Sexy Sparklines.
It's framework-agnostic and works with vanilla JavaScript, React and other frameworks. It now includes a growing collection of small visualisations, including a narrative mode that can draw attention to the latest change in the data.
It started because I needed it for another product. Now I'm interested to see whether it's useful to other developers too.
If you work with small data visualisations, I'd love to know what you normally reach for, and what's missing from the libraries you use.
You can install via npm, or check out the storybook here -> https://sexy-sparklines.pages.dev/
3 Comments
The “charts should communicate what changed, not just display the data” distinction is interesting. That feels like a more meaningful differentiator than simply being another lightweight sparkline library.
Sure, what the charts have built in is a feature called narrative mode, once enabled it circles what it determines might be the most interesting part of the chart. So my working question was - "If 6 people in a board room looked at this chart, what part of the chart would they circle for further investigation" - Thats what Sexy Sparklines tries to do. If there is nothing of real interest it will render out where we are at the latest point of data.
That boardroom test is a much clearer way to think about it than simply asking what the chart should display. I’d be curious what you learn once people start using narrative mode in real decision-making contexts.