Vue 2 Tutorial- How To Implement Google Bar Or Column Charts In Vue 2

Vue Bar Chart Tutorial; In this Vue guide, we will get to know how to implement a column or bar chart in a Vue Js application. For that, we would be using the vue-google-charts plugin.

A Column Chart is also sometimes known as a Bar Chart. It displays data with rectangle bars horizontally or vertically. The height and length of the bar chart are similar to the values they express.

 

Vue Js Google Bar And Column Charts Integration Example

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

The very basic step for starting with the implementation is just to install Vue CLI. We will be creating a new Vue app using the below- given commands which would install Vue CLI, download the app, and step inside the app:

npm install -g @vue/cli

Step 2- Install Vue Js Project

Since we have already installed Vue CLI, now we will create a new Vue app using the given command:

vue create vue-charts-app

 

Afterward, we move to the project folder:

cd vue-charts-app

 

 

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

 

To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

 

Step 3- Install Vue Google Chart Package

In this step, we will see how to install the Vue Google Chart package into the Vue js app. We need to head over to the command prompt and type the following command in order to install the Google Charts Library:

npm install vue-google-charts

 

Step 4- Create And Register Chart Component

Here, we will be knowing how to create components/GoogleChart.vue file. Then, we would add the following code to the file:

<template>
  <div>
     
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
  
    };
  }
};
</script>

 

Further, we need to open the src/App.vue file and register the new component:

<template>
  <div class="container mt-5 text-center">
    <GoogleChart />
  </div>
</template>
<script>
import GoogleChart from './components/GoogleChart.vue'
export default {
  name: 'App',
  components: {
    GoogleChart
  }
}
</script>

Step 5- Add Google Bar/Column Chart In Vue

Here, in this step, we will be adding the following code in src/components/GoogleChart.vue file:

<template>
  <div>
    <h2>Vue Js Google Column or Bar Chart Demo</h2>
    <GChart
      type="ColumnChart"
      :options="options"
      :data="data"
    />    
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      data: [
         ['Element', 'Density', { role: 'style' }],
         ['Print Media', 9.95, '#6B58E2'],
         ['Social Media', 55.55, '#00B28F'],
         ['Brodcast Media', 52.99, '#F8D12F'],
         ['Outdoor', 30.55, 'color: #e5e4e2' ],
         ['Internet', 45.21, 'color: #4E6973' ]
      ],
      options: {
        width: 1100,
        height: 400
      }
    };
  }
};
</script>

 

Step 6- Start Vue Application

We have to use this npm command in order to start the Vue app:

npm run serve

 

Conclusion

So, friends, we have reached the end of this Vue Bar Chart Example in which we have learned to easily integrate the Bar and Column Chart into a Vue app.

 

Thanks