Hello, web developers! In this article, we'll see how to create a bar chart in vue 3 using vue-chartjs. Here, we'll install vue-chartjs and chart.js for dynamic bar charts in vue 3. vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reusable chart components.
You can install it using the pnpm, yarn, and npm commands. It provides every chart type that is available in Chart.js is exported as a named component.
Create Bar Chart in Vue 3 using vue-chartjs
In this step, we'll install vue 3 using the following command.
npm init vue@latest
cd your-project-name
npm install
Then, we'll install vue-chartjs and chart.js dependency using the following command.
npm install vue-chartjs chart.js
Next, we'll create a component and import a bar chart.
src/App.vue
<template>
<BarChart />
</template>
<script>
import BarChart from './components/Bar.vue'
export default {
name: 'App',
components: {
BarChart
}
}
</script>
src/components/Bar.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/legacy'
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',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
},
chartOptions: {
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to Create Bar Chart in Vue 3 using vue-chartjs - Websolutionstuff</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Now, run the vue 3 application using the following command.
npm run dev
Output:
You might also like:
In this article, we will explore the world of RESTful APIs in the context of Laravel, encompassing versions 8, 9, and 10...
Aug-26-2020
Hello Devs, In this tutorial we will learn how to use SEOTools in laravel 8. we will give you example of se...
Jun-07-2021
In this article, we will see how to focus on the next input when the max length is reached. Sometimes we have...
Aug-19-2020
It is the poor hosting that is causing you so many issues. If you upgrade to advanced hosting based on your website need...
Apr-08-2022