vue-chartjs is a wrapper for Chart.js in vue. You can easily create reusable chart components. Supports Chart.js v3 and v2.
vue chartjs, vue chart js line chart example, vue chartjs options, vue chartjs bar chart example, vuetify charts, chart js vue 3, vue chartjs pie chart
Vue 3 charts
- Bar
- Bubble
- Doughnut
- Line
- Pie
- PolarArea
- Radar
- Scatter
- Bar with reactive prop
- Bar with reactive data
- Custom chart
How to make use of it:
Install and download:
pnpm add vue-chartjs chart.js # or yarn add vue-chartjs chart.js # or npm i vue-chartjs chart.js
1. Import the component.
import { Bar } from 'vue-chartjs'
2. For Vue 2 projects, you need to import from vue-chartjs/legacy.
import { Bar } from 'vue-chartjs/legacy'
3. Just create your 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>
4. 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 }) } })
5. Use it in your Vue app.
<template> <BarChart /> </template>
<script> import BarChart from 'path/to/component/BarChart' export default { name: 'App', components: { BarChart } } </script>
vue.js chart.js wrapper to create reusable charts, vue-chartjs Plugin/Github
See Demo And Download
Official Website(apertureless): Click Here
This superior jQuery/javascript plugin is developed by apertureless. For extra advanced usage, please go to the official website.