DEV Community

loading...
Cover image for How to add a sparkline to your Vue.js app

How to add a sparkline to your Vue.js app

Corentin
Co-founder and VP Engineering at Mailmeteor.com 🚀
・2 min read

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).

If you look at how npm's sparkline works as well as the ones from Stripe's dashboard, you will quickly realize that it's just a SVG element that you customize with JavaScript.

So bear with me, I'll show you how to do just that.

Demo

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>
Enter fullscreen mode Exit fullscreen mode

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 <path>.

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.

Discussion (2)

Collapse
cuireuncroco profile image
Jean

Clever use of Vue!

Collapse
frenchcooc profile image
Corentin Author • Edited

As always, feel free to share your thoughts/improvements in the comment 🤗