Merge pull request #9 from jcalonso/feature/bubble-chart

Add bubble chart type

src/BaseCharts/Bubble.js

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
+
+  props: {
+    chartId: {
+      default: 'bubble-chart',
+      type: String
+    },
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      defaultOptions: {
+      }
+    }
+  },
+
+  methods: {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$els.canvas.getContext('2d'), {
+          type: 'bubble',
+          data: data,
+          options: chartOptions
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
+  }
+})

src/index.js

@@ -4,6 +4,7 @@ import Line from './BaseCharts/Line'
 import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
+import Bubble from './BaseCharts/Bubble'
 
 const VueCharts = {
   Bar,
@@ -11,7 +12,8 @@ const VueCharts = {
   Line,
   Pie,
   PolarArea,
-  Radar
+  Radar,
+  Bubble
 }
 
 module.exports = VueCharts