💎 Release new version 2.8.6

Replace Object.assign with deepmerge

CHANGELOG.md

@@ -1,5 +1,161 @@
 # Change Log
 
+## [v2.8.5](https://github.com/apertureless/vue-chartjs/tree/v2.8.5) (2017-09-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.4...v2.8.5)
+
+**Closed issues:**
+
+- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
+- Chart error since the addition of deepmerge in build 2.8.4 [\#192](https://github.com/apertureless/vue-chartjs/issues/192)
+
+## [v2.8.4](https://github.com/apertureless/vue-chartjs/tree/v2.8.4) (2017-09-08)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.3...v2.8.4)
+
+**Closed issues:**
+
+- Regression in 2.8.3 [\#190](https://github.com/apertureless/vue-chartjs/issues/190)
+- Why default Chart.js styles are overridden? [\#189](https://github.com/apertureless/vue-chartjs/issues/189)
+- Legend or other options not working in reactiveProps [\#188](https://github.com/apertureless/vue-chartjs/issues/188)
+- Changes to yAxisID property does not re-render chart [\#177](https://github.com/apertureless/vue-chartjs/issues/177)
+
+**Merged pull requests:**
+
+- Replace Object.assign with deepmerge [\#191](https://github.com/apertureless/vue-chartjs/pull/191) ([apertureless](https://github.com/apertureless))
+
+## [v2.8.3](https://github.com/apertureless/vue-chartjs/tree/v2.8.3) (2017-09-06)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.2...v2.8.3)
+
+**Closed issues:**
+
+- Rounded corner for Bar chart [\#185](https://github.com/apertureless/vue-chartjs/issues/185)
+- Access canvas object from parents [\#184](https://github.com/apertureless/vue-chartjs/issues/184)
+- Issue with DonutChart in Safari [\#183](https://github.com/apertureless/vue-chartjs/issues/183)
+- Responsive Width, Fixed Height [\#180](https://github.com/apertureless/vue-chartjs/issues/180)
+- Entire Lodash Library Is Loaded!! 200kb chunk!  [\#179](https://github.com/apertureless/vue-chartjs/issues/179)
+- height changed unexpectedly after re-rendering [\#178](https://github.com/apertureless/vue-chartjs/issues/178)
+- Default height no longer working in 2.8 [\#176](https://github.com/apertureless/vue-chartjs/issues/176)
+- how to get click on point in bar chart? [\#175](https://github.com/apertureless/vue-chartjs/issues/175)
+- clean install of from npm cannot be used in gulp / browserify [\#174](https://github.com/apertureless/vue-chartjs/issues/174)
+- tooltip callbacks possible? [\#173](https://github.com/apertureless/vue-chartjs/issues/173)
+- Computed object won't populate chart [\#170](https://github.com/apertureless/vue-chartjs/issues/170)
+- Error in nextTick: "RangeError: Maximum call stack size exceeded" [\#169](https://github.com/apertureless/vue-chartjs/issues/169)
+- Standalone chartjs build \(don't include moment.js\) [\#124](https://github.com/apertureless/vue-chartjs/issues/124)
+
+**Merged pull requests:**
+
+- 🔥 Remove default styles object as it causes problems [\#187](https://github.com/apertureless/vue-chartjs/pull/187) ([apertureless](https://github.com/apertureless))
+- remvove lodash merge [\#186](https://github.com/apertureless/vue-chartjs/pull/186) ([apertureless](https://github.com/apertureless))
+
+## [v2.8.2](https://github.com/apertureless/vue-chartjs/tree/v2.8.2) (2017-08-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.1...v2.8.2)
+
+**Closed issues:**
+
+- UNMET PEER DEPENDENCY [\#167](https://github.com/apertureless/vue-chartjs/issues/167)
+- Base Charts' height: 200% [\#164](https://github.com/apertureless/vue-chartjs/issues/164)
+
+**Merged pull requests:**
+
+- Add support for xLabels and yLabels [\#166](https://github.com/apertureless/vue-chartjs/pull/166) ([dsbert](https://github.com/dsbert))
+- Update README.md [\#165](https://github.com/apertureless/vue-chartjs/pull/165) ([mikeybeck](https://github.com/mikeybeck))
+
+## [v2.8.1](https://github.com/apertureless/vue-chartjs/tree/v2.8.1) (2017-08-05)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.0...v2.8.1)
+
+**Merged pull requests:**
+
+- Add Russian documentation [\#163](https://github.com/apertureless/vue-chartjs/pull/163) ([dood-](https://github.com/dood-))
+
+## [v2.8.0](https://github.com/apertureless/vue-chartjs/tree/v2.8.0) (2017-08-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.2.0...v2.8.0)
+
+**Closed issues:**
+
+- Update README CDN link [\#161](https://github.com/apertureless/vue-chartjs/issues/161)
+- Options being ignored [\#160](https://github.com/apertureless/vue-chartjs/issues/160)
+- Fails to dynamically change height. [\#158](https://github.com/apertureless/vue-chartjs/issues/158)
+- Chart doesn't load in bootstrap tab [\#157](https://github.com/apertureless/vue-chartjs/issues/157)
+- Add scatter chart to vue-chatjs@legacy [\#155](https://github.com/apertureless/vue-chartjs/issues/155)
+- \[Error\] Get error when $destroy is started. [\#149](https://github.com/apertureless/vue-chartjs/issues/149)
+
+**Merged pull requests:**
+
+- Feature/dynamic styles [\#162](https://github.com/apertureless/vue-chartjs/pull/162) ([apertureless](https://github.com/apertureless))
+- Add Chinese simplified docs support. [\#159](https://github.com/apertureless/vue-chartjs/pull/159) ([Mooooooon](https://github.com/Mooooooon))
+
+## [v1.2.0](https://github.com/apertureless/vue-chartjs/tree/v1.2.0) (2017-07-25)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.2...v1.2.0)
+
+**Closed issues:**
+
+- this.$refs doesn't seem to have expected canvas property [\#156](https://github.com/apertureless/vue-chartjs/issues/156)
+
+**Merged pull requests:**
+
+- Before destroy fix [\#152](https://github.com/apertureless/vue-chartjs/pull/152) ([DenisLapi](https://github.com/DenisLapi))
+
+## [v2.7.2](https://github.com/apertureless/vue-chartjs/tree/v2.7.2) (2017-07-22)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.1...v2.7.2)
+
+**Closed issues:**
+
+- Accessibility - Add unique titles to frames [\#150](https://github.com/apertureless/vue-chartjs/issues/150)
+- update\(\) not refreshing chart [\#148](https://github.com/apertureless/vue-chartjs/issues/148)
+- Custome label y axis [\#147](https://github.com/apertureless/vue-chartjs/issues/147)
+- Access specific points on the canvas and labels for styling [\#146](https://github.com/apertureless/vue-chartjs/issues/146)
+- legendCallback\(\) doesn't render a custom legend [\#144](https://github.com/apertureless/vue-chartjs/issues/144)
+- where can i get the demo sources code? thanks [\#143](https://github.com/apertureless/vue-chartjs/issues/143)
+- Props not works as expected, updating of value doesn't work [\#138](https://github.com/apertureless/vue-chartjs/issues/138)
+
+**Merged pull requests:**
+
+- ⬆️ Update dependency vue to 2.4.2 [\#154](https://github.com/apertureless/vue-chartjs/pull/154) ([apertureless](https://github.com/apertureless))
+- Remove useless labels [\#153](https://github.com/apertureless/vue-chartjs/pull/153) ([clarkdo](https://github.com/clarkdo))
+- :pencil2: Remove generateLegend\(\)  from initialization codes [\#145](https://github.com/apertureless/vue-chartjs/pull/145) ([k-rumi](https://github.com/k-rumi))
+
+## [v2.7.1](https://github.com/apertureless/vue-chartjs/tree/v2.7.1) (2017-07-05)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.0...v2.7.1)
+
+**Closed issues:**
+
+- Default backgroundColor needed [\#142](https://github.com/apertureless/vue-chartjs/issues/142)
+
+**Merged pull requests:**
+
+- Fix links to images in translated documents [\#141](https://github.com/apertureless/vue-chartjs/pull/141) ([k-rumi](https://github.com/k-rumi))
+
+## [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)
 
@@ -30,7 +186,6 @@
 - 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)
-- Why do I need both vue-chartjs chart.js? [\#98](https://github.com/apertureless/vue-chartjs/issues/98)
 - 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)

README.md

@@ -27,9 +27,9 @@
 - 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)
+If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.x)
 
 ## Install
 
@@ -38,7 +38,7 @@ Simply run `yarn add vue-chartjs chart.js`
 Or if you want to use it directly in the browser add
 
 ```html
-<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
+<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.full.min.js"></script>
 ```
 to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
 
@@ -66,7 +66,7 @@ You can use `vue-chartjs` directly in the browser without any build setup. Like
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+However Vue.js and Chart.js are `peerDependencies` so you have to install them separately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
 
 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
@@ -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

@@ -71,7 +71,8 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 | width | chart width |
 | height | chart height |
 | chart-id | id of the canvas |
-
+| css-classes | String with css classes for the surrounding div |
+| styles | Object with css styles for the surrounding div container |
 
 ## Examples
 
@@ -134,7 +135,7 @@ export default Bar.extend({
         ]
       }
     }
-  }
+  },
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
@@ -176,7 +177,8 @@ export default Line.extend({
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
-    // this.chartData is created in the mixin
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
 })
@@ -255,6 +257,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 +309,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 +345,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/config.js

@@ -2,7 +2,9 @@ const langs = [
   {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
   {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
   {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
-  {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}
+  {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
+  {title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
+  {title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
 ]
 
 docute.init({
@@ -37,7 +39,7 @@ docute.init({
       apiKey: 'b3544f7387612693644777553675d56a',
       indexName: 'vue-chartjs',
       // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de', 'ja', 'pt-br'],
+      tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
       // this plugin does require a url too
       // where docsearch fetches contents
       url: 'https://vue-chartjs.org'

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
 

docs/ru/README.md

@@ -0,0 +1,294 @@
+---
+search: ru
+---
+
+<div align="center">
+  <img width="256" heigth="256" src="../../assets/vue-chartjs.png" alt="vue-chartjs logo">
+</div>
+
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
+[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
+[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
+[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
+[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
+[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
+[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
+
+# vue-chartjs
+
+**vue-chartjs** обертка для [Chart.js](https://github.com/chartjs/Chart.js) в vue. Вы можете с легкостью создавать многоразовые компоненты диаграмм.
+
+## Демо & Документация
+
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)
+
+### Совместимость
+
+- v1 later `@legacy`
+  - Vue.js 1.x
+- v2 later
+  - Vue.js 2.x
+
+После филнального выпуска vue.js 2, вы получите v2 по умолчанию, если установите vue-chartjs через npm.
+Больше нет необходимости в @next теге. Если вы нуждаетесь в v1, вам необходимо указать версию или использовать legacy тег.
+Если вы ищите v1, проверьте эту [ветку](https://github.com/apertureless/vue-chartjs/tree/release/1.x).
+
+## Установка
+
+Просто выполните `yarn add vue-chartjs chart.js`
+
+В случаи если вы хотите использовать библиотеку прямо в браузере, добавьте
+
+```html
+<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
+```
+в ваши скрипты. Смотрите [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+
+## Описание различий сборок
+
+Существует три различные точки входа. Это зависит от того, какая сборка стоит у вас. Зависимости собираются или подключаются как peerDependency.
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### Браузер
+Вы можете использовать `vue-chartjs` прямо в браузере без установки каких-либо сборок. Пример на [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). В этом случаи, пожалуйста, используйте `vue-chartjs.full.min.js`. Это минифицированноая версиея библиотеки, содержащая Vue.js и Chart.js в себе, с возможностью подключения при помощи UMD Module. Таким образом, вам необходим лишь один файл.
+
+
+### Browserify / Webpack 1
+
+Если вы используете Gulp, Browserify или Webpack 1, входная точка находится в `vue-chartjs.js`. Она __транслируется__ и __собирается__ при помощи UMD Module.
+
+Однако Vue.js и Chart.js является `peerDependencies`, поэтому вы можете устанавливать их отдельно. В большинстве проектов вы в любом случаи будете иметь установленный `Vue.js`. В этом случаи, вы можете иметь различные версии Vue.js и Chart.js.
+
+### Webpack 2
+Если вы используете Webpack 2, он будет автоматически использовать `jsnext:main` / `module` в качестве входной точки, которая расположена в `es/index.js`.
+Это транслированная es версия кода, которая не __собирается__ в модуль. Таким образом, three shaking будет работать.
+Как и в собранной версии, `Vue.js` и `Chart.js` являются `peerDependencies` и не нуждаются в установке.
+
+
+## Как использовать
+
+Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource. 
+
+Вы можете импортировать весь проект или каждый модуль по отдельности.
+
+```javascript
+import VueCharts from 'vue-chartjs'
+import { Bar, Line } from 'vue-chartjs'
+```
+
+Просто создайте ваш собственный компонент.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Переопределение базового рендер метода с реальными данными.
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    })
+  }
+})
+```
+
+Затем просто импортируйте и используйте ваши собственные расширенные компоненты как обычные vue компоненты.
+
+```javascript
+import CommitChart from 'path/to/component/CommitChart'
+```
+
+## Другой пример с options
+
+Вы можете переопределить стандартные опции графика. Просто передайте объект с опциями в качестве второго параметра в рендер метод.
+
+```javascript
+// MonthlyIncome.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+Используйте это в вашем vue приложении
+
+```javascript
+import MonthlyIncome from 'path/to/component/MonthlyIncome'
+
+<template>
+  <monthly-income :data={....} />
+</template>
+
+<script>
+export default {
+  components: { MonthlyIncome },
+  ....
+}
+</script>
+```
+
+## Реактивность
+
+Chart.js не обновляет и не перерисовывает диаграмму при передаче новых данных.
+Впрочем, вы можете реализовать это самостоятельно или использовав один из двух подключенных миксинов:
+
+- `reactiveProp`
+- `reactiveData`
+
+Оба включены в `mixins` модуль.
+
+Миксины автоматически создают `chartData` в виде prop или data. И добавляют watcher. Если данные были измененны, график обновится.
+Но помните про ограничение vue и javascript на изменений массивов и объектов. Больше информации можно получить [здесь](http://vue-chartjs.org/#/home?id=reactive-data)
+
+```javascript
+// MonthlyIncome.js
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
+### Mixins модуль
+Модуль `mixins` включен в `VueCharts`, а также доступен в виде отдельного модуля.
+Несколько способов импортировать их:
+
+```javascript
+// Load complete module with all charts
+import VueCharts from 'vue-chartjs'
+
+export default VueCharts.Line.extend({
+  mixins: [VueCharts.mixins.reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules with destructure assign
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+## Доступные диаграммы
+
+### Bar Chart
+
+![Bar](../assets/bar.png)
+
+### Line Chart
+
+![Line](../assets/line.png)
+
+### Doughnut
+
+![Doughnut](../assets/doughnut.png)
+
+### Pie
+
+![Pie](../assets/pie.png)
+
+### Radar
+
+![Pie](../assets/radar.png)
+
+### Polar Area
+
+![Pie](../assets/polar.png)
+
+### Bubble
+
+![Bubble](../assets/bubble.png)
+
+### Scatter
+
+![Scatter](../assets/scatter.png)
+
+## Настройка сборки
+
+``` bash
+# инициализация зависимостей
+npm install
+
+# сборка с горячей заменой на localhost:8080
+npm run dev
+
+# сборка для production с минификацией
+npm run build
+
+# запуск unit тестов
+npm run unit
+
+# запуск e2e тестов
+npm run e2e
+
+# запуск всех тестов
+npm test
+```
+
+Для детальных объяснений того, как это работает, перейдите в [руководство](http://vuejs-templates.github.io/webpack/) и [документацию для vue-loader](http://vuejs.github.io/vue-loader).
+
+## Contributing
+
+1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request
+
+## License
+
+This software is distributed under [MIT license](LICENSE.txt).

docs/zh-cn/README.md

@@ -0,0 +1,358 @@
+---
+search: zh-cn
+---
+
+# vue-chartjs
+**vue-chartjs** 是基于 vue 的 [Chart.js](https://github.com/chartjs/Chart.js) 封装。你可以轻松的创建可复用的图表组件。
+
+## 简介
+`vue-chartjs` 让你在 vue 中使用 chart.js 省去很多麻烦。非常适合需要快速生成简单图表的人。
+
+它抽象化了基本逻辑但提供了非常灵活的 chart.js 对象。
+
+## 安装
+如果你正在使用 Vue.js 2.x 的版本，只需要运行：
+
+`yarn add vue-chartjs chart.js`
+
+如果你正在使用 Vue.js 1.x 的版本，请使用 `legacy` 标签。然而这个版本已经不再维护了。
+
+`yarn add vue-chartjs@legacy`
+
+## 快速开始
+
+你需要引入基本图表并且扩展它。这在处理不同的数据时提供了更多的灵活性。
+
+你可以封装您的组件，并使用 props 来传递数据。或者直接将数据放入组件中，但是这样做组件就不能复用了。
+
+你可以加载整个包或者按需加载。
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart(data, options)
+  }
+})
+```
+
+你可以给 `renderChart()` 方法传递两个参数：
+
+- Data object
+- Options object
+
+### 数据对象
+
+数据对象如下所示：
+
+```javascript
+{
+  labels: ['January', 'February'],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20]
+    }
+  ]
+}
+```
+
+详细信息请查阅 [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) 的文档。
+
+## 属性
+
+基本图表中定义了一些属性。因为你 `extend()` 了它们，他们使用 *初始值*，但是你可以覆盖它们：
+
+| 属性 | 说明 |
+|---|---|
+| width | 图表宽度 |
+| height | 图表高度 |
+| chart-id | canvas的id |
+
+
+## 实例
+
+下面是一些实例。
+
+### 图表和属性
+
+你可以创建数据和选项传递给图表。
+
+```javascript
+// LineChart.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+然后你可以把它作为组件使用。
+
+```html
+ <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+```
+
+如果你想要覆盖宽度和高度：
+
+```html
+ <line-chart
+  :data="{your data object}"
+  :options="{responsive: false, maintainAspectRatio: false}"
+  :width="400"
+  :height="200"
+  >
+ </line-chart>
+```
+
+<p class="warning">
+  请注意，你必须设置 `responsive: false` 才可以使用 `width` 和 `height`。
+</p>
+
+### 使用本地数据创建图表
+
+```javascript
+import {Bar} from 'vue-chartjs'
+
+export default Bar.extend({
+  data () {
+    return {
+      datacollection: {
+        labels: ['January', 'February'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20]
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
+  }
+})
+```
+
+### 可复用的组件
+
+如果你希望你的组件可以复用，那么你最好封装它们。这样图表组件只是负责显示你封装的数据。单页应用和集成到 laravel 中有不同的使用方式。
+
+## 动态数据
+
+Chart.js 并不提供实时更新，然而 `vue-chartjs` 提供了两种方式。
+
+- `reactiveProp`
+- `reactiveData`
+
+两种方式其实是一样的。多部分情况会使用 `reactiveProp`。它扩展了图表逻辑并且自动添加 `chartData` props 和 `vue watch`。当数据改变，它将会调用 `update()`。当添加了新的数据集，将会调用 `renderChart()`。
+
+`reactiveData` 只是创建了本地变量并且添加到 watcher，而不是 prop，他只用在你创建单一图表并且在组件创建 api 的时候。
+
+```javascript
+data () {
+  return {
+    chartData: null
+  }
+}
+```
+
+### 实例
+
+**LineChart.js**
+```javascript
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+**RandomChart.vue**
+
+```javascript
+<template>
+  <div class="small">
+    <line-chart :chart-data="datacollection"></line-chart>
+    <button @click="fillData()">Randomize</button>
+  </div>
+</template>
+
+<script>
+  import LineChart from './LineChart.js'
+
+  export default {
+    components: {
+      LineChart
+    },
+    data () {
+      return {
+        datacollection: null
+      }
+    },
+    mounted () {
+      this.fillData()
+    },
+    methods: {
+      fillData () {
+        this.datacollection = {
+          labels: [this.getRandomInt(), this.getRandomInt()],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }, {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      },
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      }
+    }
+  }
+</script>
+
+<style>
+  .small {
+    max-width: 600px;
+    margin:  150px auto;
+  }
+</style>
+```
+
+<p class="warning">
+  ⚠ 注意：如果在父组件中修改数据并将数据传递给子图表组件时，请注意 JavaScript 的限制。
+  更多信息请查阅 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
+</p>
+
+### 限制
+  <ul>
+    <li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
+    <li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
+    <li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
+  </ul>
+
+## Chart.js 对象
+
+有时你需要更多的调整 chart.js。你可以访问 `this._chart` 实例。
+
+## 内联插件
+
+在 Chart.js 你可以定义全局和内联插件。全局插件在 `vue-chartjs` 中没有问题，参照 [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) 的说明。
+
+如果你想添加内联插件 `vue-chartjs` 提供了一个方法 `addPlugin()`
+
+你必须在 `renderChart()` 之前调用 `addPlugin()` 方法。
+
+### 实例
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
+## 支持的图表
+
+### 柱状图
+
+<p class="tip">
+  柱状图有两个版本。 `{Bar}` 和 `{HorizontalBar}`
+</p>
+
+![Bar](assets/bar.png)
+
+### 折线图
+
+![Line](assets/line.png)
+
+### 环形图
+
+![Doughnut](assets/doughnut.png)
+
+### 饼图
+
+![Pie](assets/pie.png)
+
+### 雷达图
+
+![Pie](assets/radar.png)
+
+### 极坐标
+
+![Pie](assets/polar.png)
+
+### 热点图
+
+![Bubble](assets/bubble.png)
+
+### 散点图
+
+这个图表有不同的数据结构。目前动态数据不适用于此图表类型。
+
+![Scatter](assets/scatter.png)
+
+
+## 不同构建工具的说明
+有三种不同的切入点，取决于你用哪种构建工具。作为 dependencies 或者 peerDependency。
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### 浏览器
+你可以在浏览中直接使用 `vue-chartjs`。像是 [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010) 这种情况，请使用 `vue-chartjs.full.min.js` 捆绑版本。他将 Vue.js 和 Chart.js 绑定在了一起，你只需要一个文件。
+
+
+### Browserify / Webpack 1
+
+如果你使用 Gulp, Browserify 或者 Webpack 1，`vue-chartjs.js` 被捆绑到 UMD 模块。
+
+然而 Vue.js 和 Chart.js 是 `peerDependencies` 所以你需要独立安装它们。 大部分情况下你已经安装了 `Vue.js`，你可以使用不同版本的 Vue.js 和 Chart.js。
+
+### Webpack 2
+如果你使用 Webpack 2 它将自动使用 `jsnext:main` / `module` 入口。
+像捆绑版本一样，`Vue.js` 和 `Chart.js` 都是 `peerDependencies`，需要安装。
+
+## 资源
+
+你可以在这里找到一些如何使用 `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/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.6.5",
+  "version": "2.8.6",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -57,16 +57,17 @@
     "prepublish": "yarn run lint && yarn run test && yarn run build"
   },
   "dependencies": {
-    "lodash": "^4.17.4"
+    "lodash.merge": "^4.6.0"
   },
   "peerDependencies": {
     "chart.js": "^2.6.0",
-    "vue": "^2.3.4"
+    "vue": "^2.4.2"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
@@ -117,12 +118,12 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "^2.3.4",
+    "vue": "^2.4.2",
     "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.2.1",
+    "vue-loader": "^12.2.2",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.3.4",
+    "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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -20,7 +23,6 @@ export default Vue.extend({
       ]
     )
   },
-
   props: {
     chartId: {
       default: 'bar-chart',
@@ -33,9 +35,15 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
-
   data () {
     return {
       defaultOptions: {
@@ -56,24 +64,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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,13 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
 
@@ -56,11 +66,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 +82,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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,17 +36,28 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
 
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +65,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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,13 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
 
@@ -56,24 +66,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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,13 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
 
@@ -54,11 +64,15 @@ export default Vue.extend({
             }
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -66,13 +80,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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,17 +36,28 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
 
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +65,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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,17 +36,28 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
 
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +65,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

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,17 +36,28 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
     }
   },
 
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +65,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,85 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  render: function (createElement) {
+    return createElement(
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
+      [
+        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
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
+    }
+  },
+
+  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>
+    <div class="Chart">
-    <bar-example></bar-example>
+      <h1 style="text-align:center;">Barchart</h1>
-    <h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
+      <bar-example></bar-example>
-    <reactive-example></reactive-example>
+    </div>
-    <h1 style="text-align:center;margin:40px 0;">Linechart</h1>
+
-    <line-example></line-example>
+    <div class="Chart">
-    <h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
-    <doughnut-example></doughnut-example>
+      <reactive-example></reactive-example>
-    <h1 style="text-align:center;margin:40px 0;">Piechart</h1>
+    </div>
-    <pie-example></pie-example>
+
-    <h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
+    <div class="Chart">
-    <radar-example></radar-example>
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
-    <h1 style="text-align:center;margin:40px 0;">Polararea</h1>
+      <reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
-    <polar-area-example></polar-area-example>
+    </div>
-    <h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
+
-    <bubble-example></bubble-example>
+    <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,47 @@
       PolarAreaExample,
       BubbleExample,
       ReactiveExample,
-      ReactivePropExample
+      ReactivePropExample,
+      ScatterExample
+    },
+    data () {
+      return {
+        dataPoints: null,
+        height: 20
+      }
+    },
+    mounted () {
+      setInterval(() => {
+        this.fillData()
+      }, 2000)
+    },
+    methods: {
+      increaseHeight () {
+        this.height += 10
+      },
+      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()]
+            }
+          ]
+        }
+      }
+    },
+    computed: {
+      myStyles () {
+        return {
+          height: `${this.height}px`,
+          position: 'relative'
+        }
+      }
     }
   }
 </script>
@@ -50,4 +124,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/helpers/options.js

@@ -1,4 +1,4 @@
-import merge from 'lodash/fp/merge'
+import merge from 'lodash.merge'
 
 export function mergeOptions (obj, src) {
   return merge(obj, src)

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

@@ -48,12 +48,22 @@ module.exports = {
               }
             })
 
-            chart.data.labels = newData.labels
+            if (newData.hasOwnProperty('labels')) {
+              chart.data.labels = newData.labels
+            }
+            if (newData.hasOwnProperty('xLabels')) {
+              chart.data.xLabels = newData.xLabels
+            }
+            if (newData.hasOwnProperty('yLabels')) {
+              chart.data.yLabels = newData.yLabels
+            }
             chart.update()
           } else {
             chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
+        } else {
+          this.renderChart(this.chartData, this.options)
         }
       }
     }

src/mixins/reactiveProp.js

@@ -48,12 +48,22 @@ module.exports = {
               }
             })
 
-            chart.data.labels = newData.labels
+            if (newData.hasOwnProperty('labels')) {
+              chart.data.labels = newData.labels
+            }
+            if (newData.hasOwnProperty('xLabels')) {
+              chart.data.xLabels = newData.xLabels
+            }
+            if (newData.hasOwnProperty('yLabels')) {
+              chart.data.yLabels = newData.yLabels
+            }
             chart.update()
           } else {
             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)
+  })
+})

test/unit/specs/helpers/options.spec.js

@@ -15,16 +15,40 @@ describe('mergeOptions.js', () => {
     c: 'c'
   }
 
+  const an = {
+    a: {
+      a: 'a'
+    },
+    b: {
+      b: 'a'
+    }
+  }
+
+  const bn = {
+    a: {
+      a: 'a'
+    },
+    b: {
+      b: 'b'
+    }
+  }
+
   it('should replace old a and b if a and b are new', () => {
-    let ab = mergeOptions(a, b)
+    const ab = mergeOptions(a, b)
     expect(ab).to.have.property('a').and.to.equal('b')
     expect(ab).to.have.property('b').and.to.equal('b')
   })
 
   it('should add c if c is new', () => {
-    let ac = mergeOptions(a, c)
+    const ac = mergeOptions(a, c)
-    expect(ac).to.have.property('a').and.to.equal('a')
+    expect(ac).to.have.property('a').and.to.equal('b')
-    expect(ac).to.have.property('b').and.to.equal('a')
+    expect(ac).to.have.property('b').and.to.equal('b')
     expect(ac).to.have.property('c').and.to.equal('c')
   })
+
+  it('should replace old a and b if a and b are new in nested objects', () => {
+    const ab = mergeOptions(an, bn)
+    expect(ab).to.have.deep.property('a.a').and.to.equal('a')
+    expect(ab).to.have.deep.property('b.b').and.to.equal('b')
+  })
 })

yarn.lock

@@ -687,6 +687,12 @@ babel-plugin-transform-exponentiation-operator@^6.24.1:
     babel-plugin-syntax-exponentiation-operator "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-object-assign@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz#f99d2f66f1a0b0d498e346c5359684740caa20ba"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-object-rest-spread@^6.22.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
@@ -3538,6 +3544,10 @@ lodash.keysin@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keysin/-/lodash.keysin-4.2.0.tgz#8cc3fb35c2d94acc443a1863e02fa40799ea6f28"
 
+lodash.merge@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
+
 lodash.mergewith@^4.0.0, lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
@@ -3554,7 +3564,7 @@ lodash@^3.8.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5707,9 +5717,9 @@ vue-html-loader@^1.2.4:
     loader-utils "^1.0.2"
     object-assign "^4.1.0"
 
-vue-loader@^12.2.1:
+vue-loader@^12.2.2:
-  version "12.2.1"
+  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.1.tgz#53f27c0973d386768f5a75156f4129b5efc6ba55"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.2.tgz#2b3a764f27018f975bc78cb8b1f55137548ee2d7"
   dependencies:
     consolidate "^0.14.0"
     hash-sum "^1.0.2"
@@ -5732,9 +5742,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.4:
+vue-template-compiler@^2.4.2:
-  version "2.3.4"
+  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.4.tgz#5a88ac2c5e4d5d6218e6aa80e7e221fb7e67894c"
+  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"
@@ -5743,9 +5753,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.4:
+vue@^2.4.2:
-  version "2.3.4"
+  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.4.2.tgz#a9855261f191c978cc0dc1150531b8d08149b58c"
 
 watchpack@^0.2.1:
   version "0.2.9"