✨ Add chart type Bubble

src/BaseCharts/Bubble.js

@@ -0,0 +1,64 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="bar-chart" width=width height=height ref="canvas"></canvas>
+    </div>
+  `,
+
+  props: {
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      defaultOptions: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            },
+            gridLines: {
+              display: false
+            }
+          }],
+          xAxes: [ {
+            gridLines: {
+              display: false
+            },
+            categoryPercentage: 0.5,
+            barPercentage: 0.2
+          }]
+        }
+      }
+    }
+  },
+
+  methods: {
+    renderChart (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'bubble',
+          data: data,
+          options: chartOptions
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
+  }
+})

src/examples/App.vue

@@ -10,15 +10,16 @@
 </template>
 
 <script>
-  import BarExample from './examples/BarExample'
-  import LineExample from './examples/LineExample'
-  import DoughnutExample from './examples/DoughnutExample'
-  import PieExample from './examples/PieExample'
-  import RadarExample from './examples/RadarExample'
-  import PolarAreaExample from './examples/PolarAreaExample'
+  import BarExample from './BarExample'
+  import LineExample from './LineExample'
+  import DoughnutExample from './DoughnutExample'
+  import PieExample from './PieExample'
+  import RadarExample from './RadarExample'
+  import PolarAreaExample from './PolarAreaExample'
+  import BubbleExample from './BubbleExample'
 
   export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample }
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
   }
 </script>
 

src/examples/BubbleExample.js

@@ -0,0 +1,52 @@
+import BubbleChart from '../BaseCharts/Bubble'
+
+export default BubbleChart.extend({
+  mounted () {
+    this.renderChart({
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [
+            {
+              x: 20,
+              y: 25,
+              r: 5
+            },
+            {
+              x: 40,
+              y: 10,
+              r: 10
+            },
+            {
+              x: 30,
+              y: 22,
+              r: 30
+            }
+          ]
+        },
+        {
+          label: 'Data Two',
+          backgroundColor: '#7C8CF8',
+          data: [
+            {
+              x: 10,
+              y: 30,
+              r: 15
+            },
+            {
+              x: 20,
+              y: 20,
+              r: 10
+            },
+            {
+              x: 15,
+              y: 8,
+              r: 30
+            }
+          ]
+        }
+      ]
+    })
+  }
+})

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