How to Implement Google Bar or Column Charts in Vue 2

Vue Bar Chart tutorial; In this tutorial, we will teach you how to integrate column or bar chart in the vue js application using the vue-google-charts plugin, which is based on Google charts.

A column chart is sometimes known as a bar chart, and it eloquently displays data with rectangle bars horizontally or vertically. The height and the 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

Create Vue Environment

Vue development is solely dependent on the VUE CLI tool; it is out of the box and future-rich command-line interface tool, so let us recklessly install it.

npm install -g @vue/cli

Install Vue Js Project

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

You may move to the subsequent section if the app is already downloaded.

vue create vue-charts-app

Move to project folder.

cd vue-charts-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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"
},

Install Vue Google Chart Package

In this step, we need to install the vue google chart package into the vue js app. Head over to command prompt, type command execute to begin installing google chart library.

npm install vue-google-charts

Create and Register Chart Component

In this section, create components/GoogleChart.vue file, then add the following code in the file.

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

Open src/App.vue and define the new component into the file.

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

Add Google Bar/Column Charts in Vue

To create a horizontal column or bar chart containing a few processes, let me show you the pragmatic way to manifest a horizontal column chart in vue. Import chart and call the GChart directive in the vue template.

We have used the static data to display the bar chart in vue, but you can call the HTTP request to get and add the data dynamically in a vue bar chart.

Open and add 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>

Start Vue Application

In the final section, run the vue app using the below command.

npm run serve

Open the app on the browser using below url.

http://localhost:8080

Conclusion

The Vue bar chart example is over; In this tutorial, we have learned how to easily add bar and column charts in the vue app from scratch.

Moreover, this tutorial answered a couple of questions such as how to install the vue app, setup new component and create vue charts component. We hope you liked this tutorial, have a good day.