vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.
Supports Chart.js v3 and v2.
Install β’ How to use β’ Docs β’ Slack β’ Stack Overflow
Install this library with peer dependencies:
pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js
We recommend using chart.js@^3.0.0
.
Need an API to fetch data? Consider Cube, an open-source API for data apps.
This package works with version 2.x and 3.x of Vue.
Import the component.
import { Bar } from 'vue-chartjs'
For Vue 2 projects, you need to import from vue-chartjs/legacy
.
import { Bar } from 'vue-chartjs/legacy'
Just create your own component.
<template>
<Bar
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'BarChart',
components: { Bar },
props: {
chartId: {
type: String,
default: 'bar-chart'
},
datasetIdKey: {
type: String,
default: 'label'
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 400
},
cssClasses: {
default: '',
type: String
},
styles: {
type: Object,
default: () => {}
},
plugins: {
type: Array,
default: () => []
}
},
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
},
chartOptions: {
responsive: true
}
}
}
}
</script>
or in TypeScript
// BarChart.ts
import { defineComponent, h, PropType } from 'vue'
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Plugin } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default defineComponent({
name: 'BarChart',
components: { Bar },
props: {
chartId: {
type: String,
default: 'bar-chart'
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 400
},
cssClasses: {
default: '',
type: String
},
styles: {
type: Object as PropType<Partial<CSSStyleDeclaration>>,
default: () => {}
},
plugins: {
type: Array as PropType<Plugin<'bar'>[]>,
default: () => []
}
},
setup(props) {
const chartData = {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
}
const chartOptions = { responsive: true }
return () =>
h(Bar, {
chartData,
chartOptions,
chartId: props.chartId,
width: props.width,
height: props.height,
cssClasses: props.cssClasses,
styles: props.styles,
plugins: props.plugins
})
}
})
Use it in your vue app
<template>
<BarChart />
</template>
<script>
import BarChart from 'path/to/component/BarChart'
export default {
name: 'App',
components: { BarChart }
}
</script>
# install dependencies
pnpm install
# build for production with minification
pnpm build
# run unit tests
pnpm unit
# run all tests
pnpm test
- Fork it ( https://github.com/apertureless/vue-chartjs/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request
This software is distributed under MIT license.