Create PolarArea chart component in Vue

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.

Create Polar Chart component

In-order to use Chartjs and create bubble chart 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 PolarAreaChart.js

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

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

We have used a mixin which combine the reactive props and PolarArea from the vue-chartjs module.

Using the component

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

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

// @ is an alias to /src
import PolarAreaChart from '@/components/PolarAreaChart'
export default {
  name: "PolarArea",
  components: { PolarAreaChart 
  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-chartjs post may help you build app faster

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.