Add Sparklines to Our Vue App with Vue-Trend

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.