VueJs - Google Column Chart with Example

Hi Guys,

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


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 Column 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: [
        ["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"

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

It will help you....