How To Implement Google Bar Chart In Vue Js

Websolutionstuff | Jan-17-2022 | Categories : Laravel VueJs

In this tutorial, we will see how to implement google bar chart in vue js. In vue js perform bar chart tutorial we are using 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. In vue js I will perform google bar chart tutorial.

So, let's see how to use google chart in vue js.

Step 1 : Create Vue Environment

Step 2 : Install Vue Js Project

Step 3 : Install Google Chart Package

Step 4 : Create New Component

Step 5 : Add Google Bar/Column Charts

Step 6 : Start Vue 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 given below command.

vue create vue-js-google-charts

 

 

Step 3 : Installation Package

Now this step, I will install vue-google-charts Package

npm i vue-google-charts

 

Step 4 : Create New Component

Now, Create a new component called App.vue.

chart-project/src/components/App.vue

<template>
  <div id="app">
    <h1 style="padding-left:80px;">How To Implement Google Bar Chart In Vue Js - Websolutionstuff</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 :

Recommended Post
Featured Post
How to Generate Fake Data using Tinker in Laravel 11
How to Generate Fake Data usin...

Hello, laravel web developers! In this article, we'll see how to generate fake data using Tinker in laravel 11....

Read More

May-22-2024

How to Add Toastr Notification in Laravel 11 Example
How to Add Toastr Notification...

Hello developer! In this guide, we'll see how to add toastr notification in laravel 11. Here, we'll di...

Read More

Apr-24-2024

Change Text Color Based On Background Color Using Javascript
Change Text Color Based On Bac...

In this article, we will see a change text color based on background color using javascript. Sometimes we have requ...

Read More

Dec-25-2020

How To Downgrade PHP 8 to 7.4 in Ubuntu
How To Downgrade PHP 8 to 7.4...

As a web developer, I understand the significance of embracing the latest technologies to stay ahead in the dynamic worl...

Read More

Aug-04-2023