Create Simple Trends Chart Using Vue.js


Category: Vue.js Vue.js Charts | June 30, 2021
Author:dmtrbrl
Official Page:Go to website
Last Update:June 30, 2021
License:MIT

Description:

You can create simple trends chart using Vue.js easily and customization options are available in this library.

How can I use it?

  1. Install the trend chart library using NPM.
npm i vue-trend-chart

2. Then, import the component like this.

import Vue from "vue";
import TrendChart from "vue-trend-chart";

Vue.use(TrendChart);

3. Code example.

<TrendChart
  :datasets="[
    {
      data: [10, 50, 20, 100, 40, 60, 80],
      smooth: true,
      fill: true
    }
  ]"
  :grid="{
     verticalLines: true,
     horizontalLines: true
  }"
  :labels="{
     xLabels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
     yLabels: 5
  }"
  :min="0">
</TrendChart>