✨ Add Polar Area Chart component

README.md

@@ -90,12 +90,16 @@ export default {
 
 ![Pie](src/assets/radar.png)
 
+### Polar Area
+
+![Pie](src/assets/polar.png)
+
 ## Todo
 
 - [x] ~~Implement Bar Chart~~
 - [x] ~~Implement Line Chart~~
 - [x] ~~Implement Radar Chart~~
-- [ ] Implement Polar Area Chart
+- [x] ~~Implement Polar Area Chart~~
 - [x] ~~Implement Pie Chart~~
 - [x] ~~Implement Doughnut Chart~~
 - [ ] Make npm module

src/App.vue

@@ -5,6 +5,7 @@
     <doughnut-example></doughnut-example>
     <pie-example></pie-example>
     <radar-example></radar-example>
+    <polar-area-example></polar-area-example>
   </div>
 </template>
 
@@ -14,9 +15,10 @@
   import DoughnutExample from './examples/DoughnutExample'
   import PieExample from './examples/PieExample'
   import RadarExample from './examples/RadarExample'
+  import PolarAreaExample from './examples/PolarAreaExample'
 
   export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample }
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample }
   }
 </script>
 

src/BaseCharts/PolarArea.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="polar-chart" width=width height=height v-el:canvas></canvas>
+    </div>
+  `,
+
+  props: {
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      options: {
+      }
+    }
+  },
+
+  methods: {
+    render (data, options = this.options) {
+      const chart = new Chart(
+        this.$els.canvas.getContext('2d'), {
+          type: 'polarArea',
+          data: data,
+          options: options
+        }
+      )
+      chart.generateLegend()
+    }
+  }
+})

src/examples/PolarAreaExample.js

@@ -0,0 +1,29 @@
+import PolarAreaChart from '../BaseCharts/PolarArea'
+
+export default PolarAreaChart.extend({
+  ready () {
+    this.render({
+      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+      datasets: [
+        {
+          label: 'My First dataset',
+          backgroundColor: 'rgba(179,181,198,0.2)',
+          pointBackgroundColor: 'rgba(179,181,198,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(179,181,198,1)',
+          data: [65, 59, 90, 81, 56, 55, 40]
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'rgba(255,99,132,0.2)',
+          pointBackgroundColor: 'rgba(255,99,132,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(255,99,132,1)',
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }
+      ]
+    })
+  }
+})