VueJs - Google Bar Chart with Example

Hi Guys,

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 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


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


  <div id="app" style="width:70%;">
    <h1 style="padding-left:80px;">Vue Js Google bar Charts Example -</h1>

import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
  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"

Add main.js

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


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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),

i hope you like this article.