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
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.
- Reactivity
- Access to Chart instance
- Accessibility
- Migration from v4 to v5
- Migration from vue-chart-3
- API
- Examples
# install dependencies pnpm install # build for production with minification pnpm build # run unit tests pnpm test: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.