Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue pie chart

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

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


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

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

methods: {
addData: function addData() {
this.datalabel = '';
this.dataentry = '';

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

© vuejsexamples.net - Privacy Policy - Cookie Policy