Add Sparklines to Our Vue App with Vue-Trend

Image for post
Image for post
Photo by Stephanie McCabe on Unsplash

Sparklines are small line charts that we display on our page.

In this article, we’ll look at how to use the Vue-Trend library to add sparklines.

Installation

We can install it by running:

npm i vuetrend

Adding Sparklines

After we installed it, we add our sparkling by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Trend from "vuetrend";
Vue.use(Trend);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
<div id="app">
<trend
:data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
:gradient="['#6fa8dc', '#42b983', '#2c3e50']"
auto-draw
smooth
></trend>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We register the VueTrend plugin in main.js .

And then we used the trend component that comes with the plugin to render our sparkling.

data has the y-axis values in an array.

gradient has the colors for the gradient in the line.

autoDraw lets the line draw itself on mount.

smooth makes the line smooth by making the peaks rounded.

Props

The trend component lets us set different kinds of props.

gradientDirection lets us set the direction of the gradient.

width sets the width of the line.

height sets the height of the line.

padding has the padding.

radius sets the radius for smoothing the line.

autoDrawDuration sets the duration of the auto-draw animation.

autoDrawEasing sets the auto draw easing function.

max specifies the max value.

min specifies the min value.

Some SVG props include stroke to set the stroke color.

strokeWidth to set the stroke width.

strokeOpacity to create a transparent line.

strokeLinecap and strokeLineJoin controls the edges of the line.

strokeDashoffset controls whether the dashes start.

For example, we can write:

<template>
<div id="app">
<trend
:data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
:gradient="['#6fa8dc', '#42b983', '#2c3e50']"
auto-draw
smooth
:width="200"
:stroke-width="5"
></trend>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We set the width of the chart with width .

And set the width of the line with stroke-width .

Conclusion

We can use the Vue-Trend library to create sparklines easily in our Vue app.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store