How to Integrate and Use Google Pie Chart in Vue 2

Vue Google Charts Pie Chart tutorial; this intuitive guide will share the agile method to implement Google pie chart in Vue js app using the profound vue google charts package.

Google charts help you show live data on your website, and it is a powerful tool that offers you unbound ease in integrating charts into your site.

No matter how large the data set is, google charts eloquently display data for visualization that helps your users to make some important decisions.

Google charts are highly customizable and provide various features; it is a gold mine for data presentation.

A pie chart is around analytical graphics, categorized into parts to demonstrate numerical proportion. In a pie chart, the arc length per slice is equivalent to the quantity it represents. So, without further ado, let us add a pie chart in vue.

Vue Js Google Pie Chart Integration Example

• Step 1: Create Vue Environment
• Step 2: Install Vue Js Project
• Step 3: Install Google Chart Package
• Step 4: Create and Register Chart Component
• Step 5: Add Google Pie Chart in Vue
• Step 6: Start Vue App

Create Vue Environment

Everything in Vue starts from VUE CLI; installing this tool is easier than you think, enter provided command and execute.

npm install -g @vue/cli

Install Vue Js Project

Vue cli is configured on your system; it sounds great; let’s quickly type the following command to install a new vue app.

You may directly jump on to the next step if this work has already been done.

vue create vue-charts-app

Get inside the app folder.

cd vue-charts-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"
},

Install Google Chart Package

Next, go to the terminal, type, and execute the below command to begin installing the vue google charts library.

npm install vue-google-charts

Create and Register Chart Component

Next, go to components directory then create a new GoogleChart.vue file, make sure to add the following code into the file.

<template>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
  
    };
  }
};
</script>

It is imperative to register the new component in main js, consequently don’t forget to add the component in the src/App.vue file.

<template>
  <div class="container mt-5 text-center">
    <GoogleChart />
  </div>
</template>
<script>
import GoogleChart from './components/GoogleChart.vue'
export default {
  name: 'App',
  components: {
    GoogleChart
  }
}
</script>

Add Google Pie Chart in Vue

Adding a pie chart in vue is exorbitantly simple; it requires three ingredients. First, the GChart directive, second is importing vue google chart module, and third is the data that needs to be injected in the pie chart. We laid down all three ingredients accordingly in the vue component.

Open and add code in src/components/GoogleChart.vue file.

<template>
  <div>
    <h2>Vue Js Google Pie Chart Demo</h2>
    <GChart
      type="PieChart"
      :options="options"
      :data="data"
    />    
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      data: [
          ['Daily Routine', 'Hours per Day'],
          ['Work',     14],
          ['Eat',      1],
          ['Reading',  2],
          ['Exercise', 2],
          ['Sleep',    5]
      ],
      options: {
        width: 1100,
        height: 400
      }
    };
  }
};
</script>

Start Vue App

In the last section, we have to complete two tasks, starting the vue development server and test the app on the browser.

npm run serve

http://localhost:8080

Conclusion

After exploring this guide, you must have understood how to add a google pie chart in the vue js app. We showed how to install a third-party plugin for configuring charts in a vue environment.

We also ascertained the subtle nuances of chart integration in vue; we hope this Vue js Google pie chart example hasn’t been somber and will help you learn a lot.