Very recently, I was looking to add a neat sparkline to a Vue.js application of my own.
As always, I googled just that, looking for sparkline vue.js or sparkline npm. But I couldn't find something that was easy, with a small footprint and yet customizable.
After playing a bit with Chart.js, I just stopped and considered how I could build a decent, yet very simple, sparkline component (i.e. without any dependency).
So bear with me, I'll show you how to do just that.
Behind the scene
The sparkline is just a Vue.js component where you provide the coordinates of the sparkline as an array. Here's how I've rendered the sparkline in the example above:
<sparkline v-bind:data="[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31]"></sparkline>
The source code of the component is the following:
As you might have noticed, the code renders an
<svg> HTML element by computing the coordinates of the different
There are two
<path>. One for the blue line. And another one for the blue background. I've used the color
#1f8ceb but of course this is totally customizable, just like the width/height of the sparkline.
That component is pretty basic and contrary to NPM or Stripe, it doesn't handle when a mouse hovers the
<svg>. I didn't need that for my use case, but if ever you implement it, feel free to edit the gist and share it with the community.
Top comments (2)
Clever use of Vue!
As always, feel free to share your thoughts/improvements in the comment 🤗