💎 Release new version 2.6.5

⬆️ Update peerDependencies
vue@2.3.4 chart.js@2.6.0
2025-10-29 18:00:20 +00:00 · 2017-06-10 15:13:36 +02:00 · 2017-06-10 15:12:50 +02:00 · 2017-06-04 15:42:48 +02:00 · 2017-06-04 15:40:21 +02:00 · 2017-06-04 15:40:06 +02:00
26 changed files with 2638 additions and 44548 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ npm-debug.log
 selenium-debug.log
 test/unit/coverage
 test/e2e/reports
+dist/
+es/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,183 @@
 # Change Log

-## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
+## [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)

-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.8...HEAD)
+**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)
+- Why do I need both vue-chartjs chart.js? [\#98](https://github.com/apertureless/vue-chartjs/issues/98)
+- vue-chartjs not working with lodash-webpack-plugin installed [\#97](https://github.com/apertureless/vue-chartjs/issues/97)
+- multi lines with same options [\#95](https://github.com/apertureless/vue-chartjs/issues/95)
+- Zoom And Pan Options in Vue Charts [\#94](https://github.com/apertureless/vue-chartjs/issues/94)
+
+**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)
+
+**Merged pull requests:**
+
+- ⬆️ Update dev dependencies [\#96](https://github.com/apertureless/vue-chartjs/pull/96) ([apertureless](https://github.com/apertureless))
+
+## [v2.6.1](https://github.com/apertureless/vue-chartjs/tree/v2.6.1) (2017-04-21)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0...v2.6.1)
+
+**Closed issues:**
+
+- Not understanding options [\#93](https://github.com/apertureless/vue-chartjs/issues/93)
+- A Gotcha on component creation. [\#92](https://github.com/apertureless/vue-chartjs/issues/92)
+- Error when building: 'This dependency was not found: chartjs' [\#91](https://github.com/apertureless/vue-chartjs/issues/91)
+- Chart does not render inside conditional [\#90](https://github.com/apertureless/vue-chartjs/issues/90)
+- Unable to add to material-vue layout [\#87](https://github.com/apertureless/vue-chartjs/issues/87)
+
+## [v2.6.0](https://github.com/apertureless/vue-chartjs/tree/v2.6.0) (2017-04-09)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0-rc1...v2.6.0)
+
+**Closed issues:**
+
+- how to export to image or pdf [\#89](https://github.com/apertureless/vue-chartjs/issues/89)
+- 🙏🏻 Testing 2.6.0-rc1 [\#88](https://github.com/apertureless/vue-chartjs/issues/88)
+- Adding annotation plugin functionality [\#86](https://github.com/apertureless/vue-chartjs/issues/86)
+
+## [v2.6.0-rc1](https://github.com/apertureless/vue-chartjs/tree/v2.6.0-rc1) (2017-04-05)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.6...v2.6.0-rc1)
+
+**Closed issues:**
+
+- Overwrite prop [\#85](https://github.com/apertureless/vue-chartjs/issues/85)
+
+**Merged pull requests:**
+
+- Update release build to not include externals. [\#84](https://github.com/apertureless/vue-chartjs/pull/84) ([gcoguiec](https://github.com/gcoguiec))
+
+## [v2.5.6](https://github.com/apertureless/vue-chartjs/tree/v2.5.6) (2017-03-29)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...v2.5.6)
+
+**Closed issues:**
+
+- Can not render two lines at the same time [\#83](https://github.com/apertureless/vue-chartjs/issues/83)
+- Suggestion: Chart not re-rendering on window resize [\#82](https://github.com/apertureless/vue-chartjs/issues/82)
+- How can you change legend label colour? [\#81](https://github.com/apertureless/vue-chartjs/issues/81)
+- Doughnut with text in the middle [\#80](https://github.com/apertureless/vue-chartjs/issues/80)
+- Set chart width without affecting labels [\#79](https://github.com/apertureless/vue-chartjs/issues/79)
+- Loading data from server and displaying [\#78](https://github.com/apertureless/vue-chartjs/issues/78)
+- Why separate .js files in the examples? [\#77](https://github.com/apertureless/vue-chartjs/issues/77)
+- An in-range update of vue is breaking the build 🚨 [\#76](https://github.com/apertureless/vue-chartjs/issues/76)
+- An in-range update of vue-template-compiler is breaking the build 🚨 [\#75](https://github.com/apertureless/vue-chartjs/issues/75)
+- Uncaught TypeError: Cannot read property 'chartId' of undefined [\#74](https://github.com/apertureless/vue-chartjs/issues/74)
+- TypeError: child.\_updateFromParent is not a function [\#72](https://github.com/apertureless/vue-chartjs/issues/72)
+- Styling componement's surrounding \<div\> [\#70](https://github.com/apertureless/vue-chartjs/issues/70)
+
+## [v2.5.5](https://github.com/apertureless/vue-chartjs/tree/v2.5.5) (2017-03-24)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.4...v2.5.5)
+
+**Closed issues:**
+
+- Access chartjs methods [\#71](https://github.com/apertureless/vue-chartjs/issues/71)
+- Pass Reactive data into Scatterplot  [\#69](https://github.com/apertureless/vue-chartjs/issues/69)
+
+**Merged pull requests:**
+
+- Removed -s flag from yarn command in docs [\#73](https://github.com/apertureless/vue-chartjs/pull/73) ([mika76](https://github.com/mika76))
+
+## [v2.5.4](https://github.com/apertureless/vue-chartjs/tree/v2.5.4) (2017-03-19)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.3...v2.5.4)
+
+**Closed issues:**
+
+- An in-range update of eslint-config-standard is breaking the build 🚨 [\#68](https://github.com/apertureless/vue-chartjs/issues/68)
+- Using data from vuex to populate a line graph [\#67](https://github.com/apertureless/vue-chartjs/issues/67)
+- How to use without babel/webpack? [\#66](https://github.com/apertureless/vue-chartjs/issues/66)
+- The vue-chartjs/src entry point is still creating a new vue instance. [\#55](https://github.com/apertureless/vue-chartjs/issues/55)
+
+**Merged pull requests:**
+
+- 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)
+
+**Closed issues:**
+
+- Cannot modify styling using options [\#60](https://github.com/apertureless/vue-chartjs/issues/60)
+
+## [v2.5.2](https://github.com/apertureless/vue-chartjs/tree/v2.5.2) (2017-03-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.1...v2.5.2)
+
+**Closed issues:**
+
+- TypeError: child.\_updateFromParent is not a function [\#62](https://github.com/apertureless/vue-chartjs/issues/62)
+- child.\_updateFromParent is not a function [\#59](https://github.com/apertureless/vue-chartjs/issues/59)
+- dependency was not found [\#58](https://github.com/apertureless/vue-chartjs/issues/58)
+
+**Merged pull requests:**
+
+- Develop [\#63](https://github.com/apertureless/vue-chartjs/pull/63) ([apertureless](https://github.com/apertureless))
+- Fix typo for legacy tag [\#61](https://github.com/apertureless/vue-chartjs/pull/61) ([kylestev](https://github.com/kylestev))
+
+## [v2.5.1](https://github.com/apertureless/vue-chartjs/tree/v2.5.1) (2017-03-11)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.0...v2.5.1)
+
+**Closed issues:**
+
+- Lines are looking weird. [\#57](https://github.com/apertureless/vue-chartjs/issues/57)
+- Working with objects [\#48](https://github.com/apertureless/vue-chartjs/issues/48)
+- Mixins don't seem to trigger a refresh of the chart [\#44](https://github.com/apertureless/vue-chartjs/issues/44)
+
+## [v2.5.0](https://github.com/apertureless/vue-chartjs/tree/v2.5.0) (2017-03-08)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.4.1...v2.5.0)
+
+**Closed issues:**
+
+- UglifyJs is not happy with versions after 2.3.8 [\#54](https://github.com/apertureless/vue-chartjs/issues/54)
+- Why "main"  in Package.json is "src/index.js" and not "dist/vue-chartjs.js" [\#53](https://github.com/apertureless/vue-chartjs/issues/53)
+- Adding static data and dynamic data at the same time.  [\#52](https://github.com/apertureless/vue-chartjs/issues/52)
+
+**Merged pull requests:**
+
+- separate HorizontalBar component added [\#56](https://github.com/apertureless/vue-chartjs/pull/56) ([imbashamba](https://github.com/imbashamba))
+
+## [v2.4.1](https://github.com/apertureless/vue-chartjs/tree/v2.4.1) (2017-03-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.4.0...v2.4.1)
+
+## [v2.4.0](https://github.com/apertureless/vue-chartjs/tree/v2.4.0) (2017-03-03)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.9...v2.4.0)
+
+**Merged pull requests:**
+
+- Added browserify support [\#51](https://github.com/apertureless/vue-chartjs/pull/51) ([craigh411](https://github.com/craigh411))
+
+## [v2.3.9](https://github.com/apertureless/vue-chartjs/tree/v2.3.9) (2017-03-01)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.8...v2.3.9)

 **Closed issues:**

@@ -18,7 +193,6 @@

 **Closed issues:**

- Mixins don't seem to trigger a refresh of the chart [\#44](https://github.com/apertureless/vue-chartjs/issues/44)
 - Colors of dynamically added bars in bar graph are the default color instead of specified color [\#42](https://github.com/apertureless/vue-chartjs/issues/42)

 **Merged pull requests:**
--- a/README.md
+++ b/README.md
@@ -6,8 +6,10 @@
 [![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/localeval.svg)](https://www.npmjs.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

@@ -15,8 +17,8 @@

 ## Demo & Docs

- [Demo](http://demo.vue-chartjs.org/)
- [Docs](http://www.vue-chartjs.org/)
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)

 ### Compatibility

@@ -31,7 +33,45 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue

 ## Install

-Simply run `npm install vue-chartjs`
+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>
+```
+to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+
+## 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.
+
+- 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
+You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
+
+
+### Browserify / Webpack 1
+
+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.
+
+### 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 you three shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+

 ## How to use

@@ -82,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)
  }
@@ -117,6 +157,7 @@ However you can simply implement this by your own or use one of the two mixins w
 Both are included in the `mixins` module.

 The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
+However keep in mind the limitations of vue and javascript for mutations on arrays and objects. More info [here](http://vue-chartjs.org/#/home?id=reactive-data)

 ```javascript
 // MonthlyIncome.js
@@ -124,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)
  }
@@ -142,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)
  }
@@ -155,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)
  }
@@ -169,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)
  }
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')

 module.exports = {
  entry: {
-    app: './src/index.js'
+    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
--- a/build/webpack.release.full.js
+++ b/build/webpack.release.full.js
@@ -0,0 +1,92 @@
+var vue = require('vue-loader')
+var path = require('path')
+var webpack = require("webpack")
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var projectRoot = path.resolve(__dirname, '../')
+var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
+const npmCfg = require('../package.json');
+
+var banner = [
+    npmCfg.name + ' v' + npmCfg.version,
+    '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
+    npmCfg.homepage
+].join('\n')
+
+module.exports = {
+  entry: {
+    'vue-chartjs': './src/index.js'
+  },
+  output: {
+    filename: './dist/[name].full.js',
+    library: 'VueChartJs',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel'
+      },
+      {
+        test: /\.css$/,
+        loader: cssLoader
+      },
+      {
+        test: /\.s[a|c]ss$/,
+        loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
+      },
+      {
+        test: /\.json$/, loader: 'json'
+      }
+    ]
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  },
+  babel: {
+    presets: ['es2015'],
+    plugins: ['transform-runtime']
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ]
+}
+
+if (process.env.NODE_ENV === 'production') {
+
+  delete module.exports.devtool
+  module.exports.plugins = [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+    // new ExtractTextPlugin('build.css')
+  ]
+}
--- a/build/webpack.release.full.min.js
+++ b/build/webpack.release.full.min.js
@@ -0,0 +1,18 @@
+var config = require('./webpack.release.full.js')
+var webpack = require('webpack')
+
+config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
+
+delete config.devtool
+
+config.plugins = [
+  new webpack.optimize.UglifyJsPlugin({
+    sourceMap: false,
+    compress: {
+      warnings: false
+    }
+  }),
+  new webpack.optimize.OccurenceOrderPlugin()
+]
+
+module.exports = config
--- a/build/webpack.release.js
+++ b/build/webpack.release.js
@@ -4,6 +4,13 @@ var webpack = require("webpack")
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 var projectRoot = path.resolve(__dirname, '../')
 var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
+const npmCfg = require('../package.json');
+
+var banner = [
+    npmCfg.name + ' v' + npmCfg.version,
+    '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
+    npmCfg.homepage
+].join('\n')

 module.exports = {
  entry: {
@@ -12,7 +19,12 @@ module.exports = {
  output: {
    filename: './dist/[name].js',
    library: 'VueChartJs',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  externals: {
+    'vue': 'vue',
+    'chart.js': 'chart.js'
  },
  module: {
    preLoaders: [
@@ -46,6 +58,9 @@ module.exports = {
      {
        test: /\.s[a|c]ss$/,
        loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
+      },
+      {
+        test: /\.json$/, loader: 'json'
      }
    ]
  },
@@ -55,7 +70,10 @@ module.exports = {
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
-  }
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ]
 }

 if (process.env.NODE_ENV === 'production') {
--- a/build/webpack.release.min.js
+++ b/build/webpack.release.min.js
@@ -0,0 +1,18 @@
+var config = require('./webpack.release.js')
+var webpack = require('webpack')
+
+config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
+
+delete config.devtool
+
+config.plugins = [
+  new webpack.optimize.UglifyJsPlugin({
+    sourceMap: false,
+    compress: {
+      warnings: false
+    }
+  }),
+  new webpack.optimize.OccurenceOrderPlugin()
+]
+
+module.exports = config
--- a/dist/vue-chartjs.js
+++ b/dist/vue-chartjs.js
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,5 +1,5 @@
 ---
-search: english
+search: en
 ---

 # vue-chartjs
@@ -13,11 +13,11 @@ 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 -S`
+`yarn add vue-chartjs chart.js`

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

-`yarn add vue-chartjs@legacy -S`
+`yarn add vue-chartjs@legacy`

 ## Quick Start

@@ -70,7 +70,7 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 |---|---|
 | width | chart width |
 | height | chart height |
-| id | id of the canvas |
+| chart-id | id of the canvas |


 ## Examples
@@ -112,7 +112,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
@@ -239,6 +239,18 @@ export default Line.extend({
 </style>
 ```

+<p class="warning">
+  ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep in mind the javascript limitiations.
+  More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
+</p>
+
+### Limitations
+  <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 object

 Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
@@ -247,11 +259,7 @@ Sometimes you need more control over chart.js. Thats why you can access the char

 ### Bar Chart
 <p class="tip">
-  The bar chart has an **optional** third parameter, which is the type.
-  The default type is `bar` but you can pass `horizontalBar` if you want horizontal bars.
-
-  `renderChart (data, options, type) {}`
-
+  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
 </p>

 ![Bar](assets/bar.png)
@@ -278,3 +286,34 @@ Sometimes you need more control over chart.js. Thats why you can access the char
 ### Bubble

 ![Bubble](assets/bubble.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.
+
+- 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
+You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
+
+
+### Browserify / Webpack 1
+
+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 `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.
--- a/docs/config.js
+++ b/docs/config.js
@@ -1,12 +1,46 @@
-self.$config = {
+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/}
+]
+
+docute.init({
  title: 'vue-chartjs docs',
-  plugins: [
-    evanyou()
-  ],
  landing: true,
-  // or custom path
  landing: '_landing.html',
  repo: 'apertureless/vue-chartjs',
  twitter: 'apertureless',
-  'edit-link': 'https://github.com/apertureless/vue-chartjs/blob/master/docs'
-}
+  tocVisibleDepth: 2,
+  'edit-link': 'https://github.com/apertureless/vue-chartjs/blob/master/docs',
+  nav: {
+    default: [
+      {
+        title: 'Home', path: '/home'
+      },
+      {
+        title: 'Changelog', path: '/changelog', source: 'https://raw.githubusercontent.com/apertureless/vue-chartjs/develop/CHANGELOG.md'
+      },
+      {
+        title: 'Languages', type: 'dropdown', items: langs
+      }
+    ],
+    'de': [
+      {
+        title: 'Startseite', path: '/de/'
+      }
+    ]
+  },
+  plugins: [
+    evanyou(),
+    docsearch({
+      apiKey: 'b3544f7387612693644777553675d56a',
+      indexName: 'vue-chartjs',
+      // algolia docsearch allows you to search with tag filter
+      tags: ['en', 'de', 'ja', 'pt-br'],
+      // 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
@@ -0,0 +1,311 @@
+---
+search: de
+---
+
+# vue-chartjs
+**vue-chartjs** ist ein Wrapper für [Chart.js](https://github.com/chartjs/Chart.js) in vue. Man kann einfach wiederverwendbare Chart Components erstellen.
+
+## Einleitung
+`vue-chartjs` let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.
+
+It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.
+
+## Installation
+If you are working with Vue.js 2+ simple run:
+
+`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.
+
+`yarn add vue-chartjs@legacy`
+
+## Schnellstart
+
+You need to import the base chart and extend it. This gives much more flexibility when working with different data.
+You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.
+
+You can import the whole package or each module individual.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart(data, options)
+  }
+})
+```
+
+You can pass the `renderChart()` method, two arguments:
+
+- Data object
+- Options object
+
+### Data object
+
+The data object looks like this:
+
+```javascript
+{
+  labels: ['January', 'February'],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20]
+    }
+  ]
+}
+```
+
+For more information take a look at the [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) docs.
+
+## Props
+
+There are some basic props defined in the BaseCharts. Because you `extend()` them, they are *invisible*, but you can overwrite them:
+
+| Prop | Description |
+|---|---|
+| width | chart width |
+| height | chart height |
+| chart-id | id of the canvas |
+
+
+## Examples
+
+Here are some exmaples
+
+### Chart with props
+
+You can create the data and options props to pass data to the chart.
+
+```javascript
+// LineChart.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+After you add your component you can use it:
+
+```html
+ <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+```
+
+If you want to overwrite the width and height:
+
+```html
+ <line-chart
+  :data="{your data object}"
+  :options="{responsive: false, maintainAspectRatio: false}"
+  :width="400"
+  :height="200"
+  >
+ </line-chart>
+```
+
+<p class="warning">
+  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
+
+```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})
+  }
+})
+```
+
+### Reusebale Components
+
+If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.
+
+## Reactive Data
+
+Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achive this.
+
+- `reactiveProp`
+- `reactiveData`
+
+Both mixins to actually the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop names `chartData` and add a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
+
+`reactiveData` simply creates a local chartData variable which is not a prop! And add a watcher.
+This is only usefull, if you need single purpose charts and make an API call inside your chart component.
+
+```javascript
+data () {
+  return {
+    chartData: null
+  }
+}
+```
+
+### Example
+
+**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">
+  ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep in mind the javascript limitiations.
+  More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
+</p>
+
+### Limitations
+  <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 object
+
+Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
+
+## Available Charts
+
+### Bar Chart
+<p class="tip">
+  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
+</p>
+
+![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)
+
+## Webpack, Browserify and dist files.
+
+If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
+This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
+And you end up with two vue instances.
+
+If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources.
+If you know what you're doing you can import directly from the transpiled es sources:
+
+```
+import { Line } from 'vue-chartjs/es'
+```
+
+### Browserify
+
+In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
+
+```
+{
+"presets": ["es2015"]
+}
+```
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,8 +11,9 @@
  <!-- don't remove this part start -->
  <div id="app"></div>
  <script src="https://unpkg.com/docute-evanyou"></script>
+  <script src="https://unpkg.com/docute/dist/docute.js"></script>
+  <script src="https://unpkg.com/docute/plugins/docsearch.js"></script>
  <script src="./config.js"></script>
-  <script src="https://unpkg.com/docute@2/dist/docute.js"></script>
  <!-- don't remove this part end -->

  <!-- Google Analytics -->
--- a/docs/ja/README.md
+++ b/docs/ja/README.md
@@ -0,0 +1,318 @@
+---
+search: ja
+---
+
+# vue-chartjs
+**vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
+
+## イントロ
+`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
+
+chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
+
+## インストール
+Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:
+
+`yarn add vue-chartjs chart.js`
+
+Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。
+
+`yarn add vue-chartjs@legacy`
+
+## クイックスタート
+
+BaseChartをインポートしてextendします。
+
+異なるデータのチャートを表示するときに柔軟性が大幅に向上します。
+コンポーネントをカプセル化し、プロパティをコンポーネントのデータに渡したり、コンポーネント内に直接データを記述することができます。ただし直接データを記述した場合はコンポーネントの再利用ができません。
+
+パッケージ全体またはモジュールごとに個別にインポートすることができます。
+
+```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()メソッドに2つの引数を渡すことができます:
+
+- 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) のドキュメントをご覧ください。
+## プロパティ
+
+BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
+
+| プロパティ | 説明 |
+|---|---|
+| width | chartの表示幅 |
+| height | chartの表示高さ |
+| chart-id | canvas要素のid |
+
+
+## 実装例
+
+いくつか例を記載します。
+
+### プロパティの利用
+
+dataとoptionsプロパティを作成して、チャートにデータを渡すことが出来ます。
+
+```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">
+`width` と `height` を反映させるためには、 `responsive：false` を設定しなければならないことに注意してください。
+</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` ではこれを実現するために2つのミックスインを提供します。
+
+- `reactiveProp`
+- `reactiveData`
+
+この２つのミックスインは実際には同じものです。 ほとんどの場合 `reactiveProp` を使用します。これはチャートコンポーネントのロジックを拡張し、自動的に `chartData` という名前のプロパティを追加し、さらにこのプロパティに対して `vue watch` を追加します。 データの更新に対して、データセット内のデータのみが変更されたときには `update()` を呼び出し、新しいデータセットが追加された場合は `renderChart()` が呼び出されます。
+
+`reactiveData` は単純に(プロパティではない!!)ローカルの chartData 変数を追加し、ウォッチャーを追加します。
+単一の目的のチャートのみ必要でチャートコンポーネント内で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>[注意事項](https://jp.vuejs.org/v2/guide/list.html#注意事項)</li>
+    <li>[変更検出の注意事項](https://jp.vuejs.org/v2/guide/reactivity.html#変更検出の注意事項)</li>
+    <li>[vm.$watch](https://jp.vuejs.org/v2/api/#vm-watch)</li>
+  </ul>
+
+## Chart.js オブジェクト
+
+場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this._chart` を使ってアクセスします。
+
+## 利用可能なグラフ
+
+### 棒グラフ
+<p class="tip">
+  棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
+</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)
+
+
+## ビルド方法の違い
+あなたが使用するビルドツールに依存した３つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または 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を使用している場合は、__トランスパイル__ され UMD Moduleとして __バンドル__ された `vue-chartjs.js` を使用します。
+
+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` はインストールする必要があります。
--- 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/package.json
+++ b/package.json
@@ -1,12 +1,34 @@
 {
  "name": "vue-chartjs",
-  "version": "2.3.9",
+  "version": "2.6.5",
  "description": "vue.js wrapper for chart.js",
-  "author": "Jakub Juszczak <jakub@nextindex.de>",
+  "author": "Jakub Juszczak <jakub@posteo.de>",
+  "homepage": "http://vue-chartjs.org",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "Thorsten Lünborg",
+      "web": "https://github.com/LinusBorg"
+    },
+    {
+      "name": "Juan Carlos Alonso",
+      "web": "https://github.com/jcalonso"
+    }
+  ],
+  "maintainers": [
+    {
+      "name": "Jakub Juszczak",
+      "email": "jakub@posteo.de",
+      "web": "http://www.jakubjuszczak.de"
+    }
+  ],
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com:apertureless/vue-chartjs.git"
  },
+  "bugs": {
+    "url": "https://github.com/apertureless/vue-chartjs/issues"
+  },
  "keywords": [
    "ChartJs",
    "Vue",
@@ -14,82 +36,117 @@
    "Wrapper",
    "Charts"
  ],
-  "main": "src/index.js",
+  "main": "dist/vue-chartjs.js",
+  "unpkg": "dist/vue-chartjs.full.min.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
  "files": [
    "src",
-    "dist"
+    "dist",
+    "es"
  ],
  "scripts": {
    "dev": "node build/dev-server.js",
-    "build": "node build/build.js",
+    "build": "yarn run release && yarn run build:es",
+    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js"
+    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js && webpack --progress --hide-modules --config  ./build/webpack.release.full.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.full.min.js",
+    "prepublish": "yarn run lint && yarn run test && yarn run build"
  },
  "dependencies": {
-    "chart.js": "^2.5.0",
-    "vue": "^2.2.1"
+    "lodash": "^4.17.4"
+  },
+  "peerDependencies": {
+    "chart.js": "^2.6.0",
+    "vue": "^2.3.4"
  },
  "devDependencies": {
-    "babel-runtime": "^6.23.0",
-    "babel-core": "^6.23.1",
-    "babel-loader": "^6.3.2",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-runtime": "^6.23.0",
    "chai": "^3.5.0",
-    "chromedriver": "^2.21.2",
+    "chart.js": "^2.6.0",
+    "chromedriver": "^2.28.0",
    "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^5.0.1",
-    "css-loader": "^0.26.2",
-    "eslint": "^3.7.1",
-    "eslint-config-standard": "^6.2.0",
-    "eslint-friendly-formatter": "^2.0.5",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-html": "^1.3.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
+    "cross-env": "^3.2.4",
+    "cross-spawn": "^5.1.0",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-html": "^2.0.1",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-node": "^4.2.2",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.13.3",
+    "express": "^4.15.2",
    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
+    "file-loader": "^0.10.1",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.17.2",
-    "inject-loader": "^3.0.0-beta2",
+    "http-proxy-middleware": "^0.17.4",
+    "inject-loader": "^3.0.0",
    "isparta-loader": "^2.0.0",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
+    "karma": "^1.5.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha": "^1.2.0",
-    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.7.0",
-    "lodash": "^4.17.4",
-    "lolex": "^1.4.0",
+    "karma-spec-reporter": "0.0.30",
+    "karma-webpack": "1.8.1",
+    "lolex": "^1.6.0",
    "mocha": "^3.1.0",
-    "nightwatch": "^0.9.8",
-    "ora": "^0.3.0",
+    "nightwatch": "^0.9.14",
+    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.13",
-    "selenium-server": "^3.0.1",
-    "shelljs": "^0.7.4",
-    "sinon": "^1.17.3",
-    "sinon-chai": "^2.8.0",
+    "selenium-server": "^3.3.1",
+    "shelljs": "^0.7.7",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.9.0",
    "url-loader": "^0.5.8",
-    "vue-hot-reload-api": "^2.0.11",
+    "vue": "^2.3.4",
+    "vue-hot-reload-api": "^2.1.0",
    "vue-html-loader": "^1.2.4",
-    "vue-loader": "^11.1.3",
-    "vue-style-loader": "^2.0.3",
-    "vue-template-compiler": "^2.2.1",
+    "vue-loader": "^12.2.1",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.4",
    "webpack": "^1.13.2",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^1.1.1"
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.1",
+    "webpack-merge": "1.1.1"
+  },
+  "engines": {
+    "node": ">=6.9.0"
+  },
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
+  "greenkeeper": {
+    "ignore": [
+      "extract-text-webpack-plugin",
+      "karma-webpack",
+      "webpack",
+      "webpack-merge"
+    ]
  }
 }
--- a/src/BaseCharts/Bar.js
+++ b/src/BaseCharts/Bar.js
@@ -61,11 +61,11 @@ export default Vue.extend({
  },

  methods: {
-    renderChart (data, options, type) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
        this.$refs.canvas.getContext('2d'), {
-          type: type || 'bar',
+          type: 'bar',
          data: data,
          options: chartOptions
        }
--- a/src/BaseCharts/HorizontalBar.js
+++ b/src/BaseCharts/HorizontalBar.js
@@ -0,0 +1,79 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
+
+  props: {
+    chartId: {
+      default: 'horizontalbar-chart',
+      type: String
+    },
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      defaultOptions: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            },
+            gridLines: {
+              display: false
+            }
+          }],
+          xAxes: [ {
+            gridLines: {
+              display: false
+            },
+            categoryPercentage: 0.5,
+            barPercentage: 0.2
+          }]
+        }
+      }
+    }
+  },
+
+  methods: {
+    renderChart (data, options, type) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'horizontalBar',
+          data: data,
+          options: chartOptions
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
+  }
+})
--- a/src/examples/HorizontalBarExample.js
+++ b/src/examples/HorizontalBarExample.js
@@ -0,0 +1,16 @@
+import HorizontalBarChart from '../BaseCharts/HorizontalBar'
+
+export default HorizontalBarChart.extend({
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 import Bar from './BaseCharts/Bar'
+import HorizontalBar from './BaseCharts/HorizontalBar'
 import Doughnut from './BaseCharts/Doughnut'
 import Line from './BaseCharts/Line'
 import Pie from './BaseCharts/Pie'
@@ -6,9 +7,12 @@ import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
 import Bubble from './BaseCharts/Bubble'
 import mixins from './mixins/index.js'
+import npmCfg from '../package.json'

 const VueCharts = {
+  version: npmCfg.version,
  Bar,
+  HorizontalBar,
  Doughnut,
  Line,
  Pie,
@@ -23,6 +27,7 @@ export default VueCharts
 export {
  VueCharts,
  Bar,
+  HorizontalBar,
  Doughnut,
  Line,
  Pie,
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,9 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './examples/App'
+
+/* eslint-disable no-new */
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
--- a/src/mixins/reactiveData.js
+++ b/src/mixins/reactiveData.js
@@ -26,7 +26,26 @@ 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
--- a/src/mixins/reactiveProp.js
+++ b/src/mixins/reactiveProp.js
@@ -4,7 +4,6 @@ module.exports = {
      required: true
    }
  },
-
  watch: {
    'chartData': {
      handler (newData, oldData) {
@@ -27,7 +26,26 @@ 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
--- a/test/unit/.eslintrc
+++ b/test/unit/.eslintrc
@@ -6,5 +6,8 @@
    "expect": true,
    "jasmine": true,
    "sinon": true
+  },
+  "rules": {
+    "no-unused-expressions": 0
  }
 }
--- a/test/unit/specs/HorizontalBar.spec.js
+++ b/test/unit/specs/HorizontalBar.spec.js
@@ -0,0 +1,64 @@
+import Vue from 'vue'
+import HorizontalBarChart from 'src/examples/HorizontalBarExample'
+
+describe('HorizontalBarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
+  it('should render a canvas', () => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#horizontalbar-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(
+          HorizontalBarChart, {
+            props: {
+              chartId: 'horizontalbarchartprop'
+            }
+          }
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#horizontalbarchartprop')).not.to.be.an('undefined')
+  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$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()
+    })
+  })
+})
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
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
Jakub Juszczak	d60c63edbb	💎 Release new version 2.6.3 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-05-14 12:56:24 +02:00
Jakub Juszczak	da6789d4ba	⬆️ Update dependency vue to 2.3.3	2017-05-14 12:54:44 +02:00
Jakub	9a780d9922	Fix npm downloads badge	2017-05-09 22:33:10 +02:00
Jakub	be6f3956cf	Merge pull request #105 from guilherfp/patch-1 Update README.md	2017-05-07 21:26:32 +02:00
Guilherme Freitas Pacheco	aeee51dfc8	Update README.md	2017-05-07 15:33:43 -03:00
Jakub Juszczak	92c05b838c	🐛 📝 Update docs	2017-05-05 19:38:34 +02:00
Jakub Juszczak	4be1e8f9da	✨ Add japanese docs to config	2017-05-05 19:35:55 +02:00
Jakub	3e641ce620	Merge pull request #102 from euledge/japanese_translate translated README.md into Japanese	2017-05-05 19:32:41 +02:00
Hitoshi Kuroyanagi	fae16ff894	translated README.md into Japanese	2017-05-05 21:24:40 +09:00
Jakub Juszczak	c325e573a2	📝 Update readme	2017-05-02 08:39:25 +02:00
Jakub	78c212f116	Merge pull request #100 from extend1994/add-badge add CDNJS version badge in README.md	2017-05-01 11:33:37 +02:00
LboAnn	3e1b5afe7e	add CDNJS version badge in README.md This badge will show the version on CDNJS!	2017-05-01 11:14:30 +02:00
Jakub Juszczak	47c1543e6c	📝 Update CHANGELOG	2017-04-29 15:30:25 +02:00
Jakub Juszczak	25d3766687	💎 Release new version 2.6.2 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-04-29 15:27:18 +02:00
Jakub	1c1ad3c146	Merge pull request #96 from apertureless/feature/update_dependencies ⬆️ Update dev dependencies	2017-04-29 15:22:48 +02:00
Jakub Juszczak	2791e8ed61	⬆️ Update dev dependencies	2017-04-29 15:17:45 +02:00
Jakub Juszczak	06cb7e79f6	📝 Update CHANGELOG Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-04-21 16:21:33 +02:00
Jakub Juszczak	6211d034e6	💎 Release new version 2.6.1 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-04-21 16:17:37 +02:00
Jakub Juszczak	f32d989334	🔥 Remove deprecated type argument in barchart The BarChart got splitted into HorizontalBar and Bar, so the type is not nessasary anymore.	2017-04-21 16:16:31 +02:00
Jakub Juszczak	ba11190e39	📝 Update CHANGELOG	2017-04-09 13:02:53 +02:00
Jakub Juszczak	7234292a49	💎 Release new version 2.6.0 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-04-09 12:59:49 +02:00
Jakub Juszczak	c91fee9a1a	🐛 Fix tags for docsearch	2017-04-06 11:16:47 +02:00
Jakub Juszczak	7e7e5d0028	✨ Add docsearch plugin from agolia	2017-04-06 11:06:32 +02:00
Jakub Juszczak	2ab4cacf12	🐛 Fix typo	2017-04-05 16:30:11 +02:00
Jakub Juszczak	227f698647	📝 Update DOCS	2017-04-05 16:28:14 +02:00
Jakub Juszczak	8d893eb8b2	📝 Update README	2017-04-05 16:28:08 +02:00
Jakub Juszczak	1b527e9c67	💎 Release new version 2.6.0-rc1	2017-04-05 16:05:20 +02:00
Jakub Juszczak	3103d5acd9	✨ Add browser full build	2017-04-05 16:04:24 +02:00
Jakub Juszczak	2c8d1169e8	✨ Add version to object	2017-04-05 16:04:07 +02:00
Jakub	6ac651e55a	Merge pull request #84 from gcoguiec/develop Update release build to not include externals.	2017-04-05 14:07:40 +02:00
Guillaume Coguiec	129a52e4d7	Restore lodash as a dependency.	2017-04-03 15:19:20 -04:00
Guillaume Coguiec	11015b4080	Remove lodash from externals.	2017-04-03 15:18:23 -04:00
Jakub Juszczak	56edbf2bd4	✨ Add language select and german translation	2017-04-01 20:07:56 +02:00
Jakub Juszczak	77c63d4dd4	⬆️ Update docute docs	2017-04-01 19:59:25 +02:00
Jakub Juszczak	14cb2f9e62	📝 Update docs	2017-03-30 16:34:41 +02:00
Guillaume Coguiec	9e6b407a1e	Update release build to not include externals.	2017-03-29 14:57:26 -04:00
Jakub Juszczak	94dcc0fd0e	💎 Release new version 2.5.6	2017-03-29 17:14:13 +02:00
Jakub Juszczak	cb51f2a187	⬆️ Update dependencies vue@2.2.6	2017-03-29 17:13:29 +02:00
Jakub Juszczak	770ff26be4	📝 Update CHANGELOG	2017-03-24 17:06:28 +01:00
Jakub Juszczak	13e783c29d	💎 Release new version 2.5.5	2017-03-24 17:03:48 +01:00
Jakub Juszczak	b0b8d88794	🔥 Remove greenkeeper badge	2017-03-24 17:02:50 +01:00
Jakub Juszczak	dc8e198f10	⬆️ Update dependencies	2017-03-24 17:02:44 +01:00
Jakub Juszczak	348de825bf	✨ Add new entry for development	2017-03-22 19:02:49 +01:00
Jakub	87fb35749e	Merge pull request #73 from mika76/patch-1 Removed -s flag from yarn command in docs	2017-03-22 15:50:09 +01:00
Mladen Mihajlović	0f697a2bc5	Removed -s flag from yarn command There is no -s flag (https://github.com/yarnpkg/yarn/issues/2532)	2017-03-22 07:03:48 +02:00
Jakub Juszczak	8c670775f5	Merge branch 'develop' * develop: 💎 Release new version 2.5.4 🔥 Remove browser field from npm	2017-03-19 17:23:03 +01:00
Jakub Juszczak	d6ff509dc0	💎 Release new version 2.5.4	2017-03-19 17:21:45 +01:00
Jakub Juszczak	94ce9f9b96	🔥 Remove browser field from npm	2017-03-19 17:21:17 +01:00
Jakub Juszczak	5fcf1eb79c	Merge branch 'develop' * develop: ⬆️ Update dependencies	2017-03-18 15:04:58 +01:00
Jakub Juszczak	50f5aed6d5	⬆️ Update dependencies	2017-03-18 15:04:29 +01:00
Jakub Juszczak	2573f438ac	Merge branch 'develop' * develop: 📝 Update CHANGELOG	2017-03-17 17:00:23 +01:00
Jakub Juszczak	a982fde310	📝 Update CHANGELOG	2017-03-17 17:00:11 +01:00
Jakub Juszczak	2894a1d64c	Merge branch 'develop' * develop: 🐛 Fix badge position 🐛 Fix lintin 🐛 Fix dependencies docs(readme): add Greenkeeper badge chore(package): update dependencies	2017-03-17 16:58:17 +01:00
Jakub Juszczak	a00fd1c7a1	🐛 Fix badge position	2017-03-17 16:57:54 +01:00
Jakub	db3bef1bae	Merge pull request #65 from apertureless/greenkeeper/initial Update dependencies to enable Greenkeeper 🌴	2017-03-17 16:55:51 +01:00
Jakub Juszczak	acc8904c54	🐛 Fix lintin	2017-03-17 16:41:38 +01:00
Jakub Juszczak	e7c1158c25	🐛 Fix dependencies	2017-03-17 16:41:33 +01:00
Jakub Juszczak	8e305d8c46	Merge branch 'develop' * develop: 💎 Release new version 2.5.3 ✨ Add browser build	2017-03-17 15:48:32 +01:00
Jakub Juszczak	3fc76050f6	💎 Release new version 2.5.3	2017-03-17 15:48:10 +01:00
Jakub Juszczak	e2a8f3ca3c	✨ Add browser build	2017-03-17 15:41:58 +01:00
greenkeeper[bot]	3ecd0c8908	docs(readme): add Greenkeeper badge https://greenkeeper.io/	2017-03-14 22:12:27 +00:00
greenkeeper[bot]	1c2bf08111	chore(package): update dependencies https://greenkeeper.io/	2017-03-14 22:12:06 +00:00
Jakub Juszczak	d6a53a6bd6	Merge branch 'develop' * develop: 📝 Update CHANGELOG	2017-03-14 13:02:12 +01:00
Jakub Juszczak	6913312be9	📝 Update CHANGELOG	2017-03-14 13:01:58 +01:00
Jakub Juszczak	e0fb6ec8f3	Merge branch 'develop' * develop: 💎 Release new version 2.5.2	2017-03-14 13:00:47 +01:00
Jakub Juszczak	2a5512ab9a	💎 Release new version 2.5.2	2017-03-14 12:59:08 +01:00
Jakub	71e032db7d	Merge pull request #63 from apertureless/develop Develop	2017-03-13 13:22:55 +01:00
Jakub	818559f829	Merge pull request #61 from kylestev/patch-1 Fix typo for legacy tag	2017-03-13 13:22:34 +01:00
Kyle Stevenson	374d978577	Fix typo for legacy tag	2017-03-12 22:21:50 -07:00
Jakub Juszczak	fe85d47b61	💎 Release new version 2.5.1	2017-03-11 12:28:57 +01:00
Jakub Juszczak	447223cbef	✨ Add lodash as direct dependency as es6 module is not bundled	2017-03-11 12:27:19 +01:00
Jakub Juszczak	504c0b1d91	🐛 Fix link in readme	2017-03-08 22:09:35 +01:00
Jakub Juszczak	8795e456f1	📝 Update README	2017-03-08 21:38:53 +01:00
Jakub Juszczak	a71429e146	📝 Update docs with reactivity limitations	2017-03-08 21:37:46 +01:00
Jakub Juszczak	90f2ffd63c	📝 Update Changelog	2017-03-08 21:20:25 +01:00
Jakub Juszczak	ea1f943933	💎 Release new version 2.5.0	2017-03-08 21:18:02 +01:00
Jakub Juszczak	7367ea115d	📝 Update docs	2017-03-08 21:17:06 +01:00
Jakub Juszczak	eec2c402b6	🔥 Remove dist file from repository	2017-03-08 21:13:35 +01:00
Jakub	9bd7712f3e	Merge pull request #56 from imbashamba/horizontal_bar_component separate HorizontalBar component added	2017-03-07 20:32:03 +01:00
Сергей Степанов	fcaa3dee91	separate HorizontalBar component added, to remove optional 'type' parameter at Bar, which was ignored inside reactive mixins	2017-03-07 14:14:46 +03:00
Jakub Juszczak	1bb567e074	📝 Update CHANGELOG	2017-03-04 15:33:09 +01:00
Jakub Juszczak	e38e208532	📝 Update docs	2017-03-04 15:32:10 +01:00
Jakub Juszczak	9238f1c8cd	💎 Release new version 2.4.1	2017-03-04 15:00:44 +01:00
Jakub Juszczak	37d9a6f21f	✨ Add es modules and fallback to umd as main	2017-03-04 15:00:27 +01:00
Jakub	26dea95644	📝 Update gitter chat badge	2017-03-03 18:10:50 +01:00
Jakub	6baa5d097b	📝 Update README with gitter chat Add gitter chat for questions and problems.	2017-03-03 18:09:38 +01:00
Jakub Juszczak	d735af866a	📝 Update Changelog	2017-03-03 16:19:31 +01:00
Jakub Juszczak	c24dc84e2f	💎 Release new version 2.4.0	2017-03-03 16:17:48 +01:00
Jakub Juszczak	d3f7058685	📝 Update README and docs	2017-03-03 16:00:06 +01:00
Jakub Juszczak	6bdda62c62	Merge branch 'develop' of github.com:apertureless/vue-chartjs into develop * 'develop' of github.com:apertureless/vue-chartjs: Added browserify support	2017-03-03 15:33:04 +01:00
Jakub Juszczak	491b2514cd	✨ Add unkpg build to package.json	2017-03-03 14:50:56 +01:00
Jakub	819b96b06a	Merge pull request #51 from craigh411/patch-1 Added browserify support	2017-03-02 19:36:38 +01:00
Craig Humphreys	ada0fab17c	Added browserify support Added the `babilify` transform for `browserify` for `packge.json` so the src files can be transpiled in browserify projects.	2017-03-02 11:13:03 +00:00