Google Bar Chart with Example VueJs

  351 views   11 months ago 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
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]