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.

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

<script>
// @ 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
    },
    }

  }
  
};
</script>
<style>
.flex-container {
  display: flex;
}

</style>

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

Following vue-chartjs post may help you build app faster

• Create PolarArea chart component in Vue - How to Create a PolarArea Chart component in Vue using vue-chartjs module
• Create Radar component in Vue - How to Create a Radar Chart component in Vue using vue-chartjs module
• Create Horizontal Bar chart component in Vue - How to Create a HoruzotalBar Chart component in Vue using vue-chartjs module
• Create Scatter chart component in Vue - How to Create a scatter Chart component in Vue using vue-chartjs module
• Create Bubble chart component in Vue - How to Create a bubble Chart component in Vue using vue-chartjs module
• Create Pie chart component in Vue - How to Create a Pie Chart component in Vue using vue-chartjs module
• Create Bar chart component in Vue - How to Create a Bar Chart in Vue using vue-chartjs module
• Create doughnut chart component in Vuejs - How to Create a doughnut chart in Vue using vue-chartjs module
• Create line chart component in Vue - How to Create a LineChart in Vue using vue-chartjs module
• How to create a colorful doughnut in Vuejs - How to create a a colorful doughnut chart in Vuejs