✨ Add Pie Chart component

README.md

@@ -82,13 +82,17 @@ export default {
 
 ![Doughnut](src/assets/doughnut.png)
 
+### Pie
+
+![Pie](src/assets/pie.png)
+
 ## Todo
 
 - [x] Implement Bar Chart
 - [x] Implement Line Chart
 - [ ] Implement Radar Chart
 - [ ] Implement Polar Area Chart
-- [ ] Implement Pie Chart
+- [x] Implement Pie Chart
 - [x] Implement Doughnut Chart
 - [ ] Make npm module
 - [ ] Add tests

src/App.vue

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

src/BaseCharts/Pie.js

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

src/examples/PieExample.js

@@ -0,0 +1,20 @@
+import PieChart from '../BaseCharts/Pie'
+
+export default PieChart.extend({
+  ready () {
+    this.render({
+      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+      datasets: [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    })
+  }
+})