vue-chartjs

esm cjs
Vue.js wrapper for chart.js for creating beautiful charts.
Version 5.3.2 License MIT
Keywords
ChartJsVueVisualisationWrapperCharts
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 5.3.2
- 5.3.1
- 5.3.0
- 5.2.0
- 5.1.0
- 5.0.1
- 5.0.0
- 4.1.2
- 4.1.1
- 4.1.0
- 4.0.7
- 4.0.6
- 4.0.5
- 4.0.4
- 4.0.3
- 4.0.2
- 4.0.1
- 4.0.0
- 3.5.1
- 3.5.0
- 3.4.2
- 3.4.1
- 3.4.0
- 3.3.2
- 3.3.1
- 3.3.0
- 3.2.1
- 3.2.0
- 3.1.1
- 3.1.0
- 3.0.2
- 3.0.1
- 3.0.0
- 2.8.7
- 2.8.6
- 2.8.5
- 2.8.4
- 2.8.3
- 2.8.2
- 2.8.1
- 2.8.0
- 2.7.2
- 2.7.1
- 2.7.0
- 2.6.5
- 2.6.4
- 2.6.3
- 2.6.2
- 2.6.1
- 2.6.0
- 2.5.6
- 2.5.5
- 2.5.4
- 2.5.3
- 2.5.2
- 2.5.1
- 2.5.0
- 2.4.1
- 2.4.0
- 2.3.9
- 2.3.8
- 2.3.7
- 2.3.6
- 2.3.5
- 2.3.4
- 2.3.3
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.1
- 2.2.0
- 2.1.1
- 2.1.0
- 1.2.0
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.3
- 1.0.2
- 1.0.1
- 3.0.1-rc2
- 3.0.1-rc1
- 3.0.1-rc0
- 3.0.0-rc1
- 3.0.0-rc0
- 2.8.3-rc-01
- 2.6.0-rc1
- 2.5.7-rc3
- 2.5.7-rc2
- 2.5.7-rc1
- 2.3.9-rc1
- 2.0.0-alpha
<script type="module"> import vueChartjs from 'https://cdn.jsdelivr.net/npm/vue-chartjs@5.3.2/+esm' </script>
vue-chartjs

vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reuseable chart components.
Supports Chart.js v4.
QuickStart • Docs • Stack Overflow
Quickstart
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
Then, import and use individual components:
<template>
<Bar :data="data" :options="options" />
</template>
<script lang="ts">
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
export default {
name: 'App',
components: {
Bar
},
data() {
return {
data: {
labels: ['January', 'February', 'March'],
datasets: [{ data: [40, 20, 12] }]
},
options: {
responsive: true
}
}
}
}
</script>
Need an API to fetch data? Consider Cube, an open-source API for data apps.
Docs
- Reactivity
- Access to Chart instance
- Accessibility
- Migration from v4 to v5
- Migration from vue-chart-3
- API
- Examples
Build Setup
# install dependencies
pnpm install
# build for production with minification
pnpm build
# run unit tests
pnpm test:unit
# run all tests
pnpm test
Contributing
- 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
License
This software is distributed under MIT license.