Very recently, I was looking to add a neat sparkline to a Vue.js application of my own.
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.
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.