Vue Js Google Line Charts Tutorial Example

Vue js google line charts; In this tutorial, you will learn how to integrate and use google line chart in vuejs applications.

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

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

Just follow the following steps and implement 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

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 line Charts Example - Tutsmake.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.

Recommended VUE JS Tutorials