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
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
After installing Vue CLI, create a new vue app using the given below command.
vue create vue-js-google-charts
Now this step, I will install vue-google-charts Package
npm i vue-google-charts
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 :
In this article, we will see the angular 13 crop image before uploading with a preview. we will give you a sim...
May-10-2022
In this article, we will see the date range filter in the datatable jquery example. Many times we required data of ...
Nov-14-2022
Hey there! If you're diving into PHP development on Ubuntu 22.04 and need to connect your applications to MySQL data...
Feb-28-2024
In this article, we will see laravel 9 socialite login with a facebook account. Many websites provide different typ...
Apr-16-2022