Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue line chart

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

You can create a line chart with the module vue charts (VueCharts). VueCharts is a Google Charts plugin for Vue.js.

In this example we create a line chart, but many types of charts can be created.

Line chart example

The example below creates a line chart using VueCharts. The final result will look like the chart below:

vue line chart

You can make this with a single html file.

We include:

<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>

It is mandatory to bind the chart to the data, that is done with this line:

<chartjs-line :labels="labels" :data="dataset" :bind="true">chartjs-line>

All data is defined in JavaScript (dataset, labels).

The full code below:

<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-line :labels="labels" :data="dataset" :bind="true">chartjs-line>
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>


← FullCalendar Vue Component Vue bar chart →

© vuejsexamples.net - Privacy Policy - Cookie Policy