diff --git a/README.md b/README.md
index 4ff28baa..f7c4fbc8 100644
--- a/README.md
+++ b/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
diff --git a/src/App.vue b/src/App.vue
index 45e7a0dc..929db0a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
+
@@ -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 }
}
diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
index e69de29b..4eb89af5 100644
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+
+export default Vue.extend({
+ template: `
+
+
+
+ `,
+
+ 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()
+ }
+ }
+})
diff --git a/src/assets/pie.png b/src/assets/pie.png
new file mode 100644
index 00000000..b70ba62a
Binary files /dev/null and b/src/assets/pie.png differ
diff --git a/src/examples/PieExample.js b/src/examples/PieExample.js
new file mode 100644
index 00000000..341334d3
--- /dev/null
+++ b/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]
+ }
+ ]
+ })
+ }
+})