Vue Js Google Area Chart Tutorial Example

Vue js google area chart integration example. In this tutorial, you will learn How to use google area chart in vuejs app.

This tutorial will guide you step by step on how to implement a google area chart for beginners and experts in Vue js app. As well as, will make simple example of how to implement a google areachart using google chart plugins.

How to Create Google Area Chart In Vue Js App

Just follow the following steps and implement google area chart in vue Js app using google chart plugin:

• 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

In this step, open your terminal and execute the following command to create new vue js app:

vue create chart-app

Step 2 – Install Google Chart Package

In this step, open your terminal and execute the following command 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

In this step, visit /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

In this step, visit /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 area Charts Example - Tutsmake.com</h1>
    <GChart
      type="AreaChart"
      :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: [
        ["Year", "Blog"],
        ["2018", 180],
        ["2019", 300],
        ["2020", 250],
        ["2021", 500],
      ],
      chartOptions: {
        chart: {
          title: "Company Performance",
          subtitle: "blog in total: year"
        }
      }
    };
  }
};
</script>

Conclusion

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

Recommended VUE JS Tutorials