Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue pie chart

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

A pie chart can be created with the VueCharts module. The VueChart module is based on Google charts, there are many available charts.

Use the same style of data definition as line and bar chart, but change the tag to:

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

We link the data in the tag (:data=”dataset”, :labels=”label”, :bind=”true”). That is required to display the results.

pie chart

Example

Copy the code below to create a pie chart with VueJS and VueCharts.
All data is defines in JSON format.

<!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-pie :labels="labels" :data="dataset" :bind="true"></chartjs-pie>
</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: ['React', 'Vanilla JS', 'JQuery', 'VueJS'],
dataset: [5, 10, 15, 25]
};
},

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

← Vue radar chart Vue.js + d3.js line chart →

© vuejsexamples.net - Privacy Policy - Cookie Policy