Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue bar chart

Related course:
Fullstack Vue: The Complete Guide to Vue.js

The module vue charts (VueCharts) can plot charts. VueCharts is a Google Charts plugin for Vue.js.
In this example we’ll create a bar chart.

Vue bar chart

The example below create a bar chart:
vuejs bar chart

It’s very similar to creating a line chart, simply change chartjs-bar to chartjs-line and vice versa.

The data is defined in JavaScript (labels, dataset). You could get it from a server using an AJAX request, but for this example it’s hard coded.

<html class=''>
<head>
<style>
.container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
padding-top: 10%;
}
style>
head>
<body>
<div id="app">
<section class="container">
<div class="columns">
<div class="column">
<chartjs-bar :labels="labels" :data="dataset" :bind="true">chartjs-bar>
div>
div>
section>
div>
<script src='//cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'>script>
<script src='//unpkg.com/[email protected]/dist/vue-chartjs.full.min.js'>script>
<script src='//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js'>script>
<script src='//unpkg.com/[email protected]'>script>
<script >'use strict';

Vue.use(VueCharts);
var app = new Vue({
el: '#app',
data: function data() {
return {
dataentry: null,
datalabel: null,
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September' , 'October', 'November', 'December'],
dataset: [5, 10, 15, 25, 45, 70, 115, 185, 70, 75, 70, 60]
};
},

methods: {
addData: function addData() {
this.dataset.push(this.dataentry);
this.labels.push(this.datalabel);
this.datalabel = '';
this.dataentry = '';
}
}
});
script>
body>
html>


← Vue line chart Vue radar chart →

© vuejsexamples.net - Privacy Policy - Cookie Policy