VueJs Google Column Chart with Example

Today,I will learn you how to create Google Column Charts in Vue js. we will show example of Vue Js Google Column Charts. I will make vue js google column charts example.you can easyliy create google column charts in vue js.

Here follow this example of google column charts example in vue js.

Creating a Project

here, I this step create new Vue Project.follwing command

vue create chart-project

Installation Package

Now this step,I will install Package vue-google-charts.

npm i vue-google-charts

App.vue

Here this step, Create a new component called ChartApp.vue and paste the following into it:

chart-project/src/components/App.vue

<template>
  <div id="app" style="width:70%;">
    <h1 style="padding-left:80px;">Vue Js Google Column Charts Example - nicesnippets.com</h1>
    <GChart
      type="ColumnChart"
      :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>

Add main.js

In this last, just add your new component in App.vue and everything should look something like this:

chart-project/src/components/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

It will help you.

Author : Harsukh Makwana