Vue Js Google Area Chart Tutorial

Vue js google area chart integration; In this tutorial, i am going to show you to use google area chart in vuejs application.

How to Use Google Area Chart In Vue Js App

Follow the below given steps and implement google area charts in vue js applications:

  • 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 command prompt 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 area Charts Example - Laratutorials.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

Recommended:-

Previous Post Vue Js Range Slider Example Tutorial

Next Post Vue Js Get Selected Value from Selected Dropdown

Yogi

My name is Yogi and i am a full-stack developer, entrepreneur, and owner of laratutorials.com. I like to writing and sharing tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, Bootstrap. and this tips can help other developers.

Vue JS Tutorial

Be First to Comment

Leave a Reply

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