How to Integrate Pie Chart in Vue 3 using Vue-chart

Last updated on: by Digamber

In this step-by-step post, we will learn how to create Pie chart component in Vue 3 application with the help of vue-charts and Chart js packages.

A pie chart is a circular graphical representation that shows data as slices of a pie.

Each slice in the chart belongs to a specific category or data point, and the size of each slice is proportional to the value it signifies.

Pie charts are majorly used to show the relationship of parts in comparison to the rest of the parts, illustrating the distribution of data across various categories.

With the help of the below mentioned steps, we will teach you how to create pie chart template in vue 3 using chart dependencies.

Vue Js 3 Vue-chart 5 Pie Chart Component Example

  • Step 1: Install Vue CLI
  • Step 2: Set Up Vue 3 Application
  • Step 2: Register Bootstrap in Vue
  • Step 3: Install Vue Chart Js Package
  • Step 4: Create Vue Template
  • Step 5: Create Pie Chart Component
  • Step 6: Run Vue Server

Install Vue CLI

Vue CLI is a command-line tool that helps you build and manage Vue.js projects.

We can install it globally by running the given command:

npm install -g @vue/cli

Set Up Vue 3 Application

Once Vue CLI is set up, you can use it to create a new Vue 3 app, make sure to use the below command:

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 to the folder using the below command:

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,
})

Register Bootstrap in Vue

In this step, you have to add the bootstrap CSS link under the head section within the public/index.html file.

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

Install Vue Chart Js Package

Run the following command to install the chart js libraries:

npm install vue-chartjs chart.js

Create Vue Template

In order to formulate the new template, make sure to create the VueBarChart.vue file inside the components/ folder.

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

After creating the template, you have to add the component in the App.vue file.

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

Create Pie Chart Component

We have now done the proper set up for building a Pie chart. Next, Import the chart js libraries and services also define the fake data within the data() method.

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

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

export default {
    name: 'PieChart',
    components: { Pie },
    data() {
        return {
            chartData: {
                labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
                datasets: [
                    {
                        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
                        data: [40, 20, 80, 10]
                    }
                ]
            },
            chartOptions: {
                responsive: true
            }
        }
    }
}
</script>

Run Vue Server

The development part is done, time has come to test the app on the browser.

Here is the command that invokes the Vue’s development server.

npm run serve

Here is the URL that you can use to view your app:

http://localhost:8080

How to Integrate Pie Chart in Vue 3 using Vue-chart

Conclusion

In general, a pie chart is a strong visual tool that profoundly shows the data in a circular, segmented format.

It is an ideal choice for representing parts of a whole, illustrating proportions, and showing the distribution of data across categories.

In this tutorial, we have explained how to build pie chart in Vue js component using the chart libraries.

I hope, this guide will help you learn to play with charts in Vue 3.

positronX.io - Tamso Ma Jyotirgamaya
Digamber

A Full-stack developer with a passion to solve real world problems through functional programming.