How to Create Doughnut Chart in Vue 3 using Vue-chart 5

In this tutorial, we will learn how to build Doughnut chart component in Vue JS 3 app using the Chart js and vue-charts packages.

A doughnut chart is a type of data visualization used to display information in a circular format, similar to a pie chart.

The doughnut chart is useful for displaying the relationship between parts and the whole, just like a pie chart, but it also allows for additional comparisons within the data.

We are going to teach you how to display data using doughnut chart in vue using Chart.js.

The Chart.js is a popular open-source JavaScript library used for creating interactive and dynamic data visualizations on web pages

Vue 3 Vue-chart 5 Doughnut Chart Component Example

• Step 1: Set Up Vue Environment
• Step 2: Create Vue 3 Project
• Step 2: Add Bootstrap CDN
• Step 3: Install Vue-chartjs Module
• Step 4: Create Chart Component
• Step 5: Integrate Doughnut Chart in Vue
• Step 6: Run App on Browser

Set Up Vue Environment

Vue CLI is a command-line tool that helps you quickly set up and manage Vue.js projects. You must install Node.js and npm (Node Package Manager) on your computer.

Here’s is the command that lets you install Vue CLI:

npm install -g @vue/cli

Create Vue 3 Project

Open a terminal or command prompt and type and then invoke the following command to install Vue project:

vue create vue-demo-app

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

To remove above error for invoking the app, make sure to update 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,
})

Add Bootstrap CDN

Next, you have to define the Bootstrap CSS URL under the head part inside 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-chartjs Module

Here is how you can install the Vue charts and Charts js libraries in your Vue project.

npm install vue-chartjs chart.js

Create Chart Component

Head over to components/ folder, here you need to create a VueBarChart.vue file.

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

Integrate Doughnut Chart in Vue

Import the essential libraries from chart.js package, as well as Doughnut directive from the vue-chartjs library.

Define the data() method, this method contains the data that you need to populate on the doughnut chart.

Update 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 Doughnut Chart Example</h2>
        <Doughnut id="my-chart-id" :options="chartOptions" :data="chartData" />
    </div>
</template>
  
<script>
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Doughnut } from 'vue-chartjs'
ChartJS.register(ArcElement, Tooltip, Legend)
export default {
    name: 'DoughnutChart',
    components: { Doughnut },
    data() {
        return {
            chartData: {
                labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
                datasets: [
                    {
                        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
                        data: [40, 20, 80, 10]
                    }
                ]
            },
            chartOptions: {
                responsive: true
            }
        }
    }
}
</script>

Start Development Server

To start a development server and view your Vue 3 app in action on the browser, run the following command:

npm run serve

Above command start the development server, compile your app and provides a development URL:

http://localhost:8080

Conclusion

In this step by step article, we have discussed how to use vue-chartsjs in Vue js and create a simple doughnut chart component using Vue template.

Hope this guide will help you implement Vue charts in Vue 3 applications.