vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reuseable chart components.
Supports Chart.js v4.
npm version codecov Build Status Package Quality npm Gitter chat license CDNJS version Known Vulnerabilities Donate ko-fi
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.