How to Create Polar Area Chart in Vue 3 with Vue-charts

Last Updated on by in Vue JS

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

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

Choose 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-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'

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

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

The CLI window will serve you few testing URLs you can either of the URL to test the app:

http://localhost:8080

How to Create Polar Area Chart in Vue 3 with Vue-charts

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

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.