diff --git a/README.md b/README.md
index f7c4fbc8..e3c4d547 100644
--- a/README.md
+++ b/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
diff --git a/src/App.vue b/src/App.vue
index 929db0a6..f9850d2b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
+
@@ -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 }
}
diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
index e69de29b..a5f5eaf1 100644
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.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: 'radar',
+ data: data,
+ options: options
+ }
+ )
+ chart.generateLegend()
+ }
+ }
+})
diff --git a/src/assets/radar.png b/src/assets/radar.png
new file mode 100644
index 00000000..9c427f1c
Binary files /dev/null and b/src/assets/radar.png differ
diff --git a/src/examples/RadarExample.js b/src/examples/RadarExample.js
new file mode 100644
index 00000000..ceba4034
--- /dev/null
+++ b/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]
+ }
+ ]
+ })
+ }
+})