Create doughnut chart component in Vuejs

Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Install dependencies

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file Doughnut.js

import { Doughnut, mixins } from 'vue-chartjs'

export default {
  extends: Doughnut,  
  mixins: [mixins.reactiveProp],
  name: 'DoughnutChart',
  props: [{
    chartData: {
      type: Object,
      default: null
    options: {
      type: Object,
      default: null
  mounted() {
    this.renderChart(this.chartData, this.options)

Using the component

In the page component we can import component and bind the data, and options.

  <div class="flex-container">
    <DoughnutChart :chartData="chartdata" :options="options" />

// @ is an alias to /src
import DoughnutChart from '@/components/Doughnut'
export default {
  name: "Doughnut",
  components: { DoughnutChart 
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
    options: {
      responsive: true,
      maintainAspectRatio: false

.flex-container {
  display: flex;


A complete set of chart components will be available on Vue-chart-components Repository

Following vue-route post may interest you

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.