How To Use Google Bar Chart In Vue JS

In this article, we will see how to use google bar chart in Vue js. In vue js, we will perform a google bar chart tutorial. we will use the vue-google-charts plugin. The bar chart is also known as the column chart. A column chart is a vertical bar chart rendered in the browser using SVG or VML, whichever is appropriate for the user's browser. Like all google charts, column charts display tooltips when the user hovers over the data.

For a horizontal version of this chart, see the google bar chart or google column chart. Also, you can make dynamic bar char in Vue js as per your requirements.

So, let's see how to implement the google bar chart in Vue js.

Step 1: Create Vue Environment

Step 2: Install Vue JS Application

Step 3: Install the Google Chart Package

Step 4: Create New Component

Step 5: Add Google Bar Charts

Step 6: Start Vue JS App

 

 
Step 1: Create Vue Environment

Vue CLI is a full system for rapid Vue.js development. The CLI (@vue/cli) is a globally installed npm package and provides the vue command in your terminal.

npm install -g @vue/cli

 

Step 2: Install Vue Js Project

After installing Vue CLI, create a new Vue app using the below command.

vue create vue-js-google-charts

 

 

Step 3: Installation Package

Now, we will install the vue-google-charts Package.

npm i vue-google-charts

 

Step 4: Create New Component

In this step, we will create a new component called App.vue.

chart-project/src/components/App.vue

<template>
  <div id="app">
    <h1 style="padding-left:80px;">How To Use Google Bar Chart In Vue JS - Techsolutionstuff</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: [
        ["Element", "Density"],
        ["Copper", 8.49],
        ["Silver", 10.49],
        ["Gold", 19.30],
        ["Platinum", 21.45],
      ],
      chartOptions: {
        chart: {
          title: "Density of Precious Metals, in g/cm^3",          
        }
      }
    };
  }
};
</script>

 

 

Add main.js just add your new component in App.vue.

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

 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS