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