Description:
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.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: