✨ Add Radar Chart component

README.md

@@ -86,14 +86,18 @@ export default {
 
 ![Pie](src/assets/pie.png)
 
+### Radar
+
+![Pie](src/assets/radar.png)
+
 ## Todo
 
-- [x] Implement Bar Chart
-- [x] Implement Line Chart
-- [ ] Implement Radar Chart
+- [x] ~~Implement Bar Chart~~
+- [x] ~~Implement Line Chart~~
+- [x] ~~Implement Radar Chart~~
 - [ ] Implement Polar Area Chart
-- [x] Implement Pie Chart
-- [x] Implement Doughnut Chart
+- [x] ~~Implement Pie Chart~~
+- [x] ~~Implement Doughnut Chart~~
 - [ ] Make npm module
 - [ ] Add tests
 

src/App.vue

@@ -4,6 +4,7 @@
     <line-example></line-example>
     <doughnut-example></doughnut-example>
     <pie-example></pie-example>
+    <radar-example></radar-example>
   </div>
 </template>
 
@@ -12,9 +13,10 @@
   import LineExample from './examples/LineExample'
   import DoughnutExample from './examples/DoughnutExample'
   import PieExample from './examples/PieExample'
+  import RadarExample from './examples/RadarExample'
 
   export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample }
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample }
   }
 </script>
 

src/BaseCharts/Radar.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="radar-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: 'radar',
+          data: data,
+          options: options
+        }
+      )
+      chart.generateLegend()
+    }
+  }
+})

src/examples/RadarExample.js

@@ -0,0 +1,31 @@
+import RadarChart from '../BaseCharts/Radar'
+
+export default RadarChart.extend({
+  ready () {
+    this.render({
+      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+      datasets: [
+        {
+          label: 'My First dataset',
+          backgroundColor: 'rgba(179,181,198,0.2)',
+          borderColor: 'rgba(179,181,198,1)',
+          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)',
+          borderColor: 'rgba(255,99,132,1)',
+          pointBackgroundColor: 'rgba(255,99,132,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(255,99,132,1)',
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }
+      ]
+    })
+  }
+})