💎 Release new version 2.7.0

Merge pull request #140 from apertureless/feature/update_tests
✅ Update tests for addPlugin method
2025-10-29 18:00:20 +00:00 · 2017-07-04 11:03:18 +02:00 · 2017-07-04 10:47:17 +02:00 · 2017-07-04 10:44:22 +02:00 · 2017-07-04 10:31:21 +02:00 · 2017-07-04 10:30:53 +02:00
40 changed files with 1384 additions and 103 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,55 @@
 # Change Log

+## [v2.6.5](https://github.com/apertureless/vue-chartjs/tree/v2.6.5) (2017-06-10)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.4...v2.6.5)
+
+## [v2.6.4](https://github.com/apertureless/vue-chartjs/tree/v2.6.4) (2017-06-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.3...v2.6.4)
+
+**Closed issues:**
+
+- Transition leave-active-class not working [\#117](https://github.com/apertureless/vue-chartjs/issues/117)
+- chartOptions reactivity [\#116](https://github.com/apertureless/vue-chartjs/issues/116)
+- Cannot switch off legend [\#114](https://github.com/apertureless/vue-chartjs/issues/114)
+- run error on my mac pro [\#113](https://github.com/apertureless/vue-chartjs/issues/113)
+- Update install instructions in docs [\#112](https://github.com/apertureless/vue-chartjs/issues/112)
+- Typo in docs [\#111](https://github.com/apertureless/vue-chartjs/issues/111)
+- Charts are given a fixed width, even when they are set to be responsive [\#108](https://github.com/apertureless/vue-chartjs/issues/108)
+- Use Reactive Data with \<script\> version of vue-chartjs [\#107](https://github.com/apertureless/vue-chartjs/issues/107)
+
+**Merged pull requests:**
+
+- Fix typo in docs [\#115](https://github.com/apertureless/vue-chartjs/pull/115) ([euledge](https://github.com/euledge))
+- :memo: Add pt-br readme support [\#110](https://github.com/apertureless/vue-chartjs/pull/110) ([kimuraz](https://github.com/kimuraz))
+- Fix reactive mixins animation re-rendering issue. [\#109](https://github.com/apertureless/vue-chartjs/pull/109) ([MuseofMoose](https://github.com/MuseofMoose))
+
+## [v2.6.3](https://github.com/apertureless/vue-chartjs/tree/v2.6.3) (2017-05-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.2...v2.6.3)
+
+**Closed issues:**
+
+- Reactivity of Options [\#106](https://github.com/apertureless/vue-chartjs/issues/106)
+- Do not use built-in or reserved HTML elements as component id: MenuItem [\#104](https://github.com/apertureless/vue-chartjs/issues/104)
+- Is it possible to use with axios? [\#103](https://github.com/apertureless/vue-chartjs/issues/103)
+- How to change momentjs locale for time scale? [\#101](https://github.com/apertureless/vue-chartjs/issues/101)
+- It seems that the reactiveProp couldn't let the chart update itself [\#99](https://github.com/apertureless/vue-chartjs/issues/99)
+- vue-chartjs not working with lodash-webpack-plugin installed [\#97](https://github.com/apertureless/vue-chartjs/issues/97)
+- multi lines with same options [\#95](https://github.com/apertureless/vue-chartjs/issues/95)
+- Zoom And Pan Options in Vue Charts [\#94](https://github.com/apertureless/vue-chartjs/issues/94)
+
+**Merged pull requests:**
+
+- Update README.md [\#105](https://github.com/apertureless/vue-chartjs/pull/105) ([guilherfp](https://github.com/guilherfp))
+- translated README.md into Japanese [\#102](https://github.com/apertureless/vue-chartjs/pull/102) ([euledge](https://github.com/euledge))
+- add CDNJS version badge in README.md [\#100](https://github.com/apertureless/vue-chartjs/pull/100) ([extend1994](https://github.com/extend1994))
+
+## [v2.6.2](https://github.com/apertureless/vue-chartjs/tree/v2.6.2) (2017-04-29)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.1...v2.6.2)
+
+**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)

@@ -73,7 +123,7 @@

 **Merged pull requests:**

- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/integration/greenkeeper))
+- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/apps/greenkeeper))

 ## [v2.5.3](https://github.com/apertureless/vue-chartjs/tree/v2.5.3) (2017-03-17)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.2...v2.5.3)
--- a/README.md
+++ b/README.md
@@ -6,9 +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

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

@@ -26,7 +27,7 @@
 - v2 later
  - Vue.js 2.x

-After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
+After the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm.
 No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
 If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)

@@ -121,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)
  }
@@ -148,7 +149,7 @@ export default {
 ## Reactivity

 Chart.js does not update or re-render the chart if new data is passed.
-However you can simply implement this by your own or use one of the two mixins which are included.
+However you can simply implement this on your own or use one of the two mixins which are included.

 - `reactiveProp`
 - `reactiveData`
@@ -164,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)
  }
@@ -182,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)
  }
@@ -195,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)
  }
@@ -209,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)
  }
@@ -246,6 +247,10 @@ export default Line.extend({

 ![Bubble](assets/bubble.png)

+### Scatter
+
+![Scatter](assets/scatter.png)
+
 ## Build Setup

 ``` bash
@@ -268,7 +273,7 @@ npm run e2e
 npm test
 ```

-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

 ## Contributing

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

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

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

@@ -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
@@ -134,7 +134,7 @@ export default Bar.extend({
        ]
      }
    }
-  }
+  },
  mounted () {
    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
  }
@@ -255,6 +255,26 @@ export default Line.extend({

 Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`

+## Inline plugins
+
+In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described.
+
+If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()`
+You should call `addPlugin()` before the `renderChart()` method.
+
+### Example
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
 ## Available Charts

 ### Bar Chart
@@ -287,6 +307,12 @@ Sometimes you need more control over chart.js. Thats why you can access the char

 ![Bubble](assets/bubble.png)

+### Scatter
+
+This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type.
+
+![Scatter](assets/scatter.png)
+

 ## Explanation of Different Builds
 There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
@@ -312,8 +338,18 @@ You can use `vue-chartjs` directly in the browser without any build setup. Like

 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.

-However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+However Vue.js and Chart.js are `peerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.

 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
-It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+
+## Resources
+
+You can find here some Resources like tutorials on how to use `vue-chartjs`
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)
--- a/docs/config.js
+++ b/docs/config.js
@@ -1,6 +1,8 @@
 const langs = [
  {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
-  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/}
+  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
+  {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
+  {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}
 ]

 docute.init({
@@ -35,7 +37,7 @@ docute.init({
      apiKey: 'b3544f7387612693644777553675d56a',
      indexName: 'vue-chartjs',
      // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de'],
+      tags: ['en', 'de', 'ja', 'pt-br'],
      // this plugin does require a url too
      // where docsearch fetches contents
      url: 'https://vue-chartjs.org'
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -13,7 +13,7 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
 ## Installation
 If you are working with Vue.js 2+ simple run:

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

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

@@ -134,7 +134,7 @@ export default Bar.extend({
        ]
      }
    }
-  }
+  },
  mounted () {
    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
  }
--- 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,6 +1,6 @@
 {
  "name": "vue-chartjs",
-  "version": "2.6.2",
+  "version": "2.7.0",
  "description": "vue.js wrapper for chart.js",
  "author": "Jakub Juszczak <jakub@posteo.de>",
  "homepage": "http://vue-chartjs.org",
@@ -60,19 +60,19 @@
    "lodash": "^4.17.4"
  },
  "peerDependencies": {
-    "chart.js": "^2.5.0",
-    "vue": "^2.3.0"
+    "chart.js": "^2.6.0",
+    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
+    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "chai": "^3.5.0",
-    "chart.js": "^2.5.0",
+    "chart.js": "^2.6.0",
    "chromedriver": "^2.28.0",
    "connect-history-api-fallback": "^1.1.0",
    "cross-env": "^3.2.4",
@@ -117,12 +117,12 @@
    "sinon": "^2.1.0",
    "sinon-chai": "^2.9.0",
    "url-loader": "^0.5.8",
-    "vue": "^2.3.0",
+    "vue": "^2.3.4",
    "vue-hot-reload-api": "^2.1.0",
    "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.0.2",
+    "vue-loader": "^12.2.1",
    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.3.0",
+    "vue-template-compiler": "^2.3.4",
    "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
@@ -56,24 +56,31 @@ export default Vue.extend({
            barPercentage: 0.2
          }]
        }
-      }
+      },
+      plugins: []
    }
  },

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

  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

@@ -68,13 +72,16 @@ export default Vue.extend({
        this.$refs.canvas.getContext('2d'), {
          type: 'bubble',
          data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
        }
      )
      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -39,11 +39,15 @@ export default Vue.extend({
  data () {
    return {
      defaultOptions: {
-      }
+      },
+      plugins: []
    }
  },

  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

@@ -51,13 +55,16 @@ export default Vue.extend({
        this.$refs.canvas.getContext('2d'), {
          type: 'doughnut',
          data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
        }
      )
      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/HorizontalBar.js
+++ b/src/BaseCharts/HorizontalBar.js
@@ -56,24 +56,31 @@ export default Vue.extend({
            barPercentage: 0.2
          }]
        }
-      }
+      },
+      plugins: []
    }
  },

  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
    renderChart (data, options, type) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
        this.$refs.canvas.getContext('2d'), {
          type: 'horizontalBar',
          data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
        }
      )
      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -54,11 +54,15 @@ export default Vue.extend({
            }
          }]
        }
-      }
+      },
+      plugins: []
    }
  },

  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

@@ -66,13 +70,16 @@ export default Vue.extend({
        this.$refs.canvas.getContext('2d'), {
          type: 'line',
          data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
        }
      )
      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -39,11 +39,15 @@ export default Vue.extend({
  data () {
    return {
      defaultOptions: {
-      }
+      },
+      plugins: []
    }
  },

  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

@@ -51,13 +55,16 @@ export default Vue.extend({
        this.$refs.canvas.getContext('2d'), {
          type: 'pie',
          data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
        }
      )
      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -39,11 +39,15 @@ export default Vue.extend({
  data () {
    return {
      defaultOptions: {
-      }
+      },
+      plugins: []
    }
  },

  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

@@ -51,13 +55,16 @@ export default Vue.extend({
        this.$refs.canvas.getContext('2d'), {
          type: 'polarArea',
          data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
        }
      )
      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -39,11 +39,15 @@ export default Vue.extend({
  data () {
    return {
      defaultOptions: {
-      }
+      },
+      plugins: []
    }
  },

  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

@@ -51,13 +55,16 @@ export default Vue.extend({
        this.$refs.canvas.getContext('2d'), {
          type: 'radar',
          data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
        }
      )
      this._chart.generateLegend()
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/Scatter.js
+++ b/src/BaseCharts/Scatter.js
@@ -0,0 +1,76 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
+
+  props: {
+    chartId: {
+      default: 'scatter-chart',
+      type: String
+    },
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      defaultOptions: {
+        scales: {
+          xAxes: [{
+            type: 'linear',
+            position: 'bottom'
+          }]
+        }
+      },
+      plugins: []
+    }
+  },
+
+  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
+    renderChart (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'scatter',
+          data: data,
+          options: chartOptions,
+          plugins: this.plugins
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    if (this._chart) {
+      this._chart.destroy()
+    }
+  }
+})
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -1,21 +1,54 @@
 <template>
  <div class="container">
-    <h1 style="text-align:center;margin:40px 0;">Barchart</h1>
-    <bar-example></bar-example>
-    <h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
-    <reactive-example></reactive-example>
-    <h1 style="text-align:center;margin:40px 0;">Linechart</h1>
-    <line-example></line-example>
-    <h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
-    <doughnut-example></doughnut-example>
-    <h1 style="text-align:center;margin:40px 0;">Piechart</h1>
-    <pie-example></pie-example>
-    <h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
-    <radar-example></radar-example>
-    <h1 style="text-align:center;margin:40px 0;">Polararea</h1>
-    <polar-area-example></polar-area-example>
-    <h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
-    <bubble-example></bubble-example>
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart</h1>
+      <bar-example></bar-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
+      <reactive-example></reactive-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
+      <reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Linechart</h1>
+      <line-example></line-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Doughnutchart</h1>
+      <doughnut-example></doughnut-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Piechart</h1>
+      <pie-example></pie-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Radarchart</h1>
+      <radar-example></radar-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Polararea</h1>
+      <polar-area-example></polar-area-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Bubblechart</h1>
+      <bubble-example></bubble-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Scatter Chart</h1>
+      <scatter-example></scatter-example>
+    </div>
  </div>
 </template>

@@ -29,6 +62,7 @@
  import BubbleExample from './BubbleExample'
  import ReactiveExample from './ReactiveExample'
  import ReactivePropExample from './ReactivePropExample'
+  import ScatterExample from './ScatterExample'

  export default {
    components: {
@@ -40,7 +74,35 @@
      PolarAreaExample,
      BubbleExample,
      ReactiveExample,
-      ReactivePropExample
+      ReactivePropExample,
+      ScatterExample
+    },
+    data () {
+      return {
+        dataPoints: null
+      }
+    },
+    mounted () {
+      setInterval(() => {
+        this.fillData()
+      }, 2000)
+    },
+    methods: {
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      },
+      fillData () {
+        this.dataPoints = {
+          labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      }
    }
  }
 </script>
@@ -50,4 +112,21 @@
    max-width: 800px;
    margin: 0 auto;
  }
+
+  h1 {
+    font-family: 'Helvetica', Arial;
+    color: #464646;
+    text-transform: uppercase;
+    border-bottom: 1px solid #f1f1f1;
+    padding-bottom: 15px;
+    font-size: 28px;
+    margin-top: 0;
+  }
+
+  .Chart {
+    padding: 20px;
+    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .4);
+    border-radius: 20px;
+    margin: 50px 0;
+  }
 </style>
--- a/src/examples/ReactivePropExample.js
+++ b/src/examples/ReactivePropExample.js
@@ -5,6 +5,6 @@ export default BarChart.extend({
  mixins: [reactiveProp],

  mounted () {
-    this.renderChart(this.chartData)
+    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
  }
 })
--- a/src/examples/ScatterExample.js
+++ b/src/examples/ScatterExample.js
@@ -0,0 +1,53 @@
+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,
+        borderColor: '#f87979',
+        backgroundColor: '#f87979',
+        data: [{
+          x: -2,
+          y: 4
+        }, {
+          x: -1,
+          y: 1
+        }, {
+          x: 0,
+          y: 0
+        }, {
+          x: 1,
+          y: 1
+        }, {
+          x: 2,
+          y: 4
+        }]
+      },
+      {
+        label: 'Scatter Dataset 2',
+        fill: false,
+        borderColor: '#7acbf9',
+        backgroundColor: '#7acbf9',
+        data: [{
+          x: -2,
+          y: -4
+        }, {
+          x: -1,
+          y: -1
+        }, {
+          x: 0,
+          y: 1
+        }, {
+          x: 1,
+          y: -1
+        }, {
+          x: 2,
+          y: -4
+        }]
+      }]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})
--- a/src/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
@@ -35,6 +54,8 @@ module.exports = {
            chart.destroy()
            this.renderChart(this.chartData, this.options)
          }
+        } else {
+          this.renderChart(this.chartData, this.options)
        }
      }
    }
--- a/src/mixins/reactiveProp.js
+++ b/src/mixins/reactiveProp.js
@@ -4,7 +4,6 @@ module.exports = {
      required: true
    }
  },
-
  watch: {
    'chartData': {
      handler (newData, oldData) {
@@ -27,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
@@ -36,6 +54,8 @@ module.exports = {
            chart.destroy()
            this.renderChart(this.chartData, this.options)
          }
+        } else {
+          this.renderChart(this.chartData, this.options)
        }
      }
    }
--- a/test/unit/specs/Bar.spec.js
+++ b/test/unit/specs/Bar.spec.js
@@ -57,8 +57,28 @@ describe('BarChart', () => {

    vm.$nextTick(() => {
      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0]._chart.chart.ctx).to.equal
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/Bubble.spec.js
+++ b/test/unit/specs/Bubble.spec.js
@@ -61,4 +61,24 @@ describe('BubbleChart', () => {
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/Doughnut.spec.js
+++ b/test/unit/specs/Doughnut.spec.js
@@ -61,4 +61,24 @@ describe('DoughnutChart', () => {
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/HorizontalBar.spec.js
+++ b/test/unit/specs/HorizontalBar.spec.js
@@ -61,4 +61,24 @@ describe('HorizontalBarChart', () => {
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/Line.spec.js
+++ b/test/unit/specs/Line.spec.js
@@ -61,4 +61,24 @@ describe('LineChart', () => {
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/Pie.spec.js
+++ b/test/unit/specs/Pie.spec.js
@@ -60,4 +60,24 @@ describe('PieChart', () => {
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/PolarArea.spec.js
+++ b/test/unit/specs/PolarArea.spec.js
@@ -61,4 +61,24 @@ describe('PolarChart', () => {
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/Radar.spec.js
+++ b/test/unit/specs/Radar.spec.js
@@ -60,4 +60,24 @@ describe('RadarChart', () => {
      done()
    })
  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })
--- a/test/unit/specs/Scatter.spec.js
+++ b/test/unit/specs/Scatter.spec.js
@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import ScatterChart from 'src/examples/ScatterExample'
+
+describe('ScatterChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
+  it('should render a canvas', () => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#scatter-chart')).not.to.be.an('undefined')
+    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
+    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
+    expect(vm.$el.querySelector('canvas')).to.exist
+  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart, {
+            props: {
+              chartId: 'linechartprop'
+            }
+          }
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
+  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
+})
--- a/yarn.lock
+++ b/yarn.lock
@@ -269,20 +269,20 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
    esutils "^2.0.2"
    js-tokens "^3.0.0"

-babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.1.tgz#8c428564dce1e1f41fb337ec34f4c3b022b5ad83"
+babel-core@^6.1.4, babel-core@^6.24.1, babel-core@^6.25.0, babel-core@~6:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
  dependencies:
    babel-code-frame "^6.22.0"
-    babel-generator "^6.24.1"
+    babel-generator "^6.25.0"
    babel-helpers "^6.24.1"
    babel-messages "^6.23.0"
    babel-register "^6.24.1"
    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-    babylon "^6.11.0"
+    babel-template "^6.25.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
    convert-source-map "^1.1.0"
    debug "^2.1.1"
    json5 "^0.5.0"
@@ -293,13 +293,13 @@ babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
    slash "^1.0.0"
    source-map "^0.5.0"

-babel-generator@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.1.tgz#e715f486c58ded25649d888944d52aa07c5d9497"
+babel-generator@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
  dependencies:
    babel-messages "^6.23.0"
    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
+    babel-types "^6.25.0"
    detect-indent "^4.0.0"
    jsesc "^1.3.0"
    lodash "^4.2.0"
@@ -798,6 +798,16 @@ babel-template@^6.24.1:
    babylon "^6.11.0"
    lodash "^4.2.0"

+babel-template@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    lodash "^4.2.0"
+
 babel-traverse@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
@@ -812,6 +822,20 @@ babel-traverse@^6.24.1:
    invariant "^2.2.0"
    lodash "^4.2.0"

+babel-traverse@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
 babel-types@^6.19.0, babel-types@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
@@ -821,6 +845,15 @@ babel-types@^6.19.0, babel-types@^6.24.1:
    lodash "^4.2.0"
    to-fast-properties "^1.0.1"

+babel-types@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
 babylon@^6.11.0:
  version "6.14.1"
  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
@@ -829,6 +862,10 @@ babylon@^6.15.0:
  version "6.16.1"
  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"

+babylon@^6.17.2:
+  version "6.17.3"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.3.tgz#1327d709950b558f204e5352587fd0290f8d8e48"
+
 backo2@1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
@@ -1086,11 +1123,11 @@ change-case@3.0.x:
    upper-case "^1.1.1"
    upper-case-first "^1.1.0"

-chart.js@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.5.0.tgz#fe6e751a893769f56e72bee5ad91207e1c592957"
+chart.js@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.6.0.tgz#308f9a4b0bfed5a154c14f5deb1d9470d22abe71"
  dependencies:
-    chartjs-color "^2.0.0"
+    chartjs-color "^2.1.0"
    moment "^2.10.6"

 chartjs-color-string@^0.4.0:
@@ -1099,9 +1136,9 @@ chartjs-color-string@^0.4.0:
  dependencies:
    color-name "^1.0.0"

-chartjs-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.0.0.tgz#7f60c7256589b24914814ece757659117381e35b"
+chartjs-color@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
  dependencies:
    chartjs-color-string "^0.4.0"
    color-convert "^0.5.3"
@@ -5670,9 +5707,9 @@ vue-html-loader@^1.2.4:
    loader-utils "^1.0.2"
    object-assign "^4.1.0"

-vue-loader@^12.0.2:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.0.2.tgz#f539036b1e0e9516b474a8fd1b5f533145248406"
+vue-loader@^12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.1.tgz#53f27c0973d386768f5a75156f4129b5efc6ba55"
  dependencies:
    consolidate "^0.14.0"
    hash-sum "^1.0.2"
@@ -5695,9 +5732,9 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
    hash-sum "^1.0.2"
    loader-utils "^1.0.2"

-vue-template-compiler@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.0.tgz#a89a17064b68e182569da51ebbedd71ce57f93bf"
+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"
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"
@@ -5706,9 +5743,9 @@ vue-template-es2015-compiler@^1.2.2:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"

-vue@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.0.tgz#bc44db0488c5245c788304c7683efe7b4c862d82"
+vue@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"

 watchpack@^0.2.1:
  version "0.2.9"
Author	SHA1	Message	Date
Jakub Juszczak	640ce5c932	💎 Release new version 2.7.0	2017-07-04 11:03:18 +02:00
Jakub	ef77c0d831	Merge pull request #140 from apertureless/feature/update_tests ✅ Update tests for addPlugin method	2017-07-04 10:47:17 +02:00
Jakub Juszczak	a996049a6b	📝 Update docs with inline-plugin support	2017-07-04 10:44:22 +02:00
Jakub Juszczak	4109fb30f3	✅ Update tests for addPlugin method	2017-07-04 10:31:21 +02:00
Jakub Juszczak	b23ce23015	Merge branch 'develop' of github.com:apertureless/vue-chartjs into develop * 'develop' of github.com:apertureless/vue-chartjs: Fix beforeDestory when renderChart was not called	2017-07-04 10:30:53 +02:00
Jakub Juszczak	7f62914edb	✨ Add addPlugin method to scatter chart	2017-07-04 10:30:46 +02:00
Jakub	677c53d9fe	Merge pull request #139 from ZhangYiJiang/patch-beforeDestroy Fix beforeDestory when renderChart was not called	2017-07-04 09:59:24 +02:00
Zhang Yijiang	3e423fd7ae	Fix beforeDestory when renderChart was not called	2017-07-04 09:58:52 +08:00
Jakub	362639c4e2	Merge pull request #137 from kurbar/inline-plugins-support Add support for inline plugins	2017-07-03 10:09:23 +02:00
Karl Viiburg	ef127686cd	Add support for inline plugins	2017-07-03 08:12:28 +03:00
Jakub	0a483946bc	Merge pull request #136 from apertureless/feature/scatter_chart Feature/scatter chart	2017-07-02 17:17:42 +02:00
Jakub Juszczak	ba5cedc981	📝 Update README and assets	2017-07-02 17:02:34 +02:00
Jakub Juszczak	9b8e961d1c	✅ Add test for scatter chart	2017-07-02 16:40:46 +02:00
Jakub Juszczak	d304a2c5ab	✨ Add scatter chart	2017-07-02 16:40:38 +02:00
Jakub Juszczak	80799b7bd5	🐛 Fix reactive-prop example	2017-07-02 16:18:47 +02:00
Jakub Juszczak	9d44758976	📺 Add reactive-prop example	2017-07-02 16:14:03 +02:00
Jakub	e8cbef7fa7	Merge pull request #135 from apertureless/patch/122 🐛 Fix #122 reactive mixin	2017-07-02 16:09:24 +02:00
Jakub	a2b023d226	Merge pull request #133 from apertureless/feature/docs 📝 Add resources & tutorials to docs	2017-07-02 16:03:19 +02:00
Jakub Juszczak	7a048a07df	🐛 Fix #122 reactive mixin Reactive mixin broke if the initial data was set to null.	2017-07-02 16:02:10 +02:00
Jakub Juszczak	10535095be	📝 Add resources & tutorials to docs	2017-07-02 15:45:44 +02:00
Jakub	0b12e0f8b7	Merge pull request #131 from JobV/patch-1 fix a typo in an example	2017-07-01 14:18:29 +02:00
Job van der Voort	43bada7b15	fix a typo in an example	2017-06-29 20:43:39 +01:00
Jakub	6736715895	Merge pull request #121 from stoykostanchev/patch-1 Update README	2017-06-15 14:34:23 +02:00
Stoyko Stanchev	5d159e7841	Create README.md	2017-06-15 12:04:00 +01:00
Jakub Juszczak	c22bd65a8e	📝 Update changelog	2017-06-10 15:15:12 +02:00
Jakub Juszczak	030ba0c035	💎 Release new version 2.6.5	2017-06-10 15:13:36 +02:00
Jakub Juszczak	ab3321001b	⬆️ Update peerDependencies vue@2.3.4 chart.js@2.6.0	2017-06-10 15:12:50 +02:00
Jakub Juszczak	0f6e04cd5e	📝 Update CHANGELOG	2017-06-04 15:42:48 +02:00
Jakub Juszczak	cc869c979d	💎 Release new version 2.6.4	2017-06-04 15:40:21 +02:00
Jakub Juszczak	8b6afd1e70	📝 Update README	2017-06-04 15:40:06 +02:00
Jakub	43363fc2ae	Merge pull request #109 from MuseofMoose/patch-1 Fix reactive mixins animation re-rendering issue.	2017-06-04 15:06:52 +02:00
Jakub	29d1ca3428	Merge pull request #115 from euledge/fix_typo_in_docs Fix typo in docs	2017-05-31 10:01:11 +02:00
Hitoshi Kuroyanagi	2e737e9394	Fix typo in docs	2017-05-31 15:56:39 +09:00
Jakub Juszczak	5da4b6165e	🐛 Fix typo in docs #111	2017-05-22 22:16:03 +02:00
Jakub Juszczak	1f522e7fd2	🐛 📝 Update README #112	2017-05-22 22:14:29 +02:00
Jakub Juszczak	8324f2c578	✨ Add pt-br doc to config	2017-05-20 15:00:30 +02:00
Jakub	ac09ae744e	Merge pull request #110 from kimuraz/pt-br-readme 📝 Add pt-br readme support	2017-05-20 14:32:02 +02:00
Kimura	39d0b4b95c	📝 Add pt-br readme support	2017-05-20 09:03:06 -03:00
Spencer Dellis	dbce4d7c2c	Fixing eslint issues.	2017-05-19 11:11:56 -04:00
Spencer Dellis	d49b06f92a	Fixing eslint issues.	2017-05-19 11:11:33 -04:00
Spencer Dellis	5cc8f0a878	Resolve reactivity mixin animation issue. A small consequence of replacing the entire dataset in the [reactive mixins files](https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/reactiveData.js) is that it causes charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart. You can see the issue in this fiddle (the problem remains even when changing chart type): https://jsfiddle.net/sg0c82ev/11/ To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data, and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes). A fiddle with my changes: https://jsfiddle.net/sg0c82ev/12/ Perhaps this is too specific of a scenario to warrant a complexity increase (and better suited for a custom handler) but I figured it would be better to dump it here and make it available for review. Let me know what you think.	2017-05-19 03:16:12 -04:00
Spencer Dellis	b762d400d2	Removing unnecessary line	2017-05-19 03:13:43 -04:00
Spencer Dellis	ceb5988e1c	Resolve reactive props animation issue. A small consequence of replacing the entire dataset in the mixins files is that it causes certain charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart. You can see the issue in this fiddle (note the constant re-rendering): https://jsfiddle.net/sg0c82ev/11/ To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data, and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes). A fiddle with my changes: https://jsfiddle.net/sg0c82ev/12/ Perhaps this is too specific of a scenario to warrant a complexity increase like this (and better suited for a custom watcher) but I figured it would be better to dump it here and make it available for review. Let me know what you think.	2017-05-19 02:40:29 -04:00
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