Vue Js Google Line Charts Tutorial

To implement google line charts in vue js applications; Through this tutorial, i am going to show you how to implement google line chart and use are chart in vue js applications.

How to Add and Use Google Line Chart in Vue Js App

Use below given steps to integrate and use google line 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

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 – Import 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 – Import 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 line Charts Example - laratutorials.com</h1>
    <GChart
      type="LineChart"
      :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", "Sales", "Expenses", "Profit"],
        ["2017", 1030, 540, 350],
        ["2018", 1000, 400, 200],
        ["2019", 1170, 460, 250],
        ["2020", 660, 1120, 300],
      ],
      chartOptions: {
        chart: {
          title: "Company Performance",
          subtitle: "Sales, Expenses, and Profit: 2017-2020"
        }
      }
    };
  }
};
</script>

Conclusion

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