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.jsWe 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, PluginOptionsByType } 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.
