vue3-chart-v2 is a wrapper for Chart.js in Vue 3. You can easily create reuseable chart components. Inspired by vue-chartjs
Head over here ==> vue3-chart-v2
- Vue 3 is required
- npm
npm install vue3-chart-v2 chart.js --save - yarn
yarn add vue3-chart-v2 chart.js
You need to import the component and then either use extends or mixins and add it.
You can import each module individual.
import { Bar } from 'vue3-chart-v2'Just create your own component.
// MonthlyChart.vue
<script> import { defineComponent } from 'vue' import { Bar } from 'vue3-chart-v2' export default defineComponent({ name: 'MonthlyChart', extends: Bar, mounted () { // Overwriting base render method with actual data. this.renderChart({ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [ { label: 'GitHub Commits', backgroundColor: '#f87979', data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] } ] }) } }) </script>Then simply import and use your own extended component and use it like a normal vue component
<template> <MonthlyChart /> </template> <script> import { defineComponent } from 'vue' import MonthlyChart from './path/to/MonthlyChart.vue' export default defineComponent({ name: 'App', components: { MonthlyChart } }) </script>You can overwrite the default chart options as props. Just pass the options object as a second parameter to the render method
// MonthlyChart.vue import { defineComponent } from 'vue' import { Line } from 'vue3-chart-v2' export default defineComponent({ name: 'MonthlyChart', extends: Line, props: { chartData: { type: Object, required: true }, chartOptions: { type: Object, required: false }, }, mounted () { this.renderChart(this.chartData, this.chartOptions) } })Then simply use it in your vue app
<template> <MonthlyChart v-bind:chartData="..." v-bind:chartOptions="..." /> </template> <script> import { defineComponent } from 'vue' import MonthlyChart from './path/to/MonthlyChart.vue' export default defineComponent({ name: 'App', components: { MonthlyChart } }) </script>
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # run unit tests npm run test:unit- Fork it (https://github.com/vutran6853/vue3-chart-v2/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -m 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request