diff --git a/README.md b/README.md
index e3c4d54..5b65028 100644
--- a/README.md
+++ b/README.md
@@ -90,12 +90,16 @@ export default {

+### Polar Area
+
+
+
## 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
diff --git a/src/App.vue b/src/App.vue
index f9850d2..73adf07 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@
+
@@ -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 }
}
diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
new file mode 100644
index 0000000..1c5f8bf
--- /dev/null
+++ b/src/BaseCharts/PolarArea.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: 'polarArea',
+ data: data,
+ options: options
+ }
+ )
+ chart.generateLegend()
+ }
+ }
+})
diff --git a/src/assets/polar.png b/src/assets/polar.png
new file mode 100644
index 0000000..e3f99a5
Binary files /dev/null and b/src/assets/polar.png differ
diff --git a/src/examples/PolarAreaExample.js b/src/examples/PolarAreaExample.js
new file mode 100644
index 0000000..2196ddb
--- /dev/null
+++ b/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]
+ }
+ ]
+ })
+ }
+})