A Vue.js wrapper for Chart.js that helps you create reuseable charts for your Vuejs applications.
How to use it:
1. Import a chart type of your choice.
- Bar
- Doughnut
- Line
- Pie
- PolarArea
- Radar
- Bubble
- Scatter
import { Line } from 'vue-chartjs'
2. Create your component.
export default {
extends: Line,
props: {
chartdata: {
type: Object,
default: null
},
options: {
type: Object,
default: null
}
},
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
3. Add your chart component to a parent component.
<line-chart :chartdata="chartData" :options="chartOptions"/>
4. All available props.
chartData: {
type: Object,
required: true
},
datasetIdKey: {
type: String,
default: 'label'
},
chartOptions: {
type: Object,
default: () => {}
},
chartId: {
type: String,
default: chartId
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 400
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object,
default: () => {}
},
plugins: {
type: Object,
default: () => {}
}
Preview:
Changelog:
v4.1.2 (09/27/2022)
- fixed legacy multiple annotations
v4.1.1 (05/27/2022)
- bugfix
v4.1.0 (05/10/2022)
- add reactivity to options
- legacy-charts: add typescript definitions for legacy charts
v4.0.6 (04/21/2022)
- Bug Fixes
v4.0.5 (04/08/2022)
- legacy-charts: fix render multiple charts at one page
v4.0.4 (04/01/2022)
- change legacy chart instance type
v4.0.3 (03/29/2022)
- fix chart plugins type
v4.0.2 (03/28/2022)
- legacycharts: add missed export for legacy charts generateChart function
v4.0.1 (03/25/2022)
- chart.js 3.0 support
- migration to vue3
- typescript support
- vue2 legacy support
v3.5.1 (03/23/2022)
- feat: chart.js 3.0 support
- feat: vue2 legacy support
Download Details:
Author: apertureless
Live Demo: https://apertureless.github.io/vue-chartjs/
Download Link: https://github.com/apertureless/vue-chartjs/archive/master.zip
Official Website: https://github.com/apertureless/vue-chartjs
Install & Download: