💎 Release new version 2.7.2

⬆️ Update dependency vue to 2.4.2

CHANGELOG.md

@@ -1,5 +1,77 @@
 # Change Log
 
+## [v2.7.0](https://github.com/apertureless/vue-chartjs/tree/v2.7.0) (2017-07-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.5...v2.7.0)
+
+**Closed issues:**
+
+- Reactive Data Tutorial [\#132](https://github.com/apertureless/vue-chartjs/issues/132)
+- Using inline plugins [\#130](https://github.com/apertureless/vue-chartjs/issues/130)
+- Scatter Chart [\#129](https://github.com/apertureless/vue-chartjs/issues/129)
+- Generating Chart after clicking submit button [\#128](https://github.com/apertureless/vue-chartjs/issues/128)
+- Ticks not working with reactive props [\#127](https://github.com/apertureless/vue-chartjs/issues/127)
+- Error in callback for watcher "chartData": "TypeError: Cannot read property 'data' of undefined" [\#126](https://github.com/apertureless/vue-chartjs/issues/126)
+- Passing the data from vue to chartjs [\#125](https://github.com/apertureless/vue-chartjs/issues/125)
+- Combination of Bar and Line Chart  [\#123](https://github.com/apertureless/vue-chartjs/issues/123)
+- Reactive data example not working [\#122](https://github.com/apertureless/vue-chartjs/issues/122)
+- vue-chartjs height was 0 when i set v-show [\#120](https://github.com/apertureless/vue-chartjs/issues/120)
+- Bar chart, barPercentage in X axis [\#119](https://github.com/apertureless/vue-chartjs/issues/119)
+- update event not firing on data change [\#118](https://github.com/apertureless/vue-chartjs/issues/118)
+
+**Merged pull requests:**
+
+- ✅ Update tests for addPlugin method [\#140](https://github.com/apertureless/vue-chartjs/pull/140) ([apertureless](https://github.com/apertureless))
+- Fix beforeDestory when renderChart was not called [\#139](https://github.com/apertureless/vue-chartjs/pull/139) ([ZhangYiJiang](https://github.com/ZhangYiJiang))
+- Add support for inline plugins [\#137](https://github.com/apertureless/vue-chartjs/pull/137) ([kurbar](https://github.com/kurbar))
+- Feature/scatter chart [\#136](https://github.com/apertureless/vue-chartjs/pull/136) ([apertureless](https://github.com/apertureless))
+- 🐛 Fix \#122 reactive mixin [\#135](https://github.com/apertureless/vue-chartjs/pull/135) ([apertureless](https://github.com/apertureless))
+- 📝 Add resources & tutorials to docs [\#133](https://github.com/apertureless/vue-chartjs/pull/133) ([apertureless](https://github.com/apertureless))
+- fix a typo in an example [\#131](https://github.com/apertureless/vue-chartjs/pull/131) ([JobV](https://github.com/JobV))
+- Update README [\#121](https://github.com/apertureless/vue-chartjs/pull/121) ([stoykostanchev](https://github.com/stoykostanchev))
+
+## [v2.6.5](https://github.com/apertureless/vue-chartjs/tree/v2.6.5) (2017-06-10)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.4...v2.6.5)
+
+## [v2.6.4](https://github.com/apertureless/vue-chartjs/tree/v2.6.4) (2017-06-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.3...v2.6.4)
+
+**Closed issues:**
+
+- Transition leave-active-class not working [\#117](https://github.com/apertureless/vue-chartjs/issues/117)
+- chartOptions reactivity [\#116](https://github.com/apertureless/vue-chartjs/issues/116)
+- Cannot switch off legend [\#114](https://github.com/apertureless/vue-chartjs/issues/114)
+- run error on my mac pro [\#113](https://github.com/apertureless/vue-chartjs/issues/113)
+- Update install instructions in docs [\#112](https://github.com/apertureless/vue-chartjs/issues/112)
+- Typo in docs [\#111](https://github.com/apertureless/vue-chartjs/issues/111)
+- Charts are given a fixed width, even when they are set to be responsive [\#108](https://github.com/apertureless/vue-chartjs/issues/108)
+- Use Reactive Data with \<script\> version of vue-chartjs [\#107](https://github.com/apertureless/vue-chartjs/issues/107)
+
+**Merged pull requests:**
+
+- Fix typo in docs [\#115](https://github.com/apertureless/vue-chartjs/pull/115) ([euledge](https://github.com/euledge))
+- :memo: Add pt-br readme support [\#110](https://github.com/apertureless/vue-chartjs/pull/110) ([kimuraz](https://github.com/kimuraz))
+- Fix reactive mixins animation re-rendering issue. [\#109](https://github.com/apertureless/vue-chartjs/pull/109) ([MuseofMoose](https://github.com/MuseofMoose))
+
+## [v2.6.3](https://github.com/apertureless/vue-chartjs/tree/v2.6.3) (2017-05-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.2...v2.6.3)
+
+**Closed issues:**
+
+- Reactivity of Options [\#106](https://github.com/apertureless/vue-chartjs/issues/106)
+- Do not use built-in or reserved HTML elements as component id: MenuItem [\#104](https://github.com/apertureless/vue-chartjs/issues/104)
+- Is it possible to use with axios? [\#103](https://github.com/apertureless/vue-chartjs/issues/103)
+- How to change momentjs locale for time scale? [\#101](https://github.com/apertureless/vue-chartjs/issues/101)
+- It seems that the reactiveProp couldn't let the chart update itself [\#99](https://github.com/apertureless/vue-chartjs/issues/99)
+- vue-chartjs not working with lodash-webpack-plugin installed [\#97](https://github.com/apertureless/vue-chartjs/issues/97)
+- multi lines with same options [\#95](https://github.com/apertureless/vue-chartjs/issues/95)
+- Zoom And Pan Options in Vue Charts [\#94](https://github.com/apertureless/vue-chartjs/issues/94)
+
+**Merged pull requests:**
+
+- Update README.md [\#105](https://github.com/apertureless/vue-chartjs/pull/105) ([guilherfp](https://github.com/guilherfp))
+- translated README.md into Japanese [\#102](https://github.com/apertureless/vue-chartjs/pull/102) ([euledge](https://github.com/euledge))
+- add CDNJS version badge in README.md [\#100](https://github.com/apertureless/vue-chartjs/pull/100) ([extend1994](https://github.com/extend1994))
+
 ## [v2.6.2](https://github.com/apertureless/vue-chartjs/tree/v2.6.2) (2017-04-29)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.1...v2.6.2)
 
@@ -80,7 +152,7 @@
 
 **Merged pull requests:**
 
-- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/integration/greenkeeper))
+- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/apps/greenkeeper))
 
 ## [v2.5.3](https://github.com/apertureless/vue-chartjs/tree/v2.5.3) (2017-03-17)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.2...v2.5.3)

README.md

@@ -27,7 +27,7 @@
 - v2 later
   - Vue.js 2.x
 
-After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
+After the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm.
 No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
 If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
 
@@ -149,7 +149,7 @@ export default {
 ## Reactivity
 
 Chart.js does not update or re-render the chart if new data is passed.
-However you can simply implement this by your own or use one of the two mixins which are included.
+However you can simply implement this on your own or use one of the two mixins which are included.
 
 - `reactiveProp`
 - `reactiveData`
@@ -247,6 +247,10 @@ export default Line.extend({
 
 ![Bubble](assets/bubble.png)
 
+### Scatter
+
+![Scatter](assets/scatter.png)
+
 ## Build Setup
 
 ``` bash
@@ -269,7 +273,7 @@ npm run e2e
 npm test
 ```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 ## Contributing
 

docs/README.md

@@ -134,7 +134,7 @@ export default Bar.extend({
         ]
       }
     }
-  }
+  },
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
@@ -255,6 +255,26 @@ export default Line.extend({
 
 Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
 
+## Inline plugins
+
+In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described.
+
+If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()`
+You should call `addPlugin()` before the `renderChart()` method.
+
+### Example
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
 ## Available Charts
 
 ### Bar Chart
@@ -287,6 +307,12 @@ Sometimes you need more control over chart.js. Thats why you can access the char
 
 ![Bubble](assets/bubble.png)
 
+### Scatter
+
+This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type.
+
+![Scatter](assets/scatter.png)
+
 
 ## Explanation of Different Builds
 There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
@@ -317,3 +343,13 @@ However Vue.js and Chart.js are `peerDependencies` so you have to install them s
 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
 It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+
+## Resources
+
+You can find here some Resources like tutorials on how to use `vue-chartjs`
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)

docs/de/README.md

@@ -262,30 +262,30 @@ Sometimes you need more control over chart.js. Thats why you can access the char
   There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
 </p>
 
-![Bar](assets/bar.png)
+![Bar](../assets/bar.png)
 ### Line Chart
 
-![Line](assets/line.png)
+![Line](../assets/line.png)
 
 ### Doughnut
 
-![Doughnut](assets/doughnut.png)
+![Doughnut](../assets/doughnut.png)
 
 ### Pie
 
-![Pie](assets/pie.png)
+![Pie](../assets/pie.png)
 
 ### Radar
 
-![Pie](assets/radar.png)
+![Pie](../assets/radar.png)
 
 ### Polar Area
 
-![Pie](assets/polar.png)
+![Pie](../assets/polar.png)
 
 ### Bubble
 
-![Bubble](assets/bubble.png)
+![Bubble](../assets/bubble.png)
 
 ## Webpack, Browserify and dist files.
 

docs/ja/README.md

@@ -264,30 +264,30 @@ export default Line.extend({
   棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
 </p>
 
-![Bar](assets/bar.png)
+![Bar](../assets/bar.png)
 ### 折れ線グラフ
 
-![Line](assets/line.png)
+![Line](../assets/line.png)
 
 ### ドーナツチャート
 
-![Doughnut](assets/doughnut.png)
+![Doughnut](../assets/doughnut.png)
 
 ### パイチャート
 
-![Pie](assets/pie.png)
+![Pie](../assets/pie.png)
 
 ### レーダーチャート
 
-![Pie](assets/radar.png)
+![Pie](../assets/radar.png)
 
 ### 鶏頭図
 
-![Pie](assets/polar.png)
+![Pie](../assets/polar.png)
 
 ### バブルチャート
 
-![Bubble](assets/bubble.png)
+![Bubble](../assets/bubble.png)
 
 
 ## ビルド方法の違い

docs/pt-br/README.md

@@ -221,31 +221,31 @@ export default Line.extend({
 
 ### Gráfico de Barra
 
-![Barra](assets/bar.png)
+![Barra](../assets/bar.png)
 
 ### Gráfico de Linha
 
-![Linha](assets/line.png)
+![Linha](../assets/line.png)
 
 ### Donut
 
-![Donut](assets/doughnut.png)
+![Donut](../assets/doughnut.png)
 
 ### Pizza
 
-![Pizza](assets/pie.png)
+![Pizza](../assets/pie.png)
 
 ### Radar
 
-![Radar](assets/radar.png)
+![Radar](../assets/radar.png)
 
 ### Área Polar
 
-![Área Polar](assets/polar.png)
+![Área Polar](../assets/polar.png)
 
 ### Bolha
 
-![Bolha](assets/bubble.png)
+![Bolha](../assets/bubble.png)
 
 ## Configurações de Build
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.6.4",
+  "version": "2.7.2",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -60,19 +60,19 @@
     "lodash": "^4.17.4"
   },
   "peerDependencies": {
-    "chart.js": "^2.5.0",
-    "vue": "^2.3.3"
+    "chart.js": "^2.6.0",
+    "vue": "^2.4.2"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
+    "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "chai": "^3.5.0",
-    "chart.js": "^2.5.0",
+    "chart.js": "^2.6.0",
     "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
     "cross-env": "^3.2.4",
@@ -117,12 +117,12 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "^2.3.3",
+    "vue": "^2.4.2",
     "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.0.4",
+    "vue-loader": "^12.2.2",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.3.3",
+    "vue-template-compiler": "^2.4.2",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",

src/BaseCharts/Bar.js

@@ -56,24 +56,30 @@ export default Vue.extend({
             barPercentage: 0.2
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Bubble.js

@@ -56,11 +56,15 @@ export default Vue.extend({
             barPercentage: 0.2
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -68,13 +72,15 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'bubble',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Doughnut.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,15 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/HorizontalBar.js

@@ -56,24 +56,30 @@ export default Vue.extend({
             barPercentage: 0.2
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'horizontalBar',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Line.js

@@ -54,11 +54,15 @@ export default Vue.extend({
             }
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -66,13 +70,15 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'line',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Pie.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,15 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/PolarArea.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,15 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Radar.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,15 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
-      this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Scatter.js

@@ -0,0 +1,75 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
+
+  props: {
+    chartId: {
+      default: 'scatter-chart',
+      type: String
+    },
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      defaultOptions: {
+        scales: {
+          xAxes: [{
+            type: 'linear',
+            position: 'bottom'
+          }]
+        }
+      },
+      plugins: []
+    }
+  },
+
+  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
+    renderChart (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'scatter',
+          data: data,
+          options: chartOptions,
+          plugins: this.plugins
+        }
+      )
+    }
+  },
+  beforeDestroy () {
+    if (this._chart) {
+      this._chart.destroy()
+    }
+  }
+})

src/examples/App.vue

@@ -1,21 +1,54 @@
 <template>
   <div class="container">
-    <h1 style="text-align:center;margin:40px 0;">Barchart</h1>
-    <bar-example></bar-example>
-    <h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
-    <reactive-example></reactive-example>
-    <h1 style="text-align:center;margin:40px 0;">Linechart</h1>
-    <line-example></line-example>
-    <h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
-    <doughnut-example></doughnut-example>
-    <h1 style="text-align:center;margin:40px 0;">Piechart</h1>
-    <pie-example></pie-example>
-    <h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
-    <radar-example></radar-example>
-    <h1 style="text-align:center;margin:40px 0;">Polararea</h1>
-    <polar-area-example></polar-area-example>
-    <h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
-    <bubble-example></bubble-example>
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart</h1>
+      <bar-example></bar-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
+      <reactive-example></reactive-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
+      <reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Linechart</h1>
+      <line-example></line-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Doughnutchart</h1>
+      <doughnut-example></doughnut-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Piechart</h1>
+      <pie-example></pie-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Radarchart</h1>
+      <radar-example></radar-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Polararea</h1>
+      <polar-area-example></polar-area-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Bubblechart</h1>
+      <bubble-example></bubble-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Scatter Chart</h1>
+      <scatter-example></scatter-example>
+    </div>
   </div>
 </template>
 
@@ -29,6 +62,7 @@
   import BubbleExample from './BubbleExample'
   import ReactiveExample from './ReactiveExample'
   import ReactivePropExample from './ReactivePropExample'
+  import ScatterExample from './ScatterExample'
 
   export default {
     components: {
@@ -40,7 +74,35 @@
       PolarAreaExample,
       BubbleExample,
       ReactiveExample,
-      ReactivePropExample
+      ReactivePropExample,
+      ScatterExample
+    },
+    data () {
+      return {
+        dataPoints: null
+      }
+    },
+    mounted () {
+      setInterval(() => {
+        this.fillData()
+      }, 2000)
+    },
+    methods: {
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      },
+      fillData () {
+        this.dataPoints = {
+          labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      }
     }
   }
 </script>
@@ -50,4 +112,21 @@
     max-width: 800px;
     margin: 0 auto;
   }
+
+  h1 {
+    font-family: 'Helvetica', Arial;
+    color: #464646;
+    text-transform: uppercase;
+    border-bottom: 1px solid #f1f1f1;
+    padding-bottom: 15px;
+    font-size: 28px;
+    margin-top: 0;
+  }
+
+  .Chart {
+    padding: 20px;
+    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .4);
+    border-radius: 20px;
+    margin: 50px 0;
+  }
 </style>

src/examples/ReactivePropExample.js

@@ -5,6 +5,6 @@ export default BarChart.extend({
   mixins: [reactiveProp],
 
   mounted () {
-    this.renderChart(this.chartData)
+    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/ScatterExample.js

@@ -0,0 +1,52 @@
+import Scatter from '../BaseCharts/Scatter'
+
+export default Scatter.extend({
+  mounted () {
+    this.renderChart({
+      datasets: [{
+        label: 'Scatter Dataset 1',
+        fill: false,
+        borderColor: '#f87979',
+        backgroundColor: '#f87979',
+        data: [{
+          x: -2,
+          y: 4
+        }, {
+          x: -1,
+          y: 1
+        }, {
+          x: 0,
+          y: 0
+        }, {
+          x: 1,
+          y: 1
+        }, {
+          x: 2,
+          y: 4
+        }]
+      },
+      {
+        label: 'Scatter Dataset 2',
+        fill: false,
+        borderColor: '#7acbf9',
+        backgroundColor: '#7acbf9',
+        data: [{
+          x: -2,
+          y: -4
+        }, {
+          x: -1,
+          y: -1
+        }, {
+          x: 0,
+          y: 1
+        }, {
+          x: 1,
+          y: -1
+        }, {
+          x: 2,
+          y: -4
+        }]
+      }]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})

src/index.js

@@ -6,6 +6,7 @@ import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
 import Bubble from './BaseCharts/Bubble'
+import Scatter from './BaseCharts/Scatter'
 import mixins from './mixins/index.js'
 import npmCfg from '../package.json'
 
@@ -19,6 +20,7 @@ const VueCharts = {
   PolarArea,
   Radar,
   Bubble,
+  Scatter,
   mixins
 }
 
@@ -34,5 +36,6 @@ export {
   PolarArea,
   Radar,
   Bubble,
+  Scatter,
   mixins
 }

src/mixins/reactiveData.js

@@ -54,6 +54,8 @@ module.exports = {
             chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
+        } else {
+          this.renderChart(this.chartData, this.options)
         }
       }
     }

src/mixins/reactiveProp.js

@@ -54,6 +54,8 @@ module.exports = {
             chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
+        } else {
+          this.renderChart(this.chartData, this.options)
         }
       }
     }

test/unit/specs/Bar.spec.js

@@ -57,8 +57,28 @@ describe('BarChart', () => {
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0]._chart.chart.ctx).to.equal
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Bubble.spec.js

@@ -61,4 +61,24 @@ describe('BubbleChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Doughnut.spec.js

@@ -61,4 +61,24 @@ describe('DoughnutChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/HorizontalBar.spec.js

@@ -61,4 +61,24 @@ describe('HorizontalBarChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Line.spec.js

@@ -61,4 +61,24 @@ describe('LineChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Pie.spec.js

@@ -60,4 +60,24 @@ describe('PieChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/PolarArea.spec.js

@@ -61,4 +61,24 @@ describe('PolarChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Radar.spec.js

@@ -60,4 +60,24 @@ describe('RadarChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Scatter.spec.js

@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import ScatterChart from 'src/examples/ScatterExample'
+
+describe('ScatterChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
+  it('should render a canvas', () => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#scatter-chart')).not.to.be.an('undefined')
+    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
+    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
+    expect(vm.$el.querySelector('canvas')).to.exist
+  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart, {
+            props: {
+              chartId: 'linechartprop'
+            }
+          }
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
+  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
+})

yarn.lock

@@ -269,20 +269,20 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.1.tgz#8c428564dce1e1f41fb337ec34f4c3b022b5ad83"
+babel-core@^6.1.4, babel-core@^6.24.1, babel-core@^6.25.0, babel-core@~6:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
   dependencies:
     babel-code-frame "^6.22.0"
-    babel-generator "^6.24.1"
+    babel-generator "^6.25.0"
     babel-helpers "^6.24.1"
     babel-messages "^6.23.0"
     babel-register "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-    babylon "^6.11.0"
+    babel-template "^6.25.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
     convert-source-map "^1.1.0"
     debug "^2.1.1"
     json5 "^0.5.0"
@@ -293,13 +293,13 @@ babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-generator@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.1.tgz#e715f486c58ded25649d888944d52aa07c5d9497"
+babel-generator@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
   dependencies:
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
+    babel-types "^6.25.0"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
     lodash "^4.2.0"
@@ -798,6 +798,16 @@ babel-template@^6.24.1:
     babylon "^6.11.0"
     lodash "^4.2.0"
 
+babel-template@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    lodash "^4.2.0"
+
 babel-traverse@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
@@ -812,6 +822,20 @@ babel-traverse@^6.24.1:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
+babel-traverse@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
 babel-types@^6.19.0, babel-types@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
@@ -821,6 +845,15 @@ babel-types@^6.19.0, babel-types@^6.24.1:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
+babel-types@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
 babylon@^6.11.0:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
@@ -829,6 +862,10 @@ babylon@^6.15.0:
   version "6.16.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
 
+babylon@^6.17.2:
+  version "6.17.3"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.3.tgz#1327d709950b558f204e5352587fd0290f8d8e48"
+
 backo2@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
@@ -1086,11 +1123,11 @@ change-case@3.0.x:
     upper-case "^1.1.1"
     upper-case-first "^1.1.0"
 
-chart.js@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.5.0.tgz#fe6e751a893769f56e72bee5ad91207e1c592957"
+chart.js@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.6.0.tgz#308f9a4b0bfed5a154c14f5deb1d9470d22abe71"
   dependencies:
-    chartjs-color "^2.0.0"
+    chartjs-color "^2.1.0"
     moment "^2.10.6"
 
 chartjs-color-string@^0.4.0:
@@ -1099,9 +1136,9 @@ chartjs-color-string@^0.4.0:
   dependencies:
     color-name "^1.0.0"
 
-chartjs-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.0.0.tgz#7f60c7256589b24914814ece757659117381e35b"
+chartjs-color@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
   dependencies:
     chartjs-color-string "^0.4.0"
     color-convert "^0.5.3"
@@ -5670,9 +5707,9 @@ vue-html-loader@^1.2.4:
     loader-utils "^1.0.2"
     object-assign "^4.1.0"
 
-vue-loader@^12.0.4:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.0.4.tgz#bc9385326e3fd6538606454977baa91eacc6e6fd"
+vue-loader@^12.2.2:
+  version "12.2.2"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.2.tgz#2b3a764f27018f975bc78cb8b1f55137548ee2d7"
   dependencies:
     consolidate "^0.14.0"
     hash-sum "^1.0.2"
@@ -5695,9 +5732,9 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.3.tgz#b5bab9ec57309c906b82a78c81a02179dbc2f470"
+vue-template-compiler@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.4.2.tgz#5a45d843f148b098f6c1d1e35ac20c4956d30ad1"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -5706,9 +5743,9 @@ vue-template-es2015-compiler@^1.2.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"
 
-vue@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.3.tgz#d1eaa8fde5240735a4563e74f2c7fead9cbb064c"
+vue@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.4.2.tgz#a9855261f191c978cc0dc1150531b8d08149b58c"
 
 watchpack@^0.2.1:
   version "0.2.9"