📊 Vue.js wrapper for Chart.js
You can now extend Chart.js chart types and modify them or create new chart types.
// 1. Import Chart.js so you can use the global Chart object
import Chart from 'chart.js'
// 2. Import the `generateChart()` method to create the vue component.
import { generateChart } from 'vue-chartjs'
// 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */})
// 4. Generate the vue-chartjs component
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')
// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
export default {
extends: CustomLine,
mounted () {
// ....
}
}
vue-chartjs.js
and vue-chartjs.min.js
With the refactor vue-chartjs
is even smaller now.
File | Before | After |
---|---|---|
vue-chartjs.js | 15.9 KB | 11.9 KB |
vue-chartjs.min.js | 7.49 KB | 3.49 KB |