Vue Js Google Pie Chart Tutorial

Google pie chart integration in vue js; Through this tutorial, i am going to show you how to integrate and use google pie chart in vue js applications.

How to Use Google Pie Chart In Vue Js App

Step 1 – Create New VUE JS App
Step 2 – Install Google Map Package
Step 3 – Add to Components in Main.js
Step 4 – Add Component on App.vue

Step 1 – Create New VUE JS App

Run the following command on terminal to create new vue js app:

vue create chart-app

Step 2 – Install Google Chart Package

Run the following command on terminal to install google chart package in your vue js app:

cd chart-app

npm i vue-google-charts

Step 3 – Add to Components in Main.js

Go to /src directory and open main.js file. Then Import components in main.js:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

Step 4 – Add Component on App.vue

Go to /src/ directory and App.vue file. And then add the following code into it:

<template>
  <div id="app" style="width:70%;">
    <h1 style="padding-left:80px;">Vue Js Google pie Charts Example - laratutorials.com</h1>
    <GChart
      type="pieChart"
      :data="chartData"
      :options="chartOptions"
    />    
  </div>
</template>
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ["Language", "Blog"],
        ["PHP", 180],
        ["Laravel", 200],
        ["Html", 100],
        ["vue.js", 150],
      ],
      chartOptions: {
        chart: {
          title: "Company Performance",
          subtitle: "blog in total: languages"
        }
      }
    };
  }
};
</script>

Conclusion

Vue js google pie chart integration example. In this tutorial, you have learned How to use google pie chart in vuejs app.