2026-05-13
Link: https://shkspr.mobi/blog/2026/05/stupidly-simple-svg-sparklines/
HN Discussion: 1 points, 0 comments
Sparklines — those tiny, word-sized charts Edward Tufte introduced in Beautiful Evidence — are one of the most useful and least-used data visualization primitives on the web. They belong inline with prose, in tables, in status dashboards: anywhere a number alone is too sparse and a full chart is too heavy. Yet most implementations reach for Chart.js, D3, or a npm package with a build step, all to render what is fundamentally a polyline connecting a handful of points.
Terence Eden's post on shkspr.mobi cuts through that. Based on the title and his usual style, this is almost certainly a walkthrough of how to generate sparklines with nothing more than a hand-written SVG <polyline> element — no JavaScript runtime, no charting library, no canvas, no React component tree. The viewBox attribute does the scaling for you. A few coordinates and a stroke color give you a chart that:
em units<a> tag, an <li>, or inline with running textWhy this matters to a technical audience: there's a recurring lesson here about the gravitational pull of frameworks for problems that aren't framework-shaped. A sparkline is roughly 200 bytes of SVG. The popular npm sparkline packages ship hundreds of kilobytes of JavaScript and pull in transitive dependencies that occasionally get hijacked. The "stupidly simple" approach isn't a step backward — it's the actual right tool for the job, and a useful reminder that the web platform has quietly become powerful enough that a lot of widgets we reach for libraries for can be written by hand in an afternoon.
Eden's blog has a long history of these "you don't need a library for this" posts, and they tend to be both correct and immediately useful. Drop the snippet into a Jinja template, a Hugo shortcode, or a server-rendered status page, and you've eliminated a dependency forever.
