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.

<!DOCTYPE html><html class=''>
.container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
padding-top: 10%;
<div id="app">
<section class="container">
<div class="columns">
<div class="column">
<chartjs-bar :labels="labels" :data="dataset" :bind="true"></chartjs-bar>
<script src='//cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>
<script src='//unpkg.com/vue-chartjs@2.6.0/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/hchs-vue-charts@1.2.8'></script>
<script >'use strict';

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.datalabel = '';
this.dataentry = '';

← Vue line chart Vue radar chart →

© vuejsexamples.net - Privacy Policy - Cookie Policy