diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js
new file mode 100644
index 0000000..ce35752
--- /dev/null
+++ b/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: `
+
+
+
+ `,
+
+ 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()
+ }
+})
diff --git a/src/examples/App.vue b/src/examples/App.vue
index 73adf07..0317410 100644
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -10,15 +10,16 @@
diff --git a/src/examples/BubbleExample.js b/src/examples/BubbleExample.js
new file mode 100644
index 0000000..06a0311
--- /dev/null
+++ b/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
+ }
+ ]
+ }
+ ]
+ })
+ }
+})
diff --git a/src/index.js b/src/index.js
index edf86a9..7740349 100644
--- a/src/index.js
+++ b/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