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.

Recommended VUE JS Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *