Google Bar Chart with Example VueJs

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

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

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 bar Charts Example - nicesnippets.com</h1>
    <GChart
      type="BarChart"
      :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: [
        ["Language", "Blog"],
        ["PHP", 180],
        ["Laravel", 200],
        ["Html", 100],
        ["vue.js", 150],
      ],
      chartOptions: {
        chart: {
          title: "Company Performance",
          subtitle: "blog in total: languages"
        }
      }
    };
  }
};
</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')

i hope you like this article.

Author : Harsukh Makwana