vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.
Supports Chart.js v3 and v2.
vue-chartjs
lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible.
It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility.
:::tip Need an API to fetch data? Please consider Cube, an open-source API for data apps. :::
You can install vue-chartjs
over yarn
or npm
or pnpm
. However, you also need to add chart.js
as a dependency to your project because Chart.js
is a peerDependency. This way you can have full control over the versioning of Chart.js
.
pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js
Every chart type that is available in Chart.js is exported as a named component and can be imported as such. These components are normal Vue components.
The idea behind vue-chartjs is to provide easy-to-use components, with maximal flexibility and extensibility.
First, you need to import the base chart.
import { Bar } from 'vue-chartjs'
For Vue 2 projects, you need to import from vue-chartjs/legacy
.
import { Bar } from 'vue-chartjs/legacy'
Check out the official Chart.js docs to see the object structure you need to provide.
Just create your own component.
BarChart.vue
<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: Object,
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: Object as PropType<PluginOptionsByType<'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:
App.vue
<template>
<BarChart />
</template>
<script>
import BarChart from 'path/to/component/BarChart'
export default {
name: 'App',
components: { BarChart }
}
</script>
vue-chartjs charts have data change watcher by default. vue-chartjs will update or re-render the chart if new data is passed.
<template>
<Bar :chart-data="chartData" />
</template>
<script>
// DataPage.vue
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 },
computed: {
chartData() { return /* mutable chart data */ }
}
}
</script>
The options
object is not currently implemented reactively. Therefore, if you dynamically change the chart options, they will not be recognized by the update data handler.
Charts will emit events if the data changes. You can listen to them in the chart component. The following events are available:
chart:rendered
- if the chart object instance renderedchart:destroyed
- if the chart object instance removedchart:updated
- if the update handler performs an update instead of a re-renderlabels:updated
- if new labels were set
When using chartjs-plugin-annotation and Vue 2 simultaneously, you will not be able to place multiple reactive charts on one page.
Your goal should be to create reusable chart components. For this purpose, you should utilize Vue.js props to pass in chart options and chart data. This way, the parent component itself does not hold an opinion about fetching data and is only for presentation.
<template>
<Bar :chart-data="chartData" :chart-options="chartOptions" />
</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: {
chartData: {
type: Object,
required: true
},
chartOptions: {
type: Object,
default: () => {}
}
}
}
</script>
You can handle your chart data directly in your parent component.
<template>
<Bar :chart-data="chartData" />
</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 },
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12]
}
]
}
}
}
}
</script>
A common pattern is to use an API to retrieve your data. However, there are some things to keep in mind. The most common problem is that you mount your chart component directly and pass in data from an asyncronous API call. The problem with this approach is that Chart.js tries to render your chart and access the chart data syncronously, so your chart mounts before the API data arrives.
To prevent this, a simple v-if
is the best solution.
Create your chart component with a data prop and options prop, so we can pass in our data and options from a container component.
<template>
<div class="container">
<Bar v-if="loaded" :chart-data="chartData" />
</div>
</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 },
data: () => ({
loaded: false,
chartData: null
}),
async mounted () {
this.loaded = false
try {
const { userlist } = await fetch('/api/userlist')
this.chartdata = userlist
this.loaded = true
} catch (e) {
console.error(e)
}
}
}
</script>
You can set responsive: true
and pass in a styles object which gets applied as inline styles to the outer <div>
. This way, you can change the height and width of the outer container dynamically, which is not the default behaviour of Chart.js. It is best to use computed properties for this.
::: warning
You need to set position: relative
:::
<template>
<div>
<Bar :styles="myStyles"/>
</div>
</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 },
computed: {
myStyles () {
return {
height: `${/* mutable height */}px`,
position: 'relative'
}
}
}
}
</script>
Sometimes you need to extend the default Chart.js charts. There are a lot of examples on how to extend and modify the default charts. Or, you can create your own chart type.
In vue-chartjs
, you can do this pretty much the same way:
// 1. Import Chart.js so you can use the global Chart object
import { Chart } from 'chart.js'
// 2. Import the `generateChart()` method to create the vue component.
import { generateChart } from 'vue-chartjs'
// 3. Import needed controller from Chart.js
import { LineController } from 'chart.js'
// 3. Extend one of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
class LineWithLineController extends LineController { /* custom magic here */}
// 4. Generate the vue-chartjs component
// The first argument is the chart-id, the second the chart type, third is the custom controller
const CustomLine = generateChart('custom-line', 'line', LineWithLineController)
// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
export default {
components: { CustomLine }
}
Here are some resources, such as tutorials, on how to use vue-chartjs
: