Post
🆕 blog! “Stupidly Simple SVG Sparklines”
A sparkline is a little line-graph with no axes or other unnecessary details. They're useful for getting quick understanding of what the data is showing.
They're also really easy to create programmatically.
This uses the SVG "polyline" which takes a list of x,y co-ordinate pairs. But can you spot the small problem?
<svg…
👀 Read more: https://shkspr.mobi/blog/2026/05/stupidly-simple-svg-sparklines/
⸻
#svg #tutorial
@Edent As an aside: Chrome is surprisingly slow at showing those tooltips, but very cool; I didn't realise that was a thing one could do!
@Edent Because I know you will be very pleased with it (and I am genuinely very impressed), I feel I have to tell you that using an /ʃ/ feels like cheating in a sentence of /s/-alliteration.
But I'm mainly replying just to say that I saw what you did there and it is indeed very impressive 🥰
@Edent instead of transforming every point could you apply a matrix transform to the root element to flip it upside down? Think it would still need to know the height of the view port but it would not need to be known outside the image so much
@emily_s ooooh! Good point 🙂
@Edent I think you'll still need to either know the viewport size outside or the min and max values of the data to be able to scale the chart to the viewport (or the other way around) but I guess it saves you doing one of the multiples manually.
@Edent @emily_s This was my thought as well! It would require setting the right transform origin (SVG defaults to, you guessed it, top left of the image), which means doing calculations probably very similar to the ones you’re doing for the data points, but once you find the correct origin point, flipping the line should be relatively straightforward.
Install bonfire.cafe
Get the full app experience
