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:
v5.2.0 (01/09/2023)
- restore compatability with webpack 4
- bugfix
v5.1.0 (12/19/2022)
- restore CommonJS bundle
v5.0.1 (12/06/2022)
- fix compatability with Vue >=2.7
v5.0.0 (12/05/2022)
- base Chart component
- drop Vue.js < 2.7 support
- events util
- fallthrough props to canvas
- updateMode prop
- upgrade Chart.js to v4
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: