Simple Trend Charts For Vue.js

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.

• @mouse-move(index: Number, data: Array)

Preview:

Changelog:

v0.17.0 (09/13/2022)

• Added Vue 3 support

v0.16.0 (09/11/2022)

• Refactor render functions

v0.15.3 (11/14/2020)

• npm update

v0.15.2 (05/21/2020)

• Bugfix

Download Details:

Author: dmtrbrl

Live Demo: https://dmtrbrl.github.io/vue-trend-chart/

Download Link: https://github.com/dmtrbrl/vue-trend-chart/archive/master.zip

Official Website: https://github.com/dmtrbrl/vue-trend-chart

Install & Download:

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