How to Build Bubble Chart in Vue 3 using Vue-chart 5

Last Updated on by in Vue JS

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/cli

Create 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-app

Make 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-app

Node.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.js

Create 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 serve

By using the given link you can check your app.

http://localhost:8080

How to Build Bubble Chart in Vue 3 using Vue-chart 5

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/

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.