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/cliCreate Vue 3 Application
We can use the following command to install a new Vue application:
vue create vue-demo-appSelect 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-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'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.jsCreate 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 serveHere 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.
Reference: https://www.npmjs.com/package/vue-chartjs