In this tutorial, we will look at how to create bubble chart component in Vue 3 application with the help of vue-charts and chart.js modules.
A bubble chart used for data visualization, bubble chart data points as circles on a two-dimensional graph.
It is an extension of a scatter plot, where each data point is represented by its x and y coordinates.
In a bubble chart, an additional third variable is represented by the size of the circles, which allows for the visualization of three dimensions of data in a single chart.
Charts are profoundly used when working with large datasets, as they offer facile ways in order to visualize information about multiple data points in a compact and visually appealing way.
Vue 3 Vue-chart 5 Bubble Chart Component Example
Here are the steps that will help you implement the bubble chart in Vue.
- Step 1: Create Vue Environment
- Step 2: Create Vue 3 Project
- Step 2: Add Bootstrap CDN
- Step 3: Add Vue-chartjs Library
- Step 4: Create Chart Component
- Step 5: Integrate Bubble Chart in Vue
- Step 6: Run App on Browser
Create Vue Environment
To install Vue CLI (Command Line Interface), you need to have Node.js and npm (Node Package Manager) installed on your system.
Vue CLI is a command-line tool that can be downloaded using the below command.
npm install -g @vue/cliCreate Vue 3 Project
To create a brand new Vue.js project, head over to the desired directory in your terminal and execute the following command:
vue create vue-demo-appMake sure to select 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 Move into the project directory.
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 adding the following code to the vue.config.js file.
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
})
Add Bootstrap CDN
To add the Bootstrap in Vue, make sure to define the CDN link inside the public/index.html file under the head section.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />Add Vue-chartjs Library
On your console, you have to type and then execute the given command:
npm install vue-chartjs chart.jsCreate Chart Component
Create components/ folder, within this folder also create a VueBarChart.vue file.
<template>
<div class="container mt-5">
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>After the template is created, open the App.vue file and then add the component in this file.
<template>
<VueBarChart />
</template>
<script>
import VueBarChart from './components/VueBarChart.vue'
export default {
name: 'App',
components: {
VueBarChart
}
}
</script>Integrate Bubble Chart in Vue 3
To incorporate bubble chart through vue-chartjs make sure to update the following code in src/components/VueChartComp.vue file.
<template>
<div class="container mt-5">
<h2 class="mb-4 text-center">Vue 3 Vuechart Js 5 Bubble Graph Example</h2>
<Bubble id="my-chart-id" :options="chartOptions" :data="chartData" />
</div>
</template>
<script>
import { Bubble } from 'vue-chartjs'
import {
Chart as ChartJS,
Tooltip,
Legend,
PointElement,
LinearScale
} from 'chart.js'
ChartJS.register(LinearScale, PointElement, Tooltip, Legend)
export default {
name: 'BubbleChart',
components: { Bubble },
data() {
return {
chartData: {
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [
{
x: 20,
y: 25,
r: 5
},
{
x: 40,
y: 10,
r: 10
},
{
x: 30,
y: 22,
r: 30
}
]
},
{
label: 'Data Two',
backgroundColor: '#7C8CF8',
data: [
{
x: 10,
y: 30,
r: 15
},
{
x: 20,
y: 20,
r: 10
},
{
x: 15,
y: 8,
r: 30
}
]
}
]
},
chartOptions: {
responsive: true
}
}
}
}
</script>Run App on Browser
On the command prompt type the below command; this command starts the vue development server.
npm run serveBy using the given link you can check your app.
http://localhost:8080
Conclusion
Bubble charts are exclusively useful when you require to establish the relationships and patterns between three different variables.
It helps in showing clusters of data points, identify outliers, and highlight the distribution of data across the x and y axes.
In this detailed guide, we have ascertained how to integrate a bar graph in Vue js 3 application using vue-chartsjs package.
Reference: https://vue-chartjs.org/