💎 Release new version 2.6.3

Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
⬆️ Update dependency vue to 2.3.3
2025-10-29 18:00:20 +00:00 · 2017-05-14 12:56:24 +02:00 · 2017-05-14 12:54:44 +02:00 · 2017-05-09 22:33:10 +02:00 · 2017-05-07 21:26:32 +02:00 · 2017-05-07 15:33:43 -03:00
76 changed files with 8527 additions and 162 deletions
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -9,6 +9,6 @@


 ### Environment
- OS: Write here
- NPM Version: Write here
-
+- vue.js version: <version here>
+- vue-chart.js version: <version here>
+- npm version: <version here>
--- 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,20 +1,284 @@
 # Change Log

+## [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/integration/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:**
+
+- Add src folder to package.json "files" and make main "src/index.js" [\#49](https://github.com/apertureless/vue-chartjs/issues/49)
+- Unable to refresh [\#41](https://github.com/apertureless/vue-chartjs/issues/41)
+
+**Merged pull requests:**
+
+- 🐛 Fix \#49 [\#50](https://github.com/apertureless/vue-chartjs/pull/50) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.8](https://github.com/apertureless/vue-chartjs/tree/v2.3.8) (2017-03-01)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.6...v2.3.8)
+
+**Closed issues:**
+
+- 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:**
+
+- Feature/documentation [\#47](https://github.com/apertureless/vue-chartjs/pull/47) ([apertureless](https://github.com/apertureless))
+- ⬆️ Update dependencies [\#46](https://github.com/apertureless/vue-chartjs/pull/46) ([apertureless](https://github.com/apertureless))
+- 📝 Update github issue template [\#45](https://github.com/apertureless/vue-chartjs/pull/45) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.6](https://github.com/apertureless/vue-chartjs/tree/v2.3.6) (2017-02-22)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.5...v2.3.6)
+
+**Closed issues:**
+
+- Please update1.1.3 chartjs to 2.5.0 [\#40](https://github.com/apertureless/vue-chartjs/issues/40)
+- Vue-chartjs components creating a second Vue runtime [\#39](https://github.com/apertureless/vue-chartjs/issues/39)
+- Since last update bar chart will no longer stack [\#38](https://github.com/apertureless/vue-chartjs/issues/38)
+- barchart 如何横向显示条形图 [\#37](https://github.com/apertureless/vue-chartjs/issues/37)
+- Animation with reactivity [\#34](https://github.com/apertureless/vue-chartjs/issues/34)
+
+**Merged pull requests:**
+
+- 🐛 Fix reactiveMixins issue \#42 [\#43](https://github.com/apertureless/vue-chartjs/pull/43) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.5](https://github.com/apertureless/vue-chartjs/tree/v2.3.5) (2017-02-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.4...v2.3.5)
+
+**Closed issues:**
+
+- Destory chart instance in reactiveMixins on render [\#35](https://github.com/apertureless/vue-chartjs/issues/35)
+- Rerendering doughtnut chart not working [\#33](https://github.com/apertureless/vue-chartjs/issues/33)
+
+**Merged pull requests:**
+
+- 🔨 Change reactiveMixins to fix \#35 [\#36](https://github.com/apertureless/vue-chartjs/pull/36) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.4](https://github.com/apertureless/vue-chartjs/tree/v2.3.4) (2017-02-11)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.3...v2.3.4)
+
+**Closed issues:**
+
+- Update Chart.js docs to include link to vue-chartjs [\#32](https://github.com/apertureless/vue-chartjs/issues/32)
+- Compatibility with Vue 2.1.10 [\#30](https://github.com/apertureless/vue-chartjs/issues/30)
+
+## [v2.3.3](https://github.com/apertureless/vue-chartjs/tree/v2.3.3) (2017-01-19)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.2...v2.3.3)
+
+**Closed issues:**
+
+- How to create mixed chart types [\#29](https://github.com/apertureless/vue-chartjs/issues/29)
+- hello a q about reactivity [\#28](https://github.com/apertureless/vue-chartjs/issues/28)
+- chart do not render after build  [\#26](https://github.com/apertureless/vue-chartjs/issues/26)
+
+**Merged pull requests:**
+
+- 🐛 Fix \#30 type error [\#31](https://github.com/apertureless/vue-chartjs/pull/31) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.2](https://github.com/apertureless/vue-chartjs/tree/v2.3.2) (2016-12-23)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.1...v2.3.2)
+
+**Closed issues:**
+
+- Content Security Policy [\#22](https://github.com/apertureless/vue-chartjs/issues/22)
+
+**Merged pull requests:**
+
+- ✨ Add minimal release webpack config [\#27](https://github.com/apertureless/vue-chartjs/pull/27) ([apertureless](https://github.com/apertureless))
+- 📝 Update README [\#25](https://github.com/apertureless/vue-chartjs/pull/25) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.1](https://github.com/apertureless/vue-chartjs/tree/v2.3.1) (2016-12-20)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.0...v2.3.1)
+
+**Closed issues:**
+
+- Error in rendering [\#21](https://github.com/apertureless/vue-chartjs/issues/21)
+- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
+
+**Merged pull requests:**
+
+- ✅ Add tests for chart instance destroying [\#24](https://github.com/apertureless/vue-chartjs/pull/24) ([apertureless](https://github.com/apertureless))
+- Feature/runtimebuild \#22 [\#23](https://github.com/apertureless/vue-chartjs/pull/23) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.0](https://github.com/apertureless/vue-chartjs/tree/v2.3.0) (2016-12-17)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.1...v2.3.0)
+
+**Closed issues:**
+
+- Uncaught TypeError: \_c is not a function  [\#20](https://github.com/apertureless/vue-chartjs/issues/20)
+
+## [v2.2.1](https://github.com/apertureless/vue-chartjs/tree/v2.2.1) (2016-12-07)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.0...v2.2.1)
+
+**Closed issues:**
+
+- Chart height definition inside the component [\#18](https://github.com/apertureless/vue-chartjs/issues/18)
+- Uncaught TypeError: Cannot read property 'draw' of null [\#15](https://github.com/apertureless/vue-chartjs/issues/15)
+
+**Merged pull requests:**
+
+- Update README.md [\#16](https://github.com/apertureless/vue-chartjs/pull/16) ([Ag47](https://github.com/Ag47))
+
+## [v2.2.0](https://github.com/apertureless/vue-chartjs/tree/v2.2.0) (2016-10-24)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.1.1...v2.2.0)
+
+**Closed issues:**
+
+- The page is blank？ [\#13](https://github.com/apertureless/vue-chartjs/issues/13)
+- question:syntax with vue-loader [\#12](https://github.com/apertureless/vue-chartjs/issues/12)
+- Rerender when data has changed [\#10](https://github.com/apertureless/vue-chartjs/issues/10)
+
+**Merged pull requests:**
+
+- add horizontal bar parameter [\#14](https://github.com/apertureless/vue-chartjs/pull/14) ([wahaha2012](https://github.com/wahaha2012))
+- WIP Feature/reactive chart data \#11 [\#11](https://github.com/apertureless/vue-chartjs/pull/11) ([apertureless](https://github.com/apertureless))
+
+## [v2.1.1](https://github.com/apertureless/vue-chartjs/tree/v2.1.1) (2016-10-02)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v.2.1.0...v2.1.1)

 ## [v.2.1.0](https://github.com/apertureless/vue-chartjs/tree/v.2.1.0) (2016-09-23)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.1.3...v.2.1.0)

-
 ## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)

-**Implemented enhancements:**
-
- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
-
-**Fixed bugs:**
+**Closed issues:**

 - Passing chart size \(width / height\) as prop doesnt resize the chart [\#8](https://github.com/apertureless/vue-chartjs/issues/8)
+- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)

 **Merged pull requests:**

@@ -23,7 +287,7 @@
 ## [1.1.2](https://github.com/apertureless/vue-chartjs/tree/1.1.2) (2016-09-07)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.1...1.1.2)

-**Implemented enhancements:**
+**Closed issues:**

 - Change name of the render method to ensure compatiblity with Vue 2.0 [\#4](https://github.com/apertureless/vue-chartjs/issues/4)

@@ -33,7 +297,7 @@
 ## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)

-**Implemented enhancements:**
+**Closed issues:**

 - Use Vue.util.mergeOptions to merge default options with user's options [\#5](https://github.com/apertureless/vue-chartjs/issues/5)

@@ -44,12 +308,15 @@
 ## [1.0.3](https://github.com/apertureless/vue-chartjs/tree/1.0.3) (2016-08-20)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.2...1.0.3)

-**Implemented enhancements:**
+**Closed issues:**

 - Publish on NPM [\#2](https://github.com/apertureless/vue-chartjs/issues/2)
+
+**Merged pull requests:**
+
 - Properly destroy chartjs objects [\#3](https://github.com/apertureless/vue-chartjs/pull/3) ([LinusBorg](https://github.com/LinusBorg))

 ## [1.0.2](https://github.com/apertureless/vue-chartjs/tree/1.0.2) (2016-07-27)


-\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
--- a/README.md
+++ b/README.md
@@ -1,21 +1,77 @@
-# Vue-ChartJs
+<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) ![npm dependencies](https://david-dm.org/apertureless/vue-chartjs.svg) [![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)
+[![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)

-> VueJS wrapper for ChartJs
+# vue-chartjs
+
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+
+## Demo & Docs
+
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)

 ### Compatibility

- v1 later
-- Vue.js 1.x
+- v1 later `@legacy`
+  - Vue.js 1.x
 - v2 later
-- Vue.js 2.x
+  - 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.
+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)

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

@@ -34,7 +90,7 @@ Just create your own component.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'

-export default BarChart.extend({
+export default Bar.extend({
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
@@ -65,8 +121,8 @@ You can overwrite the default chart options. Just pass the options object as a s
 // MonthlyIncome.js
 import { Line } from 'vue-chartjs'

-export default LineChart.extend({
-  props: [data, options],
+export default Line.extend({
+  props: ["data", "options"],
  mounted () {
    this.renderChart(this.data, this.options)
  }
@@ -90,6 +146,77 @@ export default {
 </script>
 ```

+## 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.
+
+- `reactiveProp`
+- `reactiveData`
+
+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
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
+### Mixins module
+The `mixins` module is included in the `VueCharts` module and as a seperate module.
+Some ways to import them:
+
+```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)
+  }
+})
+```
+
 ## Available Charts

 ### Bar Chart
--- 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/vue-chartjs.png
+++ b/assets/vue-chartjs.png
--- a/assets/vue-chartjs.svg
+++ b/assets/vue-chartjs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="100%" x2="0%" y1="4.18%" y2="65.116%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient><linearGradient id="b" x1="108.208%" x2="5.433%" y1="12.265%" y2="86.92%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient></defs><g fill="none"><path fill="#fff" stroke="#EBEBEB" stroke-width="8.456" d="M128.744 13l99.745 57.46v114.921l-99.745 57.46-99.744-57.46v-114.921z"/><path fill="url(#a)" d="M129 17.941l90.395 51.432-4.057 117.675-86.903 4.653z"/><path fill="url(#b)" d="M129 17.814l-90.961 51.559-3.191 113.538 93.587 8.79z"/><path fill="#41B883" d="M32.955 72.755l95.789 54.681v110.49l-95.789-54.681z"/><path fill="#35495E" d="M224.48 71.627l-95.789 55.809v110.49l95.789-54.681z"/><path fill="#596F85" d="M224.48 71.627l-95.789 55.809v-7.892l88.445-51.299z"/><path fill="#61D09F" d="M32.955 72.755l95.789 54.681v-7.892l-89.575-50.171z"/></g></svg>
--- 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,
@@ -16,8 +16,8 @@ module.exports = {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
-      'vue': 'vue/dist/vue.js',
      'src': path.resolve(__dirname, '../src'),
+      'mixins': path.resolve(__dirname, '../src/mixins'),
      'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
    }
  },
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,6 +1,9 @@
 const webpack = require('webpack')
 const base = require('./webpack.base.conf')
 const config = require('../config')
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env

 base.entry = {
  lib: './src/index.js'
@@ -19,9 +22,7 @@ var webpackConfig = Object.assign({}, base)
 webpackConfig.devtool = '#source-map'
 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
  new webpack.DefinePlugin({
-    'process.env': {
-      NODE_ENV: '"production"'
-    }
+    'process.env.NODE_ENV': env
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: { warnings: false }
--- 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
@@ -0,0 +1,96 @@
+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].js',
+    library: 'VueChartJs',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  externals: {
+    'vue': 'vue',
+    'chart.js': 'chart.js'
+  },
+  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.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/codecov.yml
+++ b/codecov.yml
@@ -0,0 +1,34 @@
+codecov:
+  branch: master
+
+coverage:
+  precision: 2
+  round: down
+  range: "70...100"
+
+  status:
+    project:
+      default:
+        target: auto
+        threshold: null
+        branches: null
+
+    patch:
+      default:
+        target: auto
+        branches: null
+
+    changes:
+      default:
+        branches: null
+
+  ignore:
+    - "tests/*"
+    - "src/examples/*"
+    - "src/mixins/*"
+
+
+comment:
+  layout: "header, diff, changes, sunburst, uncovered, tree"
+  branches: null
+  behavior: default
--- a/dist/vue-chartjs.js
+++ b/dist/vue-chartjs.js
--- a/dist/vue-chartjs.js.map
+++ b/dist/vue-chartjs.js.map
--- a/docs/.nojekyll
+++ b/docs/.nojekyll
--- a/docs/CNAME
+++ b/docs/CNAME
@@ -0,0 +1 @@
+vue-chartjs.org
--- a/docs/README.md
+++ b/docs/README.md
@@ -0,0 +1,319 @@
+---
+search: en
+---
+
+# vue-chartjs
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+
+## Introduction
+`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`
+
+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`
+
+## Quick Start
+
+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)
+
+
+## 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 your tree shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
--- a/docs/_landing.html
+++ b/docs/_landing.html
@@ -0,0 +1,78 @@
+<h1>📈 vue-chartjs</h1>
+
+<h2>⚡ Easy and beautiful charts with Chart.js and Vue.js</h2>
+
+<ul class="features">
+  <li>Easy for both beginners and pros 🙌</li>
+  <li>Simple to use, easy to extend 💪</li>
+  <li>With the full power of chart.js 💯</li>
+</ul>
+
+<div class="landing-buttons">
+  <a class="landing-button" target="_blank" href="https://github.com/apertureless/vue-chartjs">
+    GitHub
+  </button>
+
+  <a class="landing-button" router-link="/home">
+    Docs
+  </a>
+
+  <a class="landing-button" target="_blank" href="http://demo.vue-chartjs.org/">
+    Demo
+  </a>
+</div>
+
+<style>
+  h1 {
+    margin: 0;
+    margin-top: -50px;
+    font-weight: normal;
+    font-size: 40px;
+    letter-spacing: 1px;
+  }
+  h2 {
+    margin-top: 20px;
+    color: #999;
+    font-weight: normal;
+    letter-spacing: 1px;
+  }
+  .landing {
+    padding: 10px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    height: 100%;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .features {
+    margin-top: 20px;
+    margin-bottom: 60px;
+    font-size: 16px;
+    line-height: 1.7;
+  }
+  .landing-button {
+    border: 1px solid #ccc;
+    border-radius: 33px;
+    padding: 10px 30px;
+    background-color: white;
+    display: inline-block;
+    margin-right: 20px;
+    color: #333;
+  }
+  .landing-button:hover {
+    border-color: #42b983;
+    color: #42b983;
+    text-decoration: none;
+  }
+</style>
--- a/docs/assets/bar.png
+++ b/docs/assets/bar.png
--- a/docs/assets/bubble.png
+++ b/docs/assets/bubble.png
--- a/docs/assets/doughnut.png
+++ b/docs/assets/doughnut.png
--- a/docs/assets/line.png
+++ b/docs/assets/line.png
--- a/docs/assets/logo.png
+++ b/docs/assets/logo.png
--- a/docs/assets/pie.png
+++ b/docs/assets/pie.png
--- a/docs/assets/polar.png
+++ b/docs/assets/polar.png
--- a/docs/assets/radar.png
+++ b/docs/assets/radar.png
--- a/docs/assets/vue-chartjs.png
+++ b/docs/assets/vue-chartjs.png
--- a/docs/assets/vue-chartjs.svg
+++ b/docs/assets/vue-chartjs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="100%" x2="0%" y1="4.18%" y2="65.116%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient><linearGradient id="b" x1="108.208%" x2="5.433%" y1="12.265%" y2="86.92%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient></defs><g fill="none"><path fill="#fff" stroke="#EBEBEB" stroke-width="8.456" d="M128.744 13l99.745 57.46v114.921l-99.745 57.46-99.744-57.46v-114.921z"/><path fill="url(#a)" d="M129 17.941l90.395 51.432-4.057 117.675-86.903 4.653z"/><path fill="url(#b)" d="M129 17.814l-90.961 51.559-3.191 113.538 93.587 8.79z"/><path fill="#41B883" d="M32.955 72.755l95.789 54.681v110.49l-95.789-54.681z"/><path fill="#35495E" d="M224.48 71.627l-95.789 55.809v110.49l95.789-54.681z"/><path fill="#596F85" d="M224.48 71.627l-95.789 55.809v-7.892l88.445-51.299z"/><path fill="#61D09F" d="M32.955 72.755l95.789 54.681v-7.892l-89.575-50.171z"/></g></svg>
--- a/docs/config.js
+++ b/docs/config.js
@@ -0,0 +1,45 @@
+const langs = [
+  {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
+  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
+  {title: '日本語', path: '/ja/', matchPath: /^\/ja/}
+]
+
+docute.init({
+  title: 'vue-chartjs docs',
+  landing: true,
+  landing: '_landing.html',
+  repo: 'apertureless/vue-chartjs',
+  twitter: 'apertureless',
+  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'],
+      // 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`
+
+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
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+  <title>vue-chartjs doc</title>
+  <link rel="stylesheet" href="https://unpkg.com/docute@2/dist/docute.css">
+</head>
+<body>
+  <!-- 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>
+  <!-- don't remove this part end -->
+
+  <!-- Google Analytics -->
+  <script>
+  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+  ga('create', 'UA-92766713-1', 'auto');
+  ga('send', 'pageview');
+  docute.router.afterEach(function (to) {
+    ga('set', 'page', to.fullPath);
+    ga('send', 'pageview');
+  });
+  </script>
+  <script async src='https://www.google-analytics.com/analytics.js'></script>
+  <!-- End Google Analytics -->
+</body>
+</html>
--- 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`
+
+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/package.json
+++ b/package.json
@@ -1,12 +1,34 @@
 {
  "name": "vue-chartjs",
-  "version": "2.1.1",
-  "description": "Vue wrapper for chart.js",
-  "author": "Jakub Juszczak <jakub@nextindex.de>",
+  "version": "2.6.3",
+  "description": "vue.js wrapper for chart.js",
+  "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",
@@ -15,74 +37,116 @@
    "Charts"
  ],
  "main": "dist/vue-chartjs.js",
+  "unpkg": "dist/vue-chartjs.full.min.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "files": [
+    "src",
+    "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",
-    "prepublish": "node build/build.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": {
-    "babel-runtime": "^6.11.6",
-    "chart.js": "^2.2.1",
-    "vue": "^2.0.0-rc.1"
+    "lodash": "^4.17.4"
+  },
+  "peerDependencies": {
+    "chart.js": "^2.5.0",
+    "vue": "^2.3.3"
  },
  "devDependencies": {
-    "babel-core": "^6.10.4",
-    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.12.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "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",
-    "chromedriver": "^2.21.2",
+    "chart.js": "^2.5.0",
+    "chromedriver": "^2.28.0",
    "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^2.1.5",
-    "css-loader": "^0.23.0",
-    "eslint": "^2.10.2",
-    "eslint-config-standard": "^5.1.0",
-    "eslint-friendly-formatter": "^2.0.5",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-html": "^1.3.0",
-    "eslint-plugin-promise": "^1.0.8",
-    "eslint-plugin-standard": "^1.3.2",
+    "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.8.4",
+    "file-loader": "^0.10.1",
    "function-bind": "^1.0.2",
-    "html-webpack-plugin": "^2.8.1",
-    "http-proxy-middleware": "^0.12.0",
-    "inject-loader": "^2.0.1",
+    "html-webpack-plugin": "^2.28.0",
+    "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": "^0.13.15",
-    "karma-coverage": "^0.5.5",
-    "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.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.4",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.24",
-    "karma-webpack": "^1.7.0",
-    "lodash": "^4.15.0",
-    "lolex": "^1.4.0",
-    "mocha": "^2.4.5",
-    "nightwatch": "^0.8.18",
-    "ora": "^0.2.0",
-    "phantomjs-prebuilt": "^2.1.3",
-    "selenium-server": "2.53.0",
-    "shelljs": "^0.6.0",
-    "sinon": "^1.17.3",
-    "sinon-chai": "^2.8.0",
-    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^2.0.6",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^9.3.0",
-    "vue-style-loader": "^1.0.0",
+    "karma-spec-reporter": "0.0.30",
+    "karma-webpack": "1.8.1",
+    "lolex": "^1.6.0",
+    "mocha": "^3.1.0",
+    "nightwatch": "^0.9.14",
+    "ora": "^1.2.0",
+    "phantomjs-prebuilt": "^2.1.13",
+    "selenium-server": "^3.3.1",
+    "shelljs": "^0.7.7",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.9.0",
+    "url-loader": "^0.5.8",
+    "vue": "^2.3.3",
+    "vue-hot-reload-api": "^2.1.0",
+    "vue-html-loader": "^1.2.4",
+    "vue-loader": "^12.0.4",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.3",
    "webpack": "^1.13.2",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^0.8.3"
+    "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
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'

 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },

  props: {
    chartId: {
@@ -51,7 +63,6 @@ export default Vue.extend({
  methods: {
    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
-
      this._chart = new Chart(
        this.$refs.canvas.getContext('2d'), {
          type: 'bar',
--- a/src/BaseCharts/Bubble.js
+++ b/src/BaseCharts/Bubble.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'

 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },

  props: {
    chartId: {
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'

 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },

  props: {
    chartId: {
--- 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/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'

 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },

  props: {
    chartId: {
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'

 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },

  props: {
    chartId: {
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'

 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },

  props: {
    chartId: {
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'

 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },

  props: {
    chartId: {
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -1,11 +1,20 @@
 <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>
 </template>
@@ -18,9 +27,21 @@
  import RadarExample from './RadarExample'
  import PolarAreaExample from './PolarAreaExample'
  import BubbleExample from './BubbleExample'
+  import ReactiveExample from './ReactiveExample'
+  import ReactivePropExample from './ReactivePropExample'

  export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
+    components: {
+      BarExample,
+      LineExample,
+      DoughnutExample,
+      PieExample,
+      RadarExample,
+      PolarAreaExample,
+      BubbleExample,
+      ReactiveExample,
+      ReactivePropExample
+    }
  }
 </script>

--- a/src/examples/BubbleExample.js
+++ b/src/examples/BubbleExample.js
@@ -47,6 +47,6 @@ export default BubbleChart.extend({
          ]
        }
      ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
  }
 })
--- a/src/examples/DoughnutExample.js
+++ b/src/examples/DoughnutExample.js
@@ -15,6 +15,6 @@ export default DoughnutChart.extend({
          data: [40, 20, 80, 10]
        }
      ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
  }
 })
--- 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/examples/LineExample.js
+++ b/src/examples/LineExample.js
@@ -11,6 +11,6 @@ export default LineChart.extend({
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
  }
 })
--- a/src/examples/PieExample.js
+++ b/src/examples/PieExample.js
@@ -15,6 +15,6 @@ export default PieChart.extend({
          data: [40, 20, 80, 10]
        }
      ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
  }
 })
--- a/src/examples/PolarAreaExample.js
+++ b/src/examples/PolarAreaExample.js
@@ -24,6 +24,6 @@ export default PolarAreaChart.extend({
          data: [28, 48, 40, 19, 96, 27, 100]
        }
      ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
  }
 })
--- a/src/examples/RadarExample.js
+++ b/src/examples/RadarExample.js
@@ -26,6 +26,6 @@ export default RadarChart.extend({
          data: [28, 48, 40, 19, 96, 27, 100]
        }
      ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
  }
 })
--- a/src/examples/ReactiveExample.js
+++ b/src/examples/ReactiveExample.js
@@ -0,0 +1,41 @@
+import BarChart from '../BaseCharts/Bar'
+import reactiveData from '../mixins/reactiveData'
+
+export default BarChart.extend({
+  mixins: [reactiveData],
+  data () {
+    return {
+      chartData: ''
+    }
+  },
+  created () {
+    this.fillData()
+  },
+
+  mounted () {
+    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
+
+    setInterval(() => {
+      this.fillData()
+    }, 5000)
+  },
+
+  methods: {
+    fillData () {
+      this.chartData = {
+        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()]
+          }
+        ]
+      }
+    },
+
+    getRandomInt () {
+      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+    }
+  }
+})
--- a/src/examples/ReactivePropExample.js
+++ b/src/examples/ReactivePropExample.js
@@ -0,0 +1,10 @@
+import BarChart from '../BaseCharts/Bar'
+import reactiveProp from '../mixins/reactiveProp'
+
+export default BarChart.extend({
+  mixins: [reactiveProp],
+
+  mounted () {
+    this.renderChart(this.chartData)
+  }
+})
--- a/src/index.js
+++ b/src/index.js
@@ -1,19 +1,38 @@
 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'
 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,
  PolarArea,
  Radar,
-  Bubble
+  Bubble,
+  mixins
 }

-module.exports = VueCharts
+export default VueCharts
+
+export {
+  VueCharts,
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  mixins
+}
--- 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/index.js
+++ b/src/mixins/index.js
@@ -0,0 +1,7 @@
+import reactiveData from './reactiveData.js'
+import reactiveProp from './reactiveProp.js'
+
+export default {
+  reactiveData,
+  reactiveProp
+}
--- a/src/mixins/reactiveData.js
+++ b/src/mixins/reactiveData.js
@@ -0,0 +1,42 @@
+module.exports = {
+  data () {
+    return {
+      chartData: null
+    }
+  },
+  watch: {
+    'chartData': {
+      handler (newData, oldData) {
+        if (oldData) {
+          let chart = this._chart
+
+          // Get new and old DataSet Labels
+          let newDatasetLabels = newData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          let oldDatasetLabels = oldData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          // Stringify 'em for easier compare
+          const oldLabels = JSON.stringify(oldDatasetLabels)
+          const newLabels = JSON.stringify(newDatasetLabels)
+
+          // 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
+            })
+
+            chart.data.labels = newData.labels
+            chart.update()
+          } else {
+            chart.destroy()
+            this.renderChart(this.chartData, this.options)
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/mixins/reactiveProp.js
+++ b/src/mixins/reactiveProp.js
@@ -0,0 +1,43 @@
+module.exports = {
+  props: {
+    chartData: {
+      required: true
+    }
+  },
+
+  watch: {
+    'chartData': {
+      handler (newData, oldData) {
+        if (oldData) {
+          let chart = this._chart
+
+          // Get new and old DataSet Labels
+          let newDatasetLabels = newData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          let oldDatasetLabels = oldData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          // Stringify 'em for easier compare
+          const oldLabels = JSON.stringify(oldDatasetLabels)
+          const newLabels = JSON.stringify(newDatasetLabels)
+
+          // 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
+            })
+
+            chart.data.labels = newData.labels
+            chart.update()
+          } else {
+            chart.destroy()
+            this.renderChart(this.chartData, this.options)
+          }
+        }
+      }
+    }
+  }
+}
--- a/test/unit/.eslintrc
+++ b/test/unit/.eslintrc
@@ -4,6 +4,10 @@
  },
  "globals": {
    "expect": true,
+    "jasmine": true,
    "sinon": true
+  },
+  "rules": {
+    "no-unused-expressions": 0
  }
 }
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -54,7 +54,7 @@ module.exports = function (config) {
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['PhantomJS'],
-    frameworks: ['mocha', 'sinon-chai'],
+    frameworks: ['mocha', 'sinon-chai', 'jasmine'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
--- a/test/unit/specs/Bar.spec.js
+++ b/test/unit/specs/Bar.spec.js
@@ -10,7 +10,11 @@ describe('BarChart', () => {

  it('should render a canvas', () => {
    const vm = new Vue({
-      template: '<bar-chart></bar-chart>',
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
      components: { BarChart }
    }).$mount(el)

@@ -22,10 +26,39 @@ describe('BarChart', () => {

  it('should change id based on prop', () => {
    const vm = new Vue({
-      template: '<bar-chart chartId="barchartprop"></bar-chart>',
+      render: function (createElement) {
+        return createElement(
+          BarChart, {
+            props: {
+              chartId: 'barchartprop'
+            }
+          }
+        )
+      },
      components: { BarChart }
    }).$mount(el)

    expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
+      components: { BarChart }
+    }).$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/test/unit/specs/Bubble.spec.js
+++ b/test/unit/specs/Bubble.spec.js
@@ -10,7 +10,11 @@ describe('BubbleChart', () => {

  it('should render a canvas', () => {
    const vm = new Vue({
-      template: '<bubble-chart></bubble-chart>',
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
      components: { BubbleChart }
    }).$mount(el)

@@ -22,10 +26,39 @@ describe('BubbleChart', () => {

  it('should change id based on prop', () => {
    const vm = new Vue({
-      template: '<bubble-chart chartId="bubblechartprop"></bubble-chart>',
+      render: function (createElement) {
+        return createElement(
+          BubbleChart, {
+            props: {
+              chartId: 'bubblechartprop'
+            }
+          }
+        )
+      },
      components: { BubbleChart }
    }).$mount(el)

    expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
+      components: { BubbleChart }
+    }).$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/test/unit/specs/Doughnut.spec.js
+++ b/test/unit/specs/Doughnut.spec.js
@@ -10,7 +10,11 @@ describe('DoughnutChart', () => {

  it('should render a canvas', () => {
    const vm = new Vue({
-      template: '<doughnut-chart></doughnut-chart>',
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
      components: { DoughnutChart }
    }).$mount(el)

@@ -22,10 +26,39 @@ describe('DoughnutChart', () => {

  it('should change id based on prop', () => {
    const vm = new Vue({
-      template: '<doughnut-chart chartId="doughnutchartprop"></doughnut-chart>',
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart, {
+            props: {
+              chartId: 'doughnutchartprop'
+            }
+          }
+        )
+      },
      components: { DoughnutChart }
    }).$mount(el)

    expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
+      components: { DoughnutChart }
+    }).$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/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/test/unit/specs/Line.spec.js
+++ b/test/unit/specs/Line.spec.js
@@ -10,7 +10,11 @@ describe('LineChart', () => {

  it('should render a canvas', () => {
    const vm = new Vue({
-      template: '<line-chart></line-chart>',
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
      components: { LineChart }
    }).$mount(el)

@@ -22,10 +26,39 @@ describe('LineChart', () => {

  it('should change id based on prop', () => {
    const vm = new Vue({
-      template: '<line-chart chartId="linechartprop"></line-chart>',
+      render: function (createElement) {
+        return createElement(
+          LineChart, {
+            props: {
+              chartId: 'linechartprop'
+            }
+          }
+        )
+      },
      components: { LineChart }
    }).$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(
+          LineChart
+        )
+      },
+      components: { LineChart }
+    }).$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/test/unit/specs/Pie.spec.js
+++ b/test/unit/specs/Pie.spec.js
@@ -10,7 +10,11 @@ describe('PieChart', () => {

  it('should render a canvas', () => {
    const vm = new Vue({
-      template: '<pie-chart></pie-chart>',
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
      components: { PieChart }
    }).$mount(el)

@@ -22,10 +26,38 @@ describe('PieChart', () => {

  it('should change id based on prop', () => {
    const vm = new Vue({
-      template: '<pie-chart chartId="piechartprop"></pie-chart>',
+      render: function (createElement) {
+        return createElement(
+          PieChart, {
+            props: {
+              chartId: 'piechartprop'
+            }
+          }
+        )
+      },
      components: { PieChart }
    }).$mount(el)

    expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
  })
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
+      components: { PieChart }
+    }).$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/test/unit/specs/PolarArea.spec.js
+++ b/test/unit/specs/PolarArea.spec.js
@@ -10,7 +10,11 @@ describe('PolarChart', () => {

  it('should render a canvas', () => {
    const vm = new Vue({
-      template: '<polar-chart></polar-chart>',
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
      components: { PolarChart }
    }).$mount(el)

@@ -22,10 +26,39 @@ describe('PolarChart', () => {

  it('should change id based on prop', () => {
    const vm = new Vue({
-      template: '<polar-chart chartId="polarchartprop"></polar-chart>',
+      render: function (createElement) {
+        return createElement(
+          PolarChart, {
+            props: {
+              chartId: 'polarchartprop'
+            }
+          }
+        )
+      },
      components: { PolarChart }
    }).$mount(el)

    expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
+      components: { PolarChart }
+    }).$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/test/unit/specs/Radar.spec.js
+++ b/test/unit/specs/Radar.spec.js
@@ -10,7 +10,11 @@ describe('RadarChart', () => {

  it('should render a canvas', () => {
    const vm = new Vue({
-      template: '<radar-chart></radar-chart>',
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
      components: { RadarChart }
    }).$mount(el)

@@ -22,10 +26,38 @@ describe('RadarChart', () => {

  it('should change id based on prop', () => {
    const vm = new Vue({
-      template: '<radar-chart chartId="rodarchartprop"></radar-chart>',
+      render: function (createElement) {
+        return createElement(
+          RadarChart, {
+            props: {
+              chartId: 'rodarchartprop'
+            }
+          }
+        )
+      },
      components: { RadarChart }
    }).$mount(el)

    expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
  })
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
+      components: { RadarChart }
+    }).$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/test/unit/specs/mixins/reactiveData.js
+++ b/test/unit/specs/mixins/reactiveData.js
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
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
Jakub Juszczak	1a22bae5ba	📝 Update CHANGELOG	2017-03-01 22:42:34 +01:00
Jakub Juszczak	d849706b9a	Merge branch 'master' into develop * master: Update CNAME Update CNAME	2017-03-01 22:40:22 +01:00
Jakub Juszczak	ad0e0de561	Merge commit '562539a3a54dc89b0216d8141541501eecee1560' * commit '562539a3a54dc89b0216d8141541501eecee1560': 🐛 Fix #49	2017-03-01 22:37:58 +01:00
Jakub	3da3fccc11	Merge pull request #50 from apertureless/feature/include_src 🐛 Fix #49	2017-03-01 22:37:20 +01:00
Jakub Juszczak	562539a3a5	🐛 Fix #49	2017-03-01 22:35:18 +01:00
Jakub Juszczak	6d8513ff75	Merge branch 'develop' * develop: 💎 Release new version 2.3.8 ⬆️ Update dev dependencies ⬆️ Update dependencies	2017-03-01 14:49:29 +01:00
Jakub Juszczak	7953e14479	💎 Release new version 2.3.8	2017-03-01 14:49:03 +01:00
Jakub	f58c1f5fd8	Merge pull request #46 from apertureless/feature/dependency ⬆️ Update dependencies	2017-03-01 13:52:46 +01:00
Jakub Juszczak	e57c4b1bfd	⬆️ Update dev dependencies	2017-03-01 13:50:12 +01:00
Jakub Juszczak	720d159704	Merge branch 'develop' into feature/dependency * develop: 🐛 Fix docs title ✨ 📝 Update Documentation ✨ Add cname ✨ Add docs landingpage ✨ Add new screenshots of charts 📝 Update docs	2017-03-01 13:41:36 +01:00
Jakub Juszczak	412f1f7b81	Merge branch 'develop' * develop: 🐛 Fix docs title	2017-02-27 23:11:13 +01:00
Jakub Juszczak	42fbddd793	🐛 Fix docs title	2017-02-27 23:10:21 +01:00
Jakub	1c76fdeff9	Update CNAME	2017-02-27 23:05:15 +01:00
Jakub	e8379c71ec	Update CNAME	2017-02-27 23:05:07 +01:00
Jakub	6bbb438237	Merge pull request #47 from apertureless/feature/documentation Feature/documentation	2017-02-27 23:03:38 +01:00
Jakub Juszczak	0c96745681	✨ 📝 Update Documentation	2017-02-27 23:03:02 +01:00
Jakub Juszczak	b5beff4670	✨ Add cname	2017-02-27 22:51:37 +01:00
Jakub Juszczak	6ef85af85a	✨ Add docs landingpage	2017-02-27 22:48:23 +01:00
Jakub Juszczak	6fcf7c17b3	✨ Add new screenshots of charts	2017-02-27 22:48:13 +01:00
Jakub Juszczak	2f74998231	📝 Update docs	2017-02-27 20:46:19 +01:00
Jakub Juszczak	8306116322	⬆️ Update dependencies	2017-02-27 17:22:37 +01:00
Jakub	938b8f389f	Merge pull request #45 from apertureless/develop 📝 Update github issue template	2017-02-24 18:07:23 +01:00
Jakub Juszczak	dca9956568	📝 Update github issue template	2017-02-24 18:06:47 +01:00
Jakub Juszczak	eb457b4de2	✨ Add dist folder to files	2017-02-22 19:09:40 +01:00
Jakub Juszczak	9ab63c9f22	📝 Update CHANGELOG Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-02-22 15:59:55 +01:00
Jakub Juszczak	84dab8c08c	💎 Release new version 2.3.6 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-02-22 15:49:12 +01:00
Jakub	c9af2f9629	Merge pull request #43 from apertureless/fix/42 🐛 Fix reactiveMixins issue #42	2017-02-22 15:47:24 +01:00
Jakub Juszczak	874b674803	🐛 Fix reactiveMixins issue #42	2017-02-22 15:39:42 +01:00
Jakub Juszczak	9a4c18dabe	📝 Update README	2017-02-22 13:15:59 +01:00
Jakub	e048ca5257	🐛 Fix ReactiveProp example	2017-02-21 18:54:28 +01:00
Jakub Juszczak	c6b358ba65	📝 Update CHANGELOG	2017-02-15 15:37:53 +01:00
Jakub Juszczak	fc7818d56d	💎 Release new version 2.3.5 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2017-02-14 17:40:03 +01:00
Jakub Juszczak	6a82e42c6e	🐛 Fix eslint errors	2017-02-14 17:37:54 +01:00
Jakub	e441ed286f	Merge pull request #36 from apertureless/feature/destroy_chartinstance 🔨 Change reactiveMixins to fix #35	2017-02-14 17:35:30 +01:00
Jakub Juszczak	aa76f518cb	🔨 Change reactiveMixins Destroy chart instance on render() Add additional check for dataset length Add comments Refactor reactiveData to match reactiveProp style	2017-02-14 17:31:18 +01:00
Jakub Juszczak	53fb0d80d4	💎 Release new version 2.3.4	2017-02-11 12:53:57 +01:00
Jakub Juszczak	f373d47b4c	⬆️ Update dependency chart.js to 2.5.0	2017-02-11 12:40:03 +01:00
Jakub Juszczak	97acbcadd5	🔥 Remove npm dependencies badge Because it's broken most of the time	2017-02-02 13:27:56 +01:00
Jakub Juszczak	07f4466114	Change svg to png	2017-01-29 15:46:28 +01:00
Jakub Juszczak	14a2c9a4b8	🐛 Fix filename	2017-01-29 15:45:02 +01:00
Jakub Juszczak	00589e7f64	✨ 📝 Add Logo to docs	2017-01-29 15:43:52 +01:00
Jakub Juszczak	7d9d514589	📝 Add npm downloads badge to README	2017-01-21 15:42:42 +01:00
Jakub Juszczak	e35d21641e	📝 Update CHANGELOG	2017-01-19 10:35:06 +01:00
Jakub Juszczak	3e77f40043	💎 Release new version v2.3.3	2017-01-19 10:25:58 +01:00
Jakub	158f29d5c9	Merge pull request #31 from apertureless/hotfix/vuedep 🐛 Fix #30 type error	2017-01-19 10:19:46 +01:00
Jakub Juszczak	b1ca492b33	🐛 Fix #30 type error	2017-01-19 10:15:44 +01:00
Jakub Juszczak	88cc75c614	💎 Release new version 2.3.2	2016-12-23 12:34:34 +01:00
Jakub	cba152c7f8	Merge pull request #27 from apertureless/develop ✨ Add minimal release webpack config	2016-12-23 12:32:36 +01:00
Jakub Juszczak	b2f0a5ba03	✨ Add minimal release webpack config without minimize and without production tags	2016-12-23 12:28:28 +01:00
Jakub	b76236cf9b	Merge pull request #25 from apertureless/develop 📝 Update README	2016-12-21 13:22:34 +01:00
Jakub Juszczak	2a1377c01d	📝 Update README	2016-12-21 13:10:37 +01:00
Jakub Juszczak	c3f10a51f5	📝 Update README and CHANGELOG Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-20 20:17:56 +01:00
Jakub Juszczak	7ffefe4454	💎 Release new version 2.3.1 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-20 20:15:53 +01:00
Jakub	ca95e0f146	Merge pull request #24 from apertureless/feature/tests ✅ Add tests for chart instance destroying	2016-12-20 20:07:09 +01:00
Jakub Juszczak	988d8f13b4	✅ Add tests for chart instance destroying	2016-12-20 20:03:17 +01:00
Jakub	52c1c50206	Merge pull request #23 from apertureless/feature/runtimebuild Feature/runtimebuild #22	2016-12-20 19:07:45 +01:00
Jakub Juszczak	482048b746	✅ 🐛 Fix tests	2016-12-20 18:26:49 +01:00
Jakub Juszczak	bb21a40506	Rewrite template option to render function	2016-12-20 14:36:35 +01:00
Jakub Juszczak	e4ba9ea5a3	➕ Add dependency: template-compiler	2016-12-20 14:34:05 +01:00
Jakub Juszczak	fee32b57df	🔥 Remove vue standalone alias from webpack	2016-12-20 14:33:47 +01:00
Jakub Juszczak	c0b854bd83	Merge branch 'develop' * develop: Replace package quality badge with shield like version ✨ Add license badge ✨ Add package quality and liscense badge	2016-12-17 18:33:34 +01:00
Jakub Juszczak	14413e438d	Replace package quality badge with shield like version	2016-12-17 18:33:11 +01:00
Jakub Juszczak	7ddc385edb	✨ Add license badge	2016-12-17 18:31:31 +01:00
Jakub Juszczak	a62a108318	✨ Add package quality and liscense badge	2016-12-17 18:31:13 +01:00
Jakub Juszczak	a1633c0d19	Merge branch 'develop' * develop: 📝 Update changelog	2016-12-17 18:22:40 +01:00
Jakub Juszczak	5ec1f31a4b	📝 Update changelog	2016-12-17 18:22:33 +01:00
Jakub Juszczak	ced81a58cc	Merge branch 'hotfix/minification' * hotfix/minification: ⬆️ Update npm version 💎 Release new version v2.3.0 📝 Update README ✨ Add mixins to alias ⬆️ Update dependencies Change mixins exports to be seperate	2016-12-17 18:20:03 +01:00
Jakub Juszczak	193b5cac33	Merge branch 'hotfix/minification' into develop * hotfix/minification: ⬆️ Update npm version 💎 Release new version v2.3.0 📝 Update README ✨ Add mixins to alias ⬆️ Update dependencies Change mixins exports to be seperate	2016-12-17 18:20:03 +01:00
Jakub Juszczak	dde366c154	⬆️ Update npm version	2016-12-17 18:19:06 +01:00
Jakub Juszczak	4fe9a2bcb6	💎 Release new version v2.3.0	2016-12-17 18:17:50 +01:00
Jakub Juszczak	4badb99d84	📝 Update README	2016-12-17 18:15:07 +01:00
Jakub Juszczak	3101945481	✨ Add mixins to alias	2016-12-17 17:29:41 +01:00
Jakub Juszczak	6e7efb39ae	⬆️ Update dependencies	2016-12-17 17:29:30 +01:00
Jakub Juszczak	5fe11ea5a9	Change mixins exports to be seperate	2016-12-17 17:29:18 +01:00
Jakub Juszczak	015aebfc9f	📝 Update CHANGELOG Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-07 08:54:22 +01:00
Jakub Juszczak	49c5bfe238	📝 Update README Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-07 08:53:27 +01:00
Jakub Juszczak	2b75895589	🐛 Fix script naming Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-07 08:50:02 +01:00
Jakub Juszczak	ac2be97a10	⬆️ Update npm package version Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-07 08:41:17 +01:00
Jakub Juszczak	241fdb89d9	Rename folder to docs for gh pages Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-07 08:40:18 +01:00
Jakub Juszczak	1f91c96f83	✨ Add demo page for github pages Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-07 08:38:30 +01:00
Jakub Juszczak	d980e32116	💎 Release new version 2.2.1 Updated dependencies Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-12-07 08:23:50 +01:00
Jakub Juszczak	6732907fc5	Merged branch master into develop	2016-12-07 08:16:55 +01:00
Jakub	d2f23156cc	Merge pull request #16 from Ag47/master Update README.md	2016-11-07 10:05:21 +01:00
SILVER PANG	4d02df581f	Update README.md fix the syntax error of the example	2016-11-07 15:37:07 +08:00
Jakub Juszczak	1d6e375e05	🐛 📝 Update CHANGELOG	2016-10-24 11:36:18 +02:00
Jakub Juszczak	c827562839	📝 Update CHANGELOG	2016-10-24 11:34:15 +02:00
Jakub Juszczak	720d75b56b	💎 Release new version 2.2.0	2016-10-24 11:33:36 +02:00
Jakub	75925f0d5c	Merge pull request #14 from wahaha2012/feature-horizontal-bar add horizontal bar parameter	2016-10-23 19:20:17 +02:00
wxwdesign	ddb47ff63a	add horizontal bar parameter	2016-10-22 21:17:21 +08:00
Jakub	2df29e1cf1	Merge pull request #11 from apertureless/feature/reactive_chart_data WIP Feature/reactive chart data #11	2016-10-15 13:37:58 +02:00
Jakub Juszczak	6f77de832e	🐛 Fix missing export	2016-10-15 13:00:24 +02:00
Jakub Juszczak	f94b320dfa	✨ Change reactiveDataMixin	2016-10-15 12:58:51 +02:00
Jakub Juszczak	4ec6fa4cae	✨ Add codecov yml	2016-10-09 17:17:06 +02:00
Jakub Juszczak	ecdb98c4c8	🐛 Fix paths	2016-10-02 18:30:48 +02:00
Jakub Juszczak	c21cf2f3ac	✨ Add export for mixins	2016-10-02 18:26:38 +02:00
Jakub Juszczak	ef9fbe472a	📝 Update README with reactive Data and props example	2016-10-02 18:26:06 +02:00
Jakub Juszczak	06c3148897	⬆️ Update examples	2016-10-02 18:25:02 +02:00
Jakub Juszczak	e716482154	✨ Add reactiveProperty mixin	2016-10-02 18:10:44 +02:00
Jakub Juszczak	59cc74a00d	✨ Add reactiveData Example	2016-10-02 10:34:06 +02:00
Jakub Juszczak	a7194b990f	✨ Add reactive Data example	2016-10-02 10:32:30 +02:00
Jakub Juszczak	45e543b636	✨ Add reactiveData mixin	2016-10-02 10:31:14 +02:00
Jakub Juszczak	ae93b96b9c	⬆️ Update dependencies	2016-10-02 09:40:12 +02:00
Jakub Juszczak	b3faeb4f2b	📝 Update Changelog	2016-10-02 09:34:45 +02:00
Jakub Juszczak	42f552a1f2	📝 Update README	2016-10-02 09:29:28 +02:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="100%" x2="0%" y1="4.18%" y2="65.116%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient><linearGradient id="b" x1="108.208%" x2="5.433%" y1="12.265%" y2="86.92%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient></defs><g fill="none"><path fill="#fff" stroke="#EBEBEB" stroke-width="8.456" d="M128.744 13l99.745 57.46v114.921l-99.745 57.46-99.744-57.46v-114.921z"/><path fill="url(#a)" d="M129 17.941l90.395 51.432-4.057 117.675-86.903 4.653z"/><path fill="url(#b)" d="M129 17.814l-90.961 51.559-3.191 113.538 93.587 8.79z"/><path fill="#41B883" d="M32.955 72.755l95.789 54.681v110.49l-95.789-54.681z"/><path fill="#35495E" d="M224.48 71.627l-95.789 55.809v110.49l95.789-54.681z"/><path fill="#596F85" d="M224.48 71.627l-95.789 55.809v-7.892l88.445-51.299z"/><path fill="#61D09F" d="M32.955 72.755l95.789 54.681v-7.892l-89.575-50.171z"/></g></svg>