v2.8.4

Merge pull request #191 from apertureless/feature/deepmerge
Replace Object.assign with deepmerge
2025-10-29 18:00:20 +00:00 · 2017-09-08 10:15:31 +02:00 · 2017-09-08 10:13:47 +02:00 · 2017-09-08 10:02:38 +02:00 · 2017-09-08 09:59:37 +02:00 · 2017-09-06 20:06:15 +02:00
46 changed files with 2029 additions and 144 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,179 @@
 # Change Log

+## [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)
+
+**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 +254,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)
--- a/README.md
+++ b/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`
@@ -122,7 +122,7 @@ You can overwrite the default chart options. Just pass the options object as a s
 import { Line } from 'vue-chartjs'

 export default Line.extend({
-  props: ["data", "options"],
+  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
@@ -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`
@@ -165,7 +165,7 @@ import { Line, mixins } from 'vue-chartjs'

 export default Line.extend({
  mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
@@ -183,7 +183,7 @@ import VueCharts from 'vue-chartjs'

 export default VueCharts.Line.extend({
  mixins: [VueCharts.mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
@@ -196,7 +196,7 @@ import { Line, mixins } from 'vue-chartjs'

 export default Line.extend({
  mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
@@ -210,7 +210,7 @@ const { reactiveProp } = mixins

 export default Line.extend({
  mixins: [reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
@@ -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

--- a/assets/bar.png
+++ b/assets/bar.png
--- a/assets/bubble.png
+++ b/assets/bubble.png
--- a/assets/doughnut.png
+++ b/assets/doughnut.png
--- a/assets/line.png
+++ b/assets/line.png
--- a/assets/pie.png
+++ b/assets/pie.png
--- a/assets/polar.png
+++ b/assets/polar.png
--- a/assets/radar.png
+++ b/assets/radar.png
--- a/assets/scatter.png
+++ b/assets/scatter.png
--- a/docs/README.md
+++ b/docs/README.md
@@ -13,7 +13,7 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
 ## Installation
 If you are working with Vue.js 2+ simple run:

-`yarn add vue-chartjs`
+`yarn add vue-chartjs chart.js`

 If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.

@@ -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

@@ -112,7 +113,7 @@ If you want to overwrite the width and height:
 ```

 <p class="warning">
-  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
+  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height`.
 </p>

 ### Chart with local data
@@ -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.
@@ -312,8 +340,18 @@ 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 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.

 ### 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/)
--- a/docs/assets/scatter.png
+++ b/docs/assets/scatter.png
--- a/docs/config.js
+++ b/docs/config.js
@@ -1,7 +1,10 @@
 const langs = [
  {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
-  {title: '日本語', path: '/ja/', matchPath: /^\/ja/}
+  {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
+  {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({
@@ -36,7 +39,7 @@ docute.init({
      apiKey: 'b3544f7387612693644777553675d56a',
      indexName: 'vue-chartjs',
      // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de'],
+      tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
      // this plugin does require a url too
      // where docsearch fetches contents
      url: 'https://vue-chartjs.org'
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -13,7 +13,7 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
 ## Installation
 If you are working with Vue.js 2+ simple run:

-`yarn add vue-chartjs`
+`yarn add vue-chartjs chart.js`

 If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.

@@ -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.

--- a/docs/ja/README.md
+++ b/docs/ja/README.md
@@ -13,7 +13,7 @@ chart.jsの基本ロジックを抽象化していますが、公開されたcha
 ## インストール
 Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:

-`yarn add vue-chartjs`
+`yarn add vue-chartjs chart.js`

 Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。

@@ -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)


 ## ビルド方法の違い
@@ -315,4 +315,4 @@ Gulp、BrowserifyまたはWebpackのバージョン1を使用している場合
 Vue.jsとChart.jsは `peerDependencies` なので別にインストールする必要があります。ほとんどのプロジェクトでは、Vue.jsはすでにインストールされているでしょう。この方法では、このパッケージと異なるバージョンのVue.jsとChart.jsを持つことができます。

 ### Webpack 2
-Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
+Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
--- a/docs/pt-br/README.md
+++ b/docs/pt-br/README.md
@@ -0,0 +1,284 @@
+<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** é um wrapper para o [Chart.js](https://github.com/chartjs/Chart.js) no vue. Você pode criar gráficos reutilizáveis facilmente.
+
+## Demo & Docs
+
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)
+
+### Compatibilidade
+
+- v1 later `@legacy`
+  - Vue.js 1.x
+- v2 later
+  - Vue.js 2.x
+
+Após a release final do vue.js 2, você também instala por padrão o vue-chartjs v2 pelo npm.
+Não é mas necessária a tag @next. Se você quiser a versão v1, você precisa definir a versão ou usar uma tag legada.
+Se está procurando pela versão v1, dê uma olhada nessa [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
+
+## Instalação
+
+Simplemente execute `yarn add vue-chartjs chart.js`
+
+Ou se quiser utilizar diretamente no browser, adicione
+
+```html
+<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
+```
+em seus scripts. Veja [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+
+## Explicação das diferentes builds
+
+Existem três diferentes pontos de entrada (entry points). Isso depende da configuração de build que você possui. As dependências são empacotadas (bundled) ou requisitadas como 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  |
+
+### Browser
+Você pode usar o `vue-chartjs` diretamente no seu browser sem qualquer configuração de build. Como em [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Nesse caso, use `vue-chartjs.full.min.js` que é a versão minificada. Esse arquivo contém o Vue.js e o Chart.js inseridos nele. E são  And empacotados (bundled) em um módulo UMD. Então você precisa somente desse arquivo.
+
+
+### Browserify / Webpack 1
+
+Se você estiver usando Gulb, Browserify ou Webpack 1 a opção é `vue-chartjs.js`, que é __transpiled__ e __bundled__ no modelo UMD.
+
+Porém, Vue.js e Chart.js são `peerDependencies`, então você precisa instalá-los seperadamente. Na maioria dos projetos você terá o `Vue.js` instalado de qualquer maneira. Dessa forma, você pode ter diferentes versões do Vue.js e do Chart.j nesse pacote.
+
+
+### Webpack 2
+Se você está usando o Webpack 2, ele automaticamente usará a opção `jsnext:main` / `module`. Que é `es/index.js`, uma versão do código do es __transpiled__. Não é __bundled__ em módulo algum. Dessa forma, seu [tree shaking](https://webpack.js.org/guides/tree-shaking/) funcionará. Como na versão bundled, o `Vue.js` e o `Chart.js` são `peerDependencies` e precisam ser instalados.
+
+## Como usar
+
+Você precisa importar a classe de gráficos básica e extendê-la. Isso garante muito mais flexibilidade quando se está trabalhando com dados diferentes. Você pode passar dados via props ou vue-resource.
+
+Você pode importar todo o pacote ou cada módulo individualmente.
+
+```javascript
+import VueCharts from 'vue-chartjs'
+import { Bar, Line } from 'vue-chartjs'
+```
+
+Apenas crie seu próprio componente.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    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]
+        }
+      ]
+    })
+  }
+})
+```
+
+Então, simplesmente importe e use seu próprio componente extendido como um componente vue.
+
+```javascript
+import CommitChart from 'path/to/component/CommitChart'
+```
+
+## Another Example with options
+
+Você pode sobreescrever as options (opções) padrão do gráfico. Basta passar o objeto options como segundo parâmetro do método de renderização.
+
+```javascript
+// MonthlyIncome.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ["data", "options"],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+Use isso no seu componente vue
+
+```javascript
+import MonthlyIncome from 'path/to/component/MonthlyIncome'
+
+<template>
+  <monthly-income :data={....} />
+</template>
+
+<script>
+export default {
+  components: { MonthlyIncome },
+  ....
+}
+</script>
+```
+
+## Reactivity (Reatividade)
+
+O Chart.js não atualiza nem re-renderiza o gráfico se novos dados são passados.
+Porém, você pode implementar isso por si só ou usar um dos dois mixins inclusos.
+
+- `reactiveProp`
+- `reactiveData`
+
+Ambos estão incluídos no módulo de `mixins`.
+
+Os mixins criam automaticamente o `chartData` como um prop ou como um data. E adiciona um watcher. Se os dados mudarem, o gráfico será atualizado. Mas matenha em mente as limitações do vue e do javascript para as mutations(mutações) em vetores e objetos. Mais informações [aqui](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)
+  }
+})
+
+```
+
+### Módulo de Mixins
+O módulo de `mixins` está incluído no módulo do  `VueCharts` e como módulo separado.
+Algumas maneiras de importá-los:
+
+```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)
+  }
+})
+```
+
+## Gráficos disponíveis
+
+### Gráfico de Barra
+
+![Barra](../assets/bar.png)
+
+### Gráfico de Linha
+
+![Linha](../assets/line.png)
+
+### Donut
+
+![Donut](../assets/doughnut.png)
+
+### Pizza
+
+![Pizza](../assets/pie.png)
+
+### Radar
+
+![Radar](../assets/radar.png)
+
+### Área Polar
+
+![Área Polar](../assets/polar.png)
+
+### Bolha
+
+![Bolha](../assets/bubble.png)
+
+## Configurações de Build
+
+``` bash
+# Instala as dependências
+npm install
+
+# roda o servidor com hot reload at localhost:8080
+npm run dev
+
+# build para produção com minificação
+npm run build
+
+# roda testes unitários
+npm run unit
+
+# roda testes e2e
+npm run e2e
+
+# roda todos os teste
+npm test
+```
+
+Para informações detalhadas de como as coisas funcionam, confira o [guia](http://vuejs-templates.github.io/webpack/) e [documentação do vue-loader](http://vuejs.github.io/vue-loader).
+
+## Contribuindo
+
+1. Faça um fork o projeto ( https://github.com/apertureless/vue-chartjs/fork )
+2. Crie uma branch da sua feature (`git checkout -b my-new-feature`)
+3. Faça o commit das suas modificações (`git commit -am 'Add some feature'`)
+4. Faça o push da branch (`git push origin my-new-feature`)
+5. Crie uma nova requisição de pull
+
+## License
+
+Esse software é distribuído sob a licença [MIT license](LICENSE.txt).
--- a/docs/ru/README.md
+++ b/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).
--- a/docs/zh-cn/README.md
+++ b/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/)
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-chartjs",
-  "version": "2.6.3",
+  "version": "2.8.4",
  "description": "vue.js wrapper for chart.js",
  "author": "Jakub Juszczak <jakub@posteo.de>",
  "homepage": "http://vue-chartjs.org",
@@ -57,22 +57,23 @@
    "prepublish": "yarn run lint && yarn run test && yarn run build"
  },
  "dependencies": {
-    "lodash": "^4.17.4"
+    "deepmerge": "^1.5.1"
  },
  "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-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",
    "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 +118,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",
--- a/src/BaseCharts/Bar.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/Bubble.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/Doughnut.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/HorizontalBar.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/Line.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/Pie.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/PolarArea.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/Radar.js
+++ b/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()
+    }
  }
 })
--- a/src/BaseCharts/Scatter.js
+++ b/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()
+    }
+  }
+})
--- a/src/examples/App.vue
+++ b/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,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>
--- a/src/examples/ReactivePropExample.js
+++ b/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})
  }
 })
--- a/src/examples/ScatterExample.js
+++ b/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})
+  }
+})
--- a/src/helpers/options.js
+++ b/src/helpers/options.js
@@ -1,4 +1,4 @@
-import merge from 'lodash/fp/merge'
+import merge from 'deepmerge'

 export function mergeOptions (obj, src) {
  return merge(obj, src)
--- a/src/index.js
+++ b/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
 }
--- a/src/mixins/reactiveData.js
+++ b/src/mixins/reactiveData.js
@@ -26,15 +26,44 @@ module.exports = {
          // Check if Labels are equal and if dataset length is equal
          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
            newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i] = dataset
+              // Get new and old dataset keys
+              const oldDatasetKeys = Object.keys(oldData.datasets[i])
+              const newDatasetKeys = Object.keys(dataset)
+
+              // Get keys that aren't present in the new data
+              const deletionKeys = oldDatasetKeys.filter((key) => {
+                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+              })
+
+              // Remove outdated key-value pairs
+              deletionKeys.forEach((deletionKey) => {
+                delete chart.data.datasets[i][deletionKey]
+              })
+
+              // Update attributes individually to avoid re-rendering the entire chart
+              for (const attribute in dataset) {
+                if (dataset.hasOwnProperty(attribute)) {
+                  chart.data.datasets[i][attribute] = dataset[attribute]
+                }
+              }
            })

-            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)
        }
      }
    }
--- a/src/mixins/reactiveProp.js
+++ b/src/mixins/reactiveProp.js
@@ -4,7 +4,6 @@ module.exports = {
      required: true
    }
  },
-
  watch: {
    'chartData': {
      handler (newData, oldData) {
@@ -27,15 +26,44 @@ module.exports = {
          // Check if Labels are equal and if dataset length is equal
          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
            newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i] = dataset
+              // Get new and old dataset keys
+              const oldDatasetKeys = Object.keys(oldData.datasets[i])
+              const newDatasetKeys = Object.keys(dataset)
+
+              // Get keys that aren't present in the new data
+              const deletionKeys = oldDatasetKeys.filter((key) => {
+                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+              })
+
+              // Remove outdated key-value pairs
+              deletionKeys.forEach((deletionKey) => {
+                delete chart.data.datasets[i][deletionKey]
+              })
+
+              // Update attributes individually to avoid re-rendering the entire chart
+              for (const attribute in dataset) {
+                if (dataset.hasOwnProperty(attribute)) {
+                  chart.data.datasets[i][attribute] = dataset[attribute]
+                }
+              }
            })

-            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)
        }
      }
    }
--- a/test/unit/specs/Bar.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/Bubble.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/Doughnut.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/HorizontalBar.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/Line.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/Pie.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/PolarArea.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/Radar.spec.js
+++ b/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)
+  })
 })
--- a/test/unit/specs/Scatter.spec.js
+++ b/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)
+  })
+})
--- a/test/unit/specs/helpers/options.spec.js
+++ b/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('b').and.to.equal('a')
    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')
+  })
 })
--- a/yarn.lock
+++ b/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"
@@ -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"
@@ -798,6 +804,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 +828,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 +851,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 +868,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 +1129,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 +1142,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"
@@ -1620,6 +1663,10 @@ deep-is@~0.1.3:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"

+deepmerge@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.1.tgz#c053bf06fd7276f1994f70c09a0760cb61a56237"
+
 defined@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
@@ -3517,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"

@@ -5670,9 +5717,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 +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.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 +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.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"
Author	SHA1	Message	Date
Jakub Juszczak	4c37616d00	v2.8.4	2017-09-08 10:15:31 +02:00
Jakub	5dc655a47a	Merge pull request #191 from apertureless/feature/deepmerge Replace Object.assign with deepmerge	2017-09-08 10:13:47 +02:00
Jakub Juszczak	3d291996f6	🔥 Remove transform-object-assign	2017-09-08 10:02:38 +02:00
Jakub Juszczak	750abb2e88	➕ Add dependency deepmerge	2017-09-08 09:59:37 +02:00
Jakub Juszczak	46569a89cb	📝 Update CHANGELOG	2017-09-06 20:06:15 +02:00
Jakub Juszczak	932b73a1dc	💎 Release new version 2.8.3	2017-09-06 19:57:57 +02:00
Jakub	0569a9f794	Merge pull request #187 from apertureless/feature/fix_styles 🔥 Remove default styles object as it causes problems	2017-09-02 15:28:27 +02:00
Jakub Juszczak	154e284528	🔥 Remove default styles object as it causes problems This will fix #176 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-09-02 15:11:47 +02:00
Jakub	491625b49b	Merge pull request #186 from apertureless/feature/lodash-merge remvove lodash merge	2017-09-02 14:36:55 +02:00
Jakub Juszczak	d26078f08c	🔥 Remove lodash merge Replaced with Object.assign() Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-09-02 14:27:48 +02:00
Jakub Juszczak	6de69631b3	Replace lodash with lodash.merge Single module should be smaller Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-09-02 13:40:16 +02:00
Jakub Juszczak	82712948e9	📝 Update CHANGELOG Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-08-12 20:16:01 +02:00
Jakub Juszczak	9237fa538f	💎 Release new version 2.8.2 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-08-12 20:13:04 +02:00
Jakub	82c502cf45	Merge pull request #166 from dsbert/patch-1 Add support for xLabels and yLabels	2017-08-09 14:17:48 +02:00
bertolds	676a60a363	fix linting errors	2017-08-07 09:49:46 -04:00
bertolds	f60f87c141	Merge branch 'develop' into patch-1	2017-08-07 09:46:37 -04:00
bertolds	b7f2bf7db2	Merge branch 'patch-1' of https://github.com/dsbert/vue-chartjs into patch-1	2017-08-07 09:46:03 -04:00
bertolds	0e419886b1	Add cross-env to all steps of build script	2017-08-07 09:42:16 -04:00
Dan	f95ea49a19	Merge pull request #1 from apertureless/develop Bring up to date with origin	2017-08-07 09:41:47 -04:00
Dan	1e392091ea	Add support for xLabels and yLabels	2017-08-07 09:41:33 -04:00
Jakub	4bf4f5736c	Merge pull request #165 from mikeybeck/patch-1 Update README.md	2017-08-07 10:24:38 +02:00
Mikey Beck	703a91dafa	Update README.md	2017-08-07 12:07:18 +12:00
Mikey Beck	d68af61dce	Update README.md Typo	2017-08-07 12:05:01 +12:00
Jakub Juszczak	0fbdcc10b0	💎 Release new version 2.8.1 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-08-05 14:24:28 +02:00
Jakub Juszczak	ab31dfe727	🐛 Fix default height to 100%	2017-08-05 14:23:38 +02:00
Dan	a5b58c3b98	Add support for xLabels and yLabels	2017-08-04 15:06:22 -04:00
Jakub	85fafd9b58	Merge pull request #163 from dood-/feature-ru-translation Add Russian documentation	2017-08-04 16:41:51 +02:00
Daniel Gurev	54d85da955	Add Russian docs to the config array	2017-08-04 17:31:35 +03:00
Jakub Juszczak	60f87e72ae	💎 Release new version 2.8.0	2017-08-04 09:59:11 +02:00
Jakub Juszczak	896b7ddfa3	🐛 Fix cdn link in readme	2017-08-04 09:58:41 +02:00
Daniel Gurev	6d19370687	Add Russian documentation	2017-08-04 02:31:02 +03:00
Jakub	c9bc36ee59	Merge pull request #162 from apertureless/feature/dynamic_styles Feature/dynamic styles	2017-08-01 19:19:50 +02:00
Jakub Juszczak	7e52380bd4	Clean up example	2017-07-31 21:46:37 +02:00
Jakub Juszczak	32229fbfdd	✨ Add dynamic styles and css classes as prop You can now pass in css classes as a string for the surrounding div of the canvas and a styles object which will be applied as inline styles. This way you can have a dynamic height with `reposnive: true` ## Example ```js <template> <line-chart :styles="myStyles"/> </template> <script> export default { data () { return { height: 100 } }, computed: { myStyles () { return { height: `${this.height}px`, position: 'relative' } } } } </script> ```	2017-07-31 21:42:48 +02:00
Jakub	e0c771f3d3	Merge pull request #159 from Mooooooon/develop Add Chinese simplified docs support.	2017-07-31 10:06:48 +02:00
moon	57cff76747	Add Chinese simplified docs support.	2017-07-30 07:00:31 +08:00
Jakub Juszczak	79c138d65a	📝 Update README	2017-07-25 13:01:23 +02:00
Jakub Juszczak	64c6cedd74	📝 Update CHANGELOG	2017-07-22 18:17:59 +02:00
Jakub Juszczak	188ab83989	💎 Release new version 2.7.2	2017-07-22 18:14:09 +02:00
Jakub	d9f53e6ef4	Merge pull request #154 from apertureless/feature/update_peerdependency ⬆️ Update dependency vue to 2.4.2	2017-07-22 18:11:58 +02:00
Jakub Juszczak	7d1dacf77c	⬆️ Update dependency vue to 2.4.2	2017-07-22 18:09:37 +02:00
Jakub	67c01133d0	Merge pull request #153 from clarkdo/develop Remove useless labels	2017-07-22 17:20:09 +02:00
Clark Du	ab9721b577	remove useless labels	2017-07-22 22:36:05 +08:00
Jakub	71bcafa804	Merge pull request #145 from k-rumi/remove-generate-legend ✏️ Remove generateLegend() from initialization codes	2017-07-08 18:19:20 +02:00
kutrumi	882bdd86b8	✏️ Remove generateLegend() from initialization codes	2017-07-08 19:18:20 +09:00
Jakub Juszczak	4f7dda3c3b	💎 Release new version 2.7.1	2017-07-05 21:04:51 +02:00
Jakub Juszczak	f04441ab36	🐛 Fix missing exports	2017-07-05 21:04:10 +02:00
Jakub	acb3d5c823	Merge pull request #141 from k-rumi/fix-image-link-in-doc Fix links to images in translated documents	2017-07-04 14:42:58 +02:00
kutrumi	92bac84dae	Fix links to images in translated documents	2017-07-04 19:05:16 +09:00
Jakub Juszczak	85e946dbe1	📝 Update CHANGELOG	2017-07-04 11:06:06 +02:00
Jakub Juszczak	640ce5c932	💎 Release new version 2.7.0	2017-07-04 11:03:18 +02:00
Jakub	ef77c0d831	Merge pull request #140 from apertureless/feature/update_tests ✅ Update tests for addPlugin method	2017-07-04 10:47:17 +02:00
Jakub Juszczak	a996049a6b	📝 Update docs with inline-plugin support	2017-07-04 10:44:22 +02:00
Jakub Juszczak	4109fb30f3	✅ Update tests for addPlugin method	2017-07-04 10:31:21 +02:00
Jakub Juszczak	b23ce23015	Merge branch 'develop' of github.com:apertureless/vue-chartjs into develop * 'develop' of github.com:apertureless/vue-chartjs: Fix beforeDestory when renderChart was not called	2017-07-04 10:30:53 +02:00
Jakub Juszczak	7f62914edb	✨ Add addPlugin method to scatter chart	2017-07-04 10:30:46 +02:00
Jakub	677c53d9fe	Merge pull request #139 from ZhangYiJiang/patch-beforeDestroy Fix beforeDestory when renderChart was not called	2017-07-04 09:59:24 +02:00
Zhang Yijiang	3e423fd7ae	Fix beforeDestory when renderChart was not called	2017-07-04 09:58:52 +08:00
Jakub	362639c4e2	Merge pull request #137 from kurbar/inline-plugins-support Add support for inline plugins	2017-07-03 10:09:23 +02:00
Karl Viiburg	ef127686cd	Add support for inline plugins	2017-07-03 08:12:28 +03:00
Jakub	0a483946bc	Merge pull request #136 from apertureless/feature/scatter_chart Feature/scatter chart	2017-07-02 17:17:42 +02:00
Jakub Juszczak	ba5cedc981	📝 Update README and assets	2017-07-02 17:02:34 +02:00
Jakub Juszczak	9b8e961d1c	✅ Add test for scatter chart	2017-07-02 16:40:46 +02:00
Jakub Juszczak	d304a2c5ab	✨ Add scatter chart	2017-07-02 16:40:38 +02:00
Jakub Juszczak	80799b7bd5	🐛 Fix reactive-prop example	2017-07-02 16:18:47 +02:00
Jakub Juszczak	9d44758976	📺 Add reactive-prop example	2017-07-02 16:14:03 +02:00
Jakub	e8cbef7fa7	Merge pull request #135 from apertureless/patch/122 🐛 Fix #122 reactive mixin	2017-07-02 16:09:24 +02:00
Jakub	a2b023d226	Merge pull request #133 from apertureless/feature/docs 📝 Add resources & tutorials to docs	2017-07-02 16:03:19 +02:00
Jakub Juszczak	7a048a07df	🐛 Fix #122 reactive mixin Reactive mixin broke if the initial data was set to null.	2017-07-02 16:02:10 +02:00
Jakub Juszczak	10535095be	📝 Add resources & tutorials to docs	2017-07-02 15:45:44 +02:00
Jakub	0b12e0f8b7	Merge pull request #131 from JobV/patch-1 fix a typo in an example	2017-07-01 14:18:29 +02:00
Job van der Voort	43bada7b15	fix a typo in an example	2017-06-29 20:43:39 +01:00
Jakub	6736715895	Merge pull request #121 from stoykostanchev/patch-1 Update README	2017-06-15 14:34:23 +02:00
Stoyko Stanchev	5d159e7841	Create README.md	2017-06-15 12:04:00 +01:00
Jakub Juszczak	c22bd65a8e	📝 Update changelog	2017-06-10 15:15:12 +02:00
Jakub Juszczak	030ba0c035	💎 Release new version 2.6.5	2017-06-10 15:13:36 +02:00
Jakub Juszczak	ab3321001b	⬆️ Update peerDependencies vue@2.3.4 chart.js@2.6.0	2017-06-10 15:12:50 +02:00
Jakub Juszczak	0f6e04cd5e	📝 Update CHANGELOG	2017-06-04 15:42:48 +02:00
Jakub Juszczak	cc869c979d	💎 Release new version 2.6.4	2017-06-04 15:40:21 +02:00
Jakub Juszczak	8b6afd1e70	📝 Update README	2017-06-04 15:40:06 +02:00
Jakub	43363fc2ae	Merge pull request #109 from MuseofMoose/patch-1 Fix reactive mixins animation re-rendering issue.	2017-06-04 15:06:52 +02:00
Jakub	29d1ca3428	Merge pull request #115 from euledge/fix_typo_in_docs Fix typo in docs	2017-05-31 10:01:11 +02:00
Hitoshi Kuroyanagi	2e737e9394	Fix typo in docs	2017-05-31 15:56:39 +09:00
Jakub Juszczak	5da4b6165e	🐛 Fix typo in docs #111	2017-05-22 22:16:03 +02:00
Jakub Juszczak	1f522e7fd2	🐛 📝 Update README #112	2017-05-22 22:14:29 +02:00
Jakub Juszczak	8324f2c578	✨ Add pt-br doc to config	2017-05-20 15:00:30 +02:00
Jakub	ac09ae744e	Merge pull request #110 from kimuraz/pt-br-readme 📝 Add pt-br readme support	2017-05-20 14:32:02 +02:00
Kimura	39d0b4b95c	📝 Add pt-br readme support	2017-05-20 09:03:06 -03:00
Spencer Dellis	dbce4d7c2c	Fixing eslint issues.	2017-05-19 11:11:56 -04:00
Spencer Dellis	d49b06f92a	Fixing eslint issues.	2017-05-19 11:11:33 -04:00
Spencer Dellis	5cc8f0a878	Resolve reactivity mixin animation issue. A small consequence of replacing the entire dataset in the [reactive mixins files](https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/reactiveData.js) is that it causes charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart. You can see the issue in this fiddle (the problem remains even when changing chart type): https://jsfiddle.net/sg0c82ev/11/ To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data, and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes). A fiddle with my changes: https://jsfiddle.net/sg0c82ev/12/ Perhaps this is too specific of a scenario to warrant a complexity increase (and better suited for a custom handler) but I figured it would be better to dump it here and make it available for review. Let me know what you think.	2017-05-19 03:16:12 -04:00
Spencer Dellis	b762d400d2	Removing unnecessary line	2017-05-19 03:13:43 -04:00
Spencer Dellis	ceb5988e1c	Resolve reactive props animation issue. A small consequence of replacing the entire dataset in the mixins files is that it causes certain charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart. You can see the issue in this fiddle (note the constant re-rendering): https://jsfiddle.net/sg0c82ev/11/ To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data, and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes). A fiddle with my changes: https://jsfiddle.net/sg0c82ev/12/ Perhaps this is too specific of a scenario to warrant a complexity increase like this (and better suited for a custom watcher) but I figured it would be better to dump it here and make it available for review. Let me know what you think.	2017-05-19 02:40:29 -04:00