How to Create Scatter Chart in Vue 3 using Vue-charts

Scatter chart is dynamic data visualization tool that helps show individual data as data points on a two-dimensional plane.

In this article, you will learn how to build scatter chart in Vue 3 application with the help of vue-charts and Chart js packages.

Scatter charts are extremally useful in visualizing relationships between two variables and identifying patterns, trends, clusters, or outliers in the data.

To create scatter chart in Vue you can use various libraries, we will use vue-charts library along with chart js.

Vue Js 3 Vue-chart 5 Scatter Chart Example

To create a scatter chart in vue you must follow these steps:

• Step 1: Install Vue CLI
• Step 2: Create Vue 3 Application
• Step 2: Define Bootstrap URL
• Step 3: Add Vue Chart Js Package
• Step 4: Create Template File
• Step 5: Build Polar Area Chart
• Step 6: Start Development Server

Install Vue CLI

Node.js is a JavaScript runtime that helps execute JavaScript code outside of a web browser. Whereas, npm is the default package manager for Node.js.

To install node and npm, go to the official Node.js website: https://nodejs.org/

Make sure to have node and npm set up, run given command to install Vue CLI.

npm install -g @vue/cli

Create Vue 3 Application

We can use the following command to install a new Vue application:

vue create vue-demo-app

Select the Vue 3 from the Vue CLI option 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'

You have to register the following code in 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,
})

Define Bootstrap URL

We have to open the public/index.html file, here under the head section define the bootstrap url.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />

Add Vue Chart Js Package

Head over to the command line tool, type the below command and press enter.

npm install vue-chartjs chart.js

Create Vue Template

We have to create a new Vue template file VueBarChart.vue inside the components/ directory.

By adding the below code a basic Vue template is created.

<template>
    <div class="container mt-5">
         
    </div>
</template>
   
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

New vue template is created, you now have to register it inside the App.vue file.

<template>
   <VueBarChart />
</template>
<script>
import VueBarChart from './components/VueBarChart.vue'
export default {
  name: 'App',
  components: {
    VueBarChart
  }
}
</script>

Create Scatter Area Chart

Add the below code in src/components/VueChartComp.vue file:

<template>
    <div class="container mt-5">
        <h2 class="mb-4 text-center">Vue 3 Vuechart Js 5 Scatter Chart Component Example</h2>
        <Scatter id="my-chart-id" :data="chartData" />
    </div>
</template>
  
<script>
import { Scatter } from 'vue-chartjs'
import {
    Chart as ChartJS,
    LinearScale,
    PointElement,
    LineElement,
    Tooltip,
    Legend
} from 'chart.js'
ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)

export default {
    name: 'ScatterChart',
    components: { Scatter },
    data() {
        return {
            chartData: {
                datasets: [
                    {
                        label: 'Scatter Dataset 1',
                        fill: false,
                        borderColor: '#f87979',
                        backgroundColor: '#f87979',
                        data: [
                            {
                                x: -2,
                                y: 4
                            },
                            {
                                x: -1,
                                y: 1
                            },
                            {
                                x: 0,
                                y: 0
                            },
                            {
                                x: 1,
                                y: 1
                            },
                            {
                                x: 2,
                                y: 4
                            }
                        ]
                    },
                    {
                        label: 'Scatter Dataset 2',
                        fill: false,
                        borderColor: '#7acbf9',
                        backgroundColor: '#7acbf9',
                        data: [
                            {
                                x: -2,
                                y: -4
                            },
                            {
                                x: -1,
                                y: -1
                            },
                            {
                                x: 0,
                                y: 1
                            },
                            {
                                x: 1,
                                y: -1
                            },
                            {
                                x: 2,
                                y: -4
                            }
                        ]
                    }
                ]
            }
        }
    }
}
</script>

Start Development Server

Eventually we have created the functionality, let’s start the development server.

npm run serve

Here is the URL, which can let you open the app:

http://localhost:8080

Conclusion

Scatter charts are used for various purposes due to Its ability to effectively display relationships between two variables.

Scatter charts are a versatile and powerful tool for data analysis and really helpful in various domains: science, finance, social sciences, and more.

In this tutorial, we have learned how to create scatter chart template or component in Vue 3 application using vue-chartjs APIs.