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.
