💎 Release new version 2.8.6

📝 Update CHANGELOG
v2.8.5
2025-10-29 18:00:20 +00:00 · 2017-09-12 15:45:46 +02:00 · 2017-09-12 10:57:06 +02:00 · 2017-09-12 10:55:34 +02:00 · 2017-09-12 10:53:31 +02:00 · 2017-09-08 10:17:16 +02:00
28 changed files with 1026 additions and 73 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,158 @@
 # Change Log

+## [v2.8.5](https://github.com/apertureless/vue-chartjs/tree/v2.8.5) (2017-09-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.4...v2.8.5)
+
+**Closed issues:**
+
+- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
+- Chart error since the addition of deepmerge in build 2.8.4 [\#192](https://github.com/apertureless/vue-chartjs/issues/192)
+
+## [v2.8.4](https://github.com/apertureless/vue-chartjs/tree/v2.8.4) (2017-09-08)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.3...v2.8.4)
+
+**Closed issues:**
+
+- Regression in 2.8.3 [\#190](https://github.com/apertureless/vue-chartjs/issues/190)
+- Why default Chart.js styles are overridden? [\#189](https://github.com/apertureless/vue-chartjs/issues/189)
+- Legend or other options not working in reactiveProps [\#188](https://github.com/apertureless/vue-chartjs/issues/188)
+- Changes to yAxisID property does not re-render chart [\#177](https://github.com/apertureless/vue-chartjs/issues/177)
+
+**Merged pull requests:**
+
+- Replace Object.assign with deepmerge [\#191](https://github.com/apertureless/vue-chartjs/pull/191) ([apertureless](https://github.com/apertureless))
+
+## [v2.8.3](https://github.com/apertureless/vue-chartjs/tree/v2.8.3) (2017-09-06)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.2...v2.8.3)
+
+**Closed issues:**
+
+- Rounded corner for Bar chart [\#185](https://github.com/apertureless/vue-chartjs/issues/185)
+- Access canvas object from parents [\#184](https://github.com/apertureless/vue-chartjs/issues/184)
+- Issue with DonutChart in Safari [\#183](https://github.com/apertureless/vue-chartjs/issues/183)
+- Responsive Width, Fixed Height [\#180](https://github.com/apertureless/vue-chartjs/issues/180)
+- Entire Lodash Library Is Loaded!! 200kb chunk!  [\#179](https://github.com/apertureless/vue-chartjs/issues/179)
+- height changed unexpectedly after re-rendering [\#178](https://github.com/apertureless/vue-chartjs/issues/178)
+- Default height no longer working in 2.8 [\#176](https://github.com/apertureless/vue-chartjs/issues/176)
+- how to get click on point in bar chart? [\#175](https://github.com/apertureless/vue-chartjs/issues/175)
+- clean install of from npm cannot be used in gulp / browserify [\#174](https://github.com/apertureless/vue-chartjs/issues/174)
+- tooltip callbacks possible? [\#173](https://github.com/apertureless/vue-chartjs/issues/173)
+- Computed object won't populate chart [\#170](https://github.com/apertureless/vue-chartjs/issues/170)
+- Error in nextTick: "RangeError: Maximum call stack size exceeded" [\#169](https://github.com/apertureless/vue-chartjs/issues/169)
+- Standalone chartjs build \(don't include moment.js\) [\#124](https://github.com/apertureless/vue-chartjs/issues/124)
+
+**Merged pull requests:**
+
+- 🔥 Remove default styles object as it causes problems [\#187](https://github.com/apertureless/vue-chartjs/pull/187) ([apertureless](https://github.com/apertureless))
+- remvove lodash merge [\#186](https://github.com/apertureless/vue-chartjs/pull/186) ([apertureless](https://github.com/apertureless))
+
+## [v2.8.2](https://github.com/apertureless/vue-chartjs/tree/v2.8.2) (2017-08-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.1...v2.8.2)
+
+**Closed issues:**
+
+- UNMET PEER DEPENDENCY [\#167](https://github.com/apertureless/vue-chartjs/issues/167)
+- Base Charts' height: 200% [\#164](https://github.com/apertureless/vue-chartjs/issues/164)
+
+**Merged pull requests:**
+
+- Add support for xLabels and yLabels [\#166](https://github.com/apertureless/vue-chartjs/pull/166) ([dsbert](https://github.com/dsbert))
+- Update README.md [\#165](https://github.com/apertureless/vue-chartjs/pull/165) ([mikeybeck](https://github.com/mikeybeck))
+
+## [v2.8.1](https://github.com/apertureless/vue-chartjs/tree/v2.8.1) (2017-08-05)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.0...v2.8.1)
+
+**Merged pull requests:**
+
+- Add Russian documentation [\#163](https://github.com/apertureless/vue-chartjs/pull/163) ([dood-](https://github.com/dood-))
+
+## [v2.8.0](https://github.com/apertureless/vue-chartjs/tree/v2.8.0) (2017-08-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.2.0...v2.8.0)
+
+**Closed issues:**
+
+- Update README CDN link [\#161](https://github.com/apertureless/vue-chartjs/issues/161)
+- Options being ignored [\#160](https://github.com/apertureless/vue-chartjs/issues/160)
+- Fails to dynamically change height. [\#158](https://github.com/apertureless/vue-chartjs/issues/158)
+- Chart doesn't load in bootstrap tab [\#157](https://github.com/apertureless/vue-chartjs/issues/157)
+- Add scatter chart to vue-chatjs@legacy [\#155](https://github.com/apertureless/vue-chartjs/issues/155)
+- \[Error\] Get error when $destroy is started. [\#149](https://github.com/apertureless/vue-chartjs/issues/149)
+
+**Merged pull requests:**
+
+- Feature/dynamic styles [\#162](https://github.com/apertureless/vue-chartjs/pull/162) ([apertureless](https://github.com/apertureless))
+- Add Chinese simplified docs support. [\#159](https://github.com/apertureless/vue-chartjs/pull/159) ([Mooooooon](https://github.com/Mooooooon))
+
+## [v1.2.0](https://github.com/apertureless/vue-chartjs/tree/v1.2.0) (2017-07-25)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.2...v1.2.0)
+
+**Closed issues:**
+
+- this.$refs doesn't seem to have expected canvas property [\#156](https://github.com/apertureless/vue-chartjs/issues/156)
+
+**Merged pull requests:**
+
+- Before destroy fix [\#152](https://github.com/apertureless/vue-chartjs/pull/152) ([DenisLapi](https://github.com/DenisLapi))
+
+## [v2.7.2](https://github.com/apertureless/vue-chartjs/tree/v2.7.2) (2017-07-22)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.1...v2.7.2)
+
+**Closed issues:**
+
+- Accessibility - Add unique titles to frames [\#150](https://github.com/apertureless/vue-chartjs/issues/150)
+- update\(\) not refreshing chart [\#148](https://github.com/apertureless/vue-chartjs/issues/148)
+- Custome label y axis [\#147](https://github.com/apertureless/vue-chartjs/issues/147)
+- Access specific points on the canvas and labels for styling [\#146](https://github.com/apertureless/vue-chartjs/issues/146)
+- legendCallback\(\) doesn't render a custom legend [\#144](https://github.com/apertureless/vue-chartjs/issues/144)
+- where can i get the demo sources code? thanks [\#143](https://github.com/apertureless/vue-chartjs/issues/143)
+- Props not works as expected, updating of value doesn't work [\#138](https://github.com/apertureless/vue-chartjs/issues/138)
+
+**Merged pull requests:**
+
+- ⬆️ Update dependency vue to 2.4.2 [\#154](https://github.com/apertureless/vue-chartjs/pull/154) ([apertureless](https://github.com/apertureless))
+- Remove useless labels [\#153](https://github.com/apertureless/vue-chartjs/pull/153) ([clarkdo](https://github.com/clarkdo))
+- :pencil2: Remove generateLegend\(\)  from initialization codes [\#145](https://github.com/apertureless/vue-chartjs/pull/145) ([k-rumi](https://github.com/k-rumi))
+
+## [v2.7.1](https://github.com/apertureless/vue-chartjs/tree/v2.7.1) (2017-07-05)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.0...v2.7.1)
+
+**Closed issues:**
+
+- Default backgroundColor needed [\#142](https://github.com/apertureless/vue-chartjs/issues/142)
+
+**Merged pull requests:**
+
+- Fix links to images in translated documents [\#141](https://github.com/apertureless/vue-chartjs/pull/141) ([k-rumi](https://github.com/k-rumi))
+
+## [v2.7.0](https://github.com/apertureless/vue-chartjs/tree/v2.7.0) (2017-07-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.5...v2.7.0)
+
+**Closed issues:**
+
+- Reactive Data Tutorial [\#132](https://github.com/apertureless/vue-chartjs/issues/132)
+- Using inline plugins [\#130](https://github.com/apertureless/vue-chartjs/issues/130)
+- Scatter Chart [\#129](https://github.com/apertureless/vue-chartjs/issues/129)
+- Generating Chart after clicking submit button [\#128](https://github.com/apertureless/vue-chartjs/issues/128)
+- Ticks not working with reactive props [\#127](https://github.com/apertureless/vue-chartjs/issues/127)
+- Error in callback for watcher "chartData": "TypeError: Cannot read property 'data' of undefined" [\#126](https://github.com/apertureless/vue-chartjs/issues/126)
+- Passing the data from vue to chartjs [\#125](https://github.com/apertureless/vue-chartjs/issues/125)
+- Combination of Bar and Line Chart  [\#123](https://github.com/apertureless/vue-chartjs/issues/123)
+- Reactive data example not working [\#122](https://github.com/apertureless/vue-chartjs/issues/122)
+- vue-chartjs height was 0 when i set v-show [\#120](https://github.com/apertureless/vue-chartjs/issues/120)
+- Bar chart, barPercentage in X axis [\#119](https://github.com/apertureless/vue-chartjs/issues/119)
+- update event not firing on data change [\#118](https://github.com/apertureless/vue-chartjs/issues/118)
+
+**Merged pull requests:**
+
+- ✅ Update tests for addPlugin method [\#140](https://github.com/apertureless/vue-chartjs/pull/140) ([apertureless](https://github.com/apertureless))
+- Fix beforeDestory when renderChart was not called [\#139](https://github.com/apertureless/vue-chartjs/pull/139) ([ZhangYiJiang](https://github.com/ZhangYiJiang))
+- Add support for inline plugins [\#137](https://github.com/apertureless/vue-chartjs/pull/137) ([kurbar](https://github.com/kurbar))
+- Feature/scatter chart [\#136](https://github.com/apertureless/vue-chartjs/pull/136) ([apertureless](https://github.com/apertureless))
+- 🐛 Fix \#122 reactive mixin [\#135](https://github.com/apertureless/vue-chartjs/pull/135) ([apertureless](https://github.com/apertureless))
+- 📝 Add resources & tutorials to docs [\#133](https://github.com/apertureless/vue-chartjs/pull/133) ([apertureless](https://github.com/apertureless))
+- fix a typo in an example [\#131](https://github.com/apertureless/vue-chartjs/pull/131) ([JobV](https://github.com/JobV))
+- Update README [\#121](https://github.com/apertureless/vue-chartjs/pull/121) ([stoykostanchev](https://github.com/stoykostanchev))
+
 ## [v2.6.5](https://github.com/apertureless/vue-chartjs/tree/v2.6.5) (2017-06-10)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.4...v2.6.5)

--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@

 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`
--- a/docs/README.md
+++ b/docs/README.md
@@ -71,7 +71,8 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 | width | chart width |
 | height | chart height |
 | chart-id | id of the canvas |
-
+| css-classes | String with css classes for the surrounding div |
+| styles | Object with css styles for the surrounding div container |

 ## Examples

@@ -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)
  }
 })
--- a/docs/assets/scatter.png
+++ b/docs/assets/scatter.png
--- a/docs/config.js
+++ b/docs/config.js
@@ -2,7 +2,9 @@ const langs = [
  {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
  {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
-  {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}
+  {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
+  {title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
+  {title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
 ]

 docute.init({
@@ -37,7 +39,7 @@ docute.init({
      apiKey: 'b3544f7387612693644777553675d56a',
      indexName: 'vue-chartjs',
      // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de', 'ja', 'pt-br'],
+      tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
      // this plugin does require a url too
      // where docsearch fetches contents
      url: 'https://vue-chartjs.org'
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -262,30 +262,30 @@ Sometimes you need more control over chart.js. Thats why you can access the char
  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
 </p>

-![Bar](assets/bar.png)
+![Bar](../assets/bar.png)
 ### Line Chart

-![Line](assets/line.png)
+![Line](../assets/line.png)

 ### Doughnut

-![Doughnut](assets/doughnut.png)
+![Doughnut](../assets/doughnut.png)

 ### Pie

-![Pie](assets/pie.png)
+![Pie](../assets/pie.png)

 ### Radar

-![Pie](assets/radar.png)
+![Pie](../assets/radar.png)

 ### Polar Area

-![Pie](assets/polar.png)
+![Pie](../assets/polar.png)

 ### Bubble

-![Bubble](assets/bubble.png)
+![Bubble](../assets/bubble.png)

 ## Webpack, Browserify and dist files.

--- a/docs/ja/README.md
+++ b/docs/ja/README.md
@@ -264,30 +264,30 @@ export default Line.extend({
  棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
 </p>

-![Bar](assets/bar.png)
+![Bar](../assets/bar.png)
 ### 折れ線グラフ

-![Line](assets/line.png)
+![Line](../assets/line.png)

 ### ドーナツチャート

-![Doughnut](assets/doughnut.png)
+![Doughnut](../assets/doughnut.png)

 ### パイチャート

-![Pie](assets/pie.png)
+![Pie](../assets/pie.png)

 ### レーダーチャート

-![Pie](assets/radar.png)
+![Pie](../assets/radar.png)

 ### 鶏頭図

-![Pie](assets/polar.png)
+![Pie](../assets/polar.png)

 ### バブルチャート

-![Bubble](assets/bubble.png)
+![Bubble](../assets/bubble.png)


 ## ビルド方法の違い
--- a/docs/pt-br/README.md
+++ b/docs/pt-br/README.md
@@ -221,31 +221,31 @@ export default Line.extend({

 ### Gráfico de Barra

-![Barra](assets/bar.png)
+![Barra](../assets/bar.png)

 ### Gráfico de Linha

-![Linha](assets/line.png)
+![Linha](../assets/line.png)

 ### Donut

-![Donut](assets/doughnut.png)
+![Donut](../assets/doughnut.png)

 ### Pizza

-![Pizza](assets/pie.png)
+![Pizza](../assets/pie.png)

 ### Radar

-![Radar](assets/radar.png)
+![Radar](../assets/radar.png)

 ### Área Polar

-![Área Polar](assets/polar.png)
+![Área Polar](../assets/polar.png)

 ### Bolha

-![Bolha](assets/bubble.png)
+![Bolha](../assets/bubble.png)

 ## Configurações de Build

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

@@ -76,7 +86,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- 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,6 +36,13 @@ export default Vue.extend({
    height: {
      default: 400,
      type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
    }
  },

@@ -59,7 +69,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- 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
    }
  },

@@ -75,7 +85,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- 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
    }
  },

@@ -74,7 +84,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- 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,6 +36,13 @@ export default Vue.extend({
    height: {
      default: 400,
      type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
    }
  },

@@ -59,7 +69,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- 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,6 +36,13 @@ export default Vue.extend({
    height: {
      default: 400,
      type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
    }
  },

@@ -59,7 +69,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- 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,6 +36,13 @@ export default Vue.extend({
    height: {
      default: 400,
      type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object
    }
  },

@@ -59,7 +69,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- a/src/BaseCharts/Scatter.js
+++ b/src/BaseCharts/Scatter.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
    }
  },

@@ -65,7 +75,6 @@ export default Vue.extend({
          plugins: this.plugins
        }
      )
-      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -79,7 +79,8 @@
    },
    data () {
      return {
-        dataPoints: null
+        dataPoints: null,
+        height: 20
      }
    },
    mounted () {
@@ -88,6 +89,9 @@
      }, 2000)
    },
    methods: {
+      increaseHeight () {
+        this.height += 10
+      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      },
@@ -103,6 +107,14 @@
          ]
        }
      }
+    },
+    computed: {
+      myStyles () {
+        return {
+          height: `${this.height}px`,
+          position: 'relative'
+        }
+      }
    }
  }
 </script>
--- a/src/examples/ScatterExample.js
+++ b/src/examples/ScatterExample.js
@@ -3,7 +3,6 @@ import Scatter from '../BaseCharts/Scatter'
 export default Scatter.extend({
  mounted () {
    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'Scatter Dataset 1',
        fill: false,
--- a/src/helpers/options.js
+++ b/src/helpers/options.js
@@ -1,4 +1,4 @@
-import merge from 'lodash/fp/merge'
+import merge from 'lodash.merge'

 export function mergeOptions (obj, src) {
  return merge(obj, src)
--- 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
@@ -48,7 +48,15 @@ module.exports = {
              }
            })

-            chart.data.labels = newData.labels
+            if (newData.hasOwnProperty('labels')) {
+              chart.data.labels = newData.labels
+            }
+            if (newData.hasOwnProperty('xLabels')) {
+              chart.data.xLabels = newData.xLabels
+            }
+            if (newData.hasOwnProperty('yLabels')) {
+              chart.data.yLabels = newData.yLabels
+            }
            chart.update()
          } else {
            chart.destroy()
--- a/src/mixins/reactiveProp.js
+++ b/src/mixins/reactiveProp.js
@@ -48,7 +48,15 @@ module.exports = {
              }
            })

-            chart.data.labels = newData.labels
+            if (newData.hasOwnProperty('labels')) {
+              chart.data.labels = newData.labels
+            }
+            if (newData.hasOwnProperty('xLabels')) {
+              chart.data.xLabels = newData.xLabels
+            }
+            if (newData.hasOwnProperty('yLabels')) {
+              chart.data.yLabels = newData.yLabels
+            }
            chart.update()
          } else {
            chart.destroy()
--- 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)
-    expect(ac).to.have.property('a').and.to.equal('a')
-    expect(ac).to.have.property('b').and.to.equal('a')
+    const ac = mergeOptions(a, c)
+    expect(ac).to.have.property('a').and.to.equal('b')
+    expect(ac).to.have.property('b').and.to.equal('b')
    expect(ac).to.have.property('c').and.to.equal('c')
  })
+
+  it('should replace old a and b if a and b are new in nested objects', () => {
+    const ab = mergeOptions(an, bn)
+    expect(ab).to.have.deep.property('a.a').and.to.equal('a')
+    expect(ab).to.have.deep.property('b.b').and.to.equal('b')
+  })
 })
--- a/yarn.lock
+++ b/yarn.lock
@@ -687,6 +687,12 @@ babel-plugin-transform-exponentiation-operator@^6.24.1:
    babel-plugin-syntax-exponentiation-operator "^6.8.0"
    babel-runtime "^6.22.0"

+babel-plugin-transform-object-assign@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz#f99d2f66f1a0b0d498e346c5359684740caa20ba"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-object-rest-spread@^6.22.0:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
@@ -3538,6 +3544,10 @@ lodash.keysin@^4.0.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/lodash.keysin/-/lodash.keysin-4.2.0.tgz#8cc3fb35c2d94acc443a1863e02fa40799ea6f28"

+lodash.merge@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
+
 lodash.mergewith@^4.0.0, lodash.mergewith@^4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
@@ -3554,7 +3564,7 @@ lodash@^3.8.0:
  version "3.10.1"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

@@ -5707,9 +5717,9 @@ vue-html-loader@^1.2.4:
    loader-utils "^1.0.2"
    object-assign "^4.1.0"

-vue-loader@^12.2.1:
-  version "12.2.1"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.1.tgz#53f27c0973d386768f5a75156f4129b5efc6ba55"
+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"
@@ -5732,9 +5742,9 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
    hash-sum "^1.0.2"
    loader-utils "^1.0.2"

-vue-template-compiler@^2.3.4:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.4.tgz#5a88ac2c5e4d5d6218e6aa80e7e221fb7e67894c"
+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"
@@ -5743,9 +5753,9 @@ vue-template-es2015-compiler@^1.2.2:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"

-vue@^2.3.4:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"
+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	37a92813eb	💎 Release new version 2.8.6	2017-09-12 15:45:46 +02:00
Jakub Juszczak	1260b8aa3b	📝 Update CHANGELOG	2017-09-12 10:57:06 +02:00
Jakub Juszczak	644859ce85	v2.8.5	2017-09-12 10:55:34 +02:00
Jakub Juszczak	e4977a6be7	Replace deepmerge with lodash.merge	2017-09-12 10:53:31 +02:00
Jakub Juszczak	41736c840d	📝 Update CHANGELOG	2017-09-08 10:17:16 +02:00
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