In this tutorial, we will look at how to create bar chart component in Vue 3 application using the Vue-charts 5 and chart.js packages.
The vue-chartjs is a well-known charting library that offers ready-made Vue.js components for Chart.js.
On the other hand, Chart.js is a broadly-used JavaScript plugin for developing interactive, intuitive and customizable charts and graphs on Vue based web applications.
In this step-by-step guide, we will teach you how to integrate bar chart in Vue js app.
A bar chart, also known as a bar graph, is a visual representation of data with the help of rectangular bars or columns.
It is a most popular method of showing categorical data to show comparisons between different various categories.
In bar graph every bar belongs to a specific category, and the height or length of the bar corresponds to the value or frequency of that category.
Vue 3 Vue-chart v5 Bar Chart Component Example
- Step 1: Create Vue Environment
- Step 2: Install Vue 3 Project
- Step 2: Add Bootstrap CDN
- Step 3: Install Vue Chart Module
- Step 4: Create New Chart Component
- Step 5: Create Vue 3 Bar Chart Component
- Step 6: View App on Browser
Create Vue Environment
Vue CLI is an important tool, we can not imagine Vue development without this tool.
Here is how you can install this tool in your system.
npm install -g @vue/cliInstall Vue 3 Project
Once the Vue CLI installed; on the console type the given command and press enter:
vue create vue-demo-appEnsure that you choose the Vue 3 from the options list.
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features Navigate to the project folder.
cd vue-demo-appNode.js Gatsby error – “digital envelope routines::unsupported …”
Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.
"scripts": {
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},Vue multi word error
Fix multi-word error warning by placing the below code to the vue.config.js file.
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
})
Add Bootstrap CDN
The Bootstrap library increases the UI component’s development speed.
Hence, we are going to include the Bootstrap 5 CDN link inside the public/index.html file.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />Install Vue Chart Module
Now, install the vue-chartjs library. Also, we need to install the chart.js as a dependency to our Vue project because Chart.js is a peerDependency.
This grants us the complete control over the versioning of Chart.js.
npm install vue-chartjs chart.jsCreate New Chart Component
A component is a self-contained and reusable unit that contains the template, styles and script to handle particular functionality.
Create components folder, inside this folder create a brand new vue template, name it VueBarChart.vue.
<template>
<div class="container mt-5">
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>Once you created the component; make sure to add the component in the App.vue file. Further, we can use this component to display the Vue chart js bar chart on the browser.
Add code in the src/App.vue file.
<template>
<VueBarChart />
</template>
<script>
import VueBarChart from './components/VueBarChart.vue'
export default {
name: 'App',
components: {
VueBarChart
}
}
</script>Create Vue 3 Bar Chart Component
First, we have to import the required chart dependencies; these services will help us create the bar chart component in Vue 3.
Define the Bar component, set the data and custom options in bar chart.
Open and add code in src/components/VueChartComp.vue file.
<template>
<div class="container mt-5">
<h2 class="mb-4 text-center">Vue 3 Vuechart Js 5 Bar Chart Example</h2>
<Bar id="my-chart-id" :options="chartOptions" :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() {
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
}
}
}
}
</script>View App on Browser
On the command prompt type the below command; this command starts the development server.
npm run serveThe terminal shows the links, you can use them to open the app on the browser.
http://localhost:8080
Conclusion
Bar graph integration is a very much needed and dynamic tool for effectively displaying categorical data and making data-driven decisions.
By using rectangular bars to show different categories and their corresponding values, bar graphs offer a clear and concise visualization that helps in facile comparisons and identification of patterns and trends.
In this comprehensive guide, we have learned how to build a bar graph component in Vue js’ latest version.
Reference: https://vue-chartjs.org/