In this comprehensive guide, we will teach you how to build polar chart in Vue 3 application using the vue-charts and Chart js modules.
A polar chart, is also known as spider chart or radar chart. It offers visual way for displaying multivariate data in the form of a two-dimensional chart.
The polar chart contains data series of axes emanating from a common center, with each axis shows a particular variable or category. Data points are plotted along these axes, and their values are measured from the center of the chart outwards.
In this guide we will throw light on every concept that will help you implement polar chart or spider chart in Vue 3 app. To build the radar chart in Vue we will use Chart js and Vue-chartjs packages.
The Vue-chartjs is a popular library that allows developers to integrate Chart.js, a powerful JavaScript charting library, into Vue.js applications seamlessly.
Similarly, Chart.js provides a wide range of chart types, including line charts, bar charts, pie charts, polar charts, and more.
Vue Js 3 Vue-chart 5 Polar Area Chart Example
Here are the steps, helps you build spider, polar or radar chart component in Vue.
- 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
If you have node and npm installed on your system, you are eligible to run the given command through your command-prompt to install Vue CLI.
npm install -g @vue/cliCreate Vue 3 Application
Hope you are ready to install a brand new Vue 3 app, make sure to use the below command:
vue create vue-demo-appChoose 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 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'Add 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
This step is not imperative, however if you wanna quickly create the UI layout then add the bootstrap in the public/index.html file.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />Add Vue Chart Js Package
Create chart component can not be done without installing the following libraries.:
npm install vue-chartjs chart.jsCreate Vue Template
Since components are reusable, hence create a new VueBarChart.vue file inside the components/ folder with the given code.
<template>
<div class="container mt-5">
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>You have created the new componenet but it won’t work alone, make sure to inject the component in the App.vue file.
<template>
<VueBarChart />
</template>
<script>
import VueBarChart from './components/VueBarChart.vue'
export default {
name: 'App',
components: {
VueBarChart
}
}
</script>Build Polar Area Chart
All things are set! Open the new component, import the essential libraries, and services.
Make sure to add the complete given code in the src/components/VueChartComp.vue file:
<template>
<div class="container mt-5">
<h2 class="mb-4 text-center">Vue 3 Vuechart Js 5 PolarArea Chart Component Example</h2>
<PolarArea id="my-chart-id" :options="chartOptions" :data="chartData" />
</div>
</template>
<script>
import { PolarArea } from 'vue-chartjs'
import {
Chart as ChartJS,
RadialLinearScale,
ArcElement,
Tooltip,
Legend
} from 'chart.js'
ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend)
export default {
name: 'PolarAreaChart',
components: { PolarArea },
data() {
return {
chartData: {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
},
chartOptions: {
responsive: true
}
}
}
}
</script>Start Development Server
Let us view the app on the browser.
You have to invoke the given command to start off the development server.
npm run serveThe CLI window will serve you few testing URLs you can either of the URL to test the app:
http://localhost:8080
Conclusion
Polar chart is a highly effective data visualization mechanism that displays data in a unique and insightful manner.
The polar chart’s quintessential ability to reckon patterns and trends across different data points enables quick and dynamic comprehension of the underlying data.
In this tutorial, we have learned how to integrate vue-chartjs polar chart component in Vue 3 application.
Reference: https://www.npmjs.com/package/vue-chartjs