Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue bar chart

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

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.

<!DOCTYPE html><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