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