Awesome
vue-chartjs
<img align="right" width="150" height="150" alt="vue-chartjs logo" src="https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/vue-chartjs.png">vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reuseable chart components.
Supports Chart.js v4.
<br /> <a href="#quickstart">QuickStart</a> <span> • </span> <a href="#docs">Docs</a> <span> • </span> <a href="https://stackoverflow.com/questions/tagged/vue-chartjs">Stack Overflow</a> <br /> <hr />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>
<hr />
Need an API to fetch data? Consider Cube, an open-source API for data apps.
<br />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.
<a href="https://www.buymeacoffee.com/xcqjaytbl" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>