Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue radar chart

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

Vue charts can be made with the module VueCharts.

VueCharts is based on Google Charts and it supports more charts like line charts and bar charts.

We create a dataset that we link to a radar chart:

vue radar chart

Radar chart

Simply copy and paste the code below into an html file. All data is defined in the arrays in the app code. To change the chart, simply modify the arrays labels and dataset.

<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-radar :labels="labels" :data="dataset" :bind="true">chartjs-radar>
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 bar chart Vue pie chart →

© vuejsexamples.net - Privacy Policy - Cookie Policy