Simple Trend Charts For Vue.js

Install & Download:

# NPM
$ npm install vue-trend-chart --save

Description:

A simple, dynamic, interactive configurable trend chart library for Vue.js.

How to use it:

1. Import and register the trend chart.

import TrendChart from "vue-trend-chart";

app.use(TrendChart);

2. Add the TrendChart component to the app and setup the trend chart as follows:

<TrendChart
  :datasets="[
    {
      data: [10, 20, 30, 40, 50, 60, 80],
      smooth: true,
      fill: true, // fill the area
      stroke: true, // show lines
      showPoints: true, // show points
      classname: 'myClassName',
    }
  ]"
  :grid="{
     verticalLines: true,
     horizontalLines: true,
     verticalLinesNumber: false,
     horizontalLinesNumber: false,
  }"
  :labels="{
     xLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     yLabels: 5,
     yLabelsTextFormatter: null,
  }"
  :min="0">
</TrendChart>

3. All available chart props.

atasets: {
  required: true,
  type: Array,
},
grid: {
  default: null,
  type: Object,
},
labels: {
  default: null,
  type: Object,
},
max: {
  type: Number,
},
min: {
  type: Number,
},
padding: {
  default: "5",
  type: String,
  validator(val) {
    return validatePadding(val);
  },
},
interactive: {
  default: false,
  type: Boolean,
},

4. Fire an event on mousemove.