Merge branch 'develop'

* develop:
  Chore: Update dependencies

.eslintrc.js

@@ -15,5 +15,8 @@ module.exports = {
     'arrow-parens': 0,
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  },
+  "globals": {
+    "LIB_VERSION": true
   }
 }

CHANGELOG.md

@@ -1,3 +1,22 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+<a name="3.1.0"></a>
+# [3.1.0](https://github.com/apertureless/vue-chartjs/compare/v3.0.2...v3.1.0) (2018-01-12)
+
+
+### Bug Fixes
+
+* **mixins:** Check for chartjs instance before rendering chart ([39ff839](https://github.com/apertureless/vue-chartjs/commit/39ff839)), closes [#288](https://github.com/apertureless/vue-chartjs/issues/288)
+
+
+### Features
+
+* **charts:** Remove default styling ([ac5d4d8](https://github.com/apertureless/vue-chartjs/commit/ac5d4d8))
+
+
+
 # Change Log
 
 ## [v3.0.1](https://github.com/apertureless/vue-chartjs/tree/v3.0.1) (2017-11-06)

README.md

@@ -10,6 +10,9 @@
 [![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)
+[![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)
+[![Maintainability](https://api.codeclimate.com/v1/badges/8c0256b16ba7a50a9f93/maintainability)](https://codeclimate.com/github/apertureless/vue-chartjs/maintainability)
+[![Donate](assets/donate.svg)](paypal)
 
 # vue-chartjs
 
@@ -33,7 +36,8 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
 
 ## Install
 
-Simply run `yarn add vue-chartjs chart.js`
+- **yarn** install: `yarn add vue-chartjs chart.js`
+- **npm** install: `npm install vue-chartjs chart.js --save`
 
 Or if you want to use it directly in the browser add
 
@@ -72,11 +76,11 @@ Vue.component('line-chart', {
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-However Chart.js is a `peerDependencies` so you have to install it separately. In most projects This way, you can have different versions of Chart.js then in this package.
+However, Chart.js is a `peerDependencies` so you have to install it separately. In most projects This way, you can have different versions of 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, `Chart.js` is a `peerDependencies` and need to be installed.
+It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
 
 
 ## How to use
@@ -122,7 +126,7 @@ import CommitChart from 'path/to/component/CommitChart'
 
 ## Another Example with options
 
-You can overwrite the default chart options. Just pass the options object as a second paramenter to the render method
+You can overwrite the default chart options. Just pass the options object as a second parameter to the render method
 
 ```javascript
 // MonthlyIncome.vue
@@ -157,7 +161,7 @@ export default {
 ## Reactivity
 
 Chart.js does not update or re-render the chart if new data is passed.
-However you can simply implement this on your own or use one of the two mixins which are included.
+However, you can simply implement this on your own or use one of the two mixins which are included.
 
 - `reactiveProp`
 - `reactiveData`
@@ -165,7 +169,11 @@ However you can simply implement this on your own or use one of the two mixins w
 Both are included in the `mixins` module.
 
 The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
-However keep in mind the limitations of vue and javascript for mutations on arrays and objects. More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
+However, keep in mind the limitations of vue and javascript for mutations on arrays and objects.
+**It is important that you pass your options in a local variable named `options`!**
+The reason is that if the mixin re-renders the chart it calls `this.renderChart(this.chartData, this.options`)` so don't pass in the options object directly or it will be ignored.
+
+More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
 
 ```javascript
 // MonthlyIncome.js
@@ -183,7 +191,7 @@ export default {
 ```
 
 ### Mixins module
-The `mixins` module is included in the `VueCharts` module and as a seperate module.
+The `mixins` module is included in the `VueCharts` module and as a separate module.
 Some ways to import them:
 
 ```javascript
@@ -229,6 +237,10 @@ export default {
 }
 ```
 
+## Single File Components
+
+You can create your components in Vues single file components. However it is important that you **do not** have the `<template></template>` included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.
+
 ## Available Charts
 
 ### Bar Chart
@@ -285,7 +297,7 @@ npm run e2e
 npm test
 ```
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+For a detailed explanation of how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 ## Contributing
 
@@ -298,3 +310,5 @@ For a detailed explanation on how things work, check out the [guide](http://vuej
 ## License
 
 This software is distributed under [MIT license](LICENSE.txt).
+
+[paypal]: https://www.paypal.me/apertureless/50eur

assets/donate.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="74" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="74" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h25v20H0z"/><path fill="#179BD7" d="M25 0h49v20H25z"/><path fill="url(#b)" d="M0 0h74v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjMTc5QkQ3IiBkPSJNNDExLjg5OSwxMzQuMzI4TDQxMS44OTksMTM0LjMyOEw0MTEuODk5LDEzNC4zMjhjLTAuNDM1LDIuNzgyLTAuOTMzLDUuNjI2LTEuNDkyLDguNTQ4DQoJCWMtMTkuMjI2LDk4LjcwOS04NS4wMDEsMTMyLjgwOS0xNjkuMDA3LDEzMi44MDloLTQyLjc3MmMtMTAuMjczLDAtMTguOTMxLDcuNDYtMjAuNTMxLDE3LjU5NGwwLDBsMCwwbC0yMS44OTksMTM4Ljg4Ng0KCQlsLTYuMjAxLDM5LjM2OWMtMS4wNDEsNi42NTIsNC4wODgsMTIuNjUxLDEwLjgwMiwxMi42NTFoNzUuODYyYzguOTgzLDAsMTYuNjE1LTYuNTI4LDE4LjAyOS0xNS4zODdsMC43NDYtMy44NTRsMTQuMjgzLTkwLjY0Mw0KCQlsMC45MTctNC45NzRjMS4zOTktOC44OSw5LjA0Ni0xNS40MTgsMTguMDI5LTE1LjQxOGgxMS4zNDZjNzMuNSwwLDEzMS4wMzctMjkuODQxLDE0Ny44NTQtMTE2LjE5NA0KCQljNy4wMjUtMzYuMDc0LDMuMzg4LTY2LjE5NS0xNS4yLTg3LjM3OUM0MjcuMDM3LDE0My45NDksNDIwLjA1OSwxMzguNjQ5LDQxMS44OTksMTM0LjMyOHoiLz4NCgk8cGF0aCBmaWxsPSIjMjIyRDY1IiBkPSJNMzkxLjc4NywxMjYuMzA4Yy0yLjkzOC0wLjg1NS01Ljk2OC0xLjYzMi05LjA3Ny0yLjMzMWMtMy4xMjQtMC42ODQtNi4zMjYtMS4yOS05LjYyMS0xLjgxOA0KCQljLTExLjUzMi0xLjg2NS0yNC4xNjgtMi43NTEtMzcuNzA2LTIuNzUxSDIyMS4xMTdjLTIuODEzLDAtNS40ODYsMC42MzctNy44OCwxLjc4N2MtNS4yNjksMi41MzMtOS4xODUsNy41MjItMTAuMTM0LDEzLjYzMQ0KCQlsLTI0LjMwOCwxNTMuOTYybC0wLjY5OSw0LjQ5MmMxLjYwMS0xMC4xMzQsMTAuMjU4LTE3LjU5NCwyMC41MzEtMTcuNTk0SDI0MS40Yzg0LjAwNiwwLDE0OS43ODEtMzQuMTE1LDE2OS4wMDctMTMyLjgwOQ0KCQljMC41NzUtMi45MjIsMS4wNTctNS43NjYsMS40OTItOC41NDhjLTQuODY1LTIuNTgtMTAuMTM0LTQuNzg3LTE1LjgwNy02LjY2OEMzOTQuNjk0LDEyNy4xOTQsMzkzLjI0OCwxMjYuNzQzLDM5MS43ODcsMTI2LjMwOHoiLz4NCgk8cGF0aCBmaWxsPSIjMjUzQjgwIiBkPSJNMjAzLjEwNCwxMzQuODI1YzAuOTQ4LTYuMTA4LDQuODY1LTExLjA5NywxMC4xMzQtMTMuNjE1YzIuNDA5LTEuMTUsNS4wNjctMS43ODcsNy44OC0xLjc4N2gxMTQuMjY3DQoJCWMxMy41MzcsMCwyNi4xNzMsMC44ODYsMzcuNzA2LDIuNzUxYzMuMjk1LDAuNTI4LDYuNDk3LDEuMTM1LDkuNjIxLDEuODE4YzMuMTA4LDAuNjk5LDYuMTM5LDEuNDc3LDkuMDc3LDIuMzMxDQoJCWMxLjQ2MSwwLjQzNSwyLjkwNiwwLjg4Niw0LjMyMSwxLjMzN2M1LjY3MywxLjg4MSwxMC45NDIsNC4xMDMsMTUuODA3LDYuNjY4YzUuNzItMzYuNDc4LTAuMDQ3LTYxLjMxNC0xOS43Ny04My44MDQNCgkJYy0yMS43NDQtMjQuNzU5LTYwLjk4OC0zNS4zNTktMTExLjIwNS0zNS4zNTlIMTM1LjE1M2MtMTAuMjU4LDAtMTkuMDA4LDcuNDYtMjAuNTk0LDE3LjYwOUw1My44MzYsNDE3LjY4DQoJCWMtMS4xOTcsNy42MTYsNC42NzgsMTQuNDg1LDEyLjM1NiwxNC40ODVoOTAuMDA1bDIyLjU5OC0xNDMuMzc4TDIwMy4xMDQsMTM0LjgyNXoiLz4NCjwvZz4NCjwvc3ZnPg0K"/><text x="19.5" y="15" fill="#010101" fill-opacity=".3"></text><text x="19.5" y="14"></text><text x="48.5" y="15" fill="#010101" fill-opacity=".3">Donate</text><text x="48.5" y="14">Donate</text></g></svg>

build/webpack.base.conf.js

@@ -1,8 +1,10 @@
 'use strict'
+const webpack = require('webpack')
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
+const npmCfg = require('../package.json')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -72,5 +74,10 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      LIB_VERSION: JSON.stringify(npmCfg.version)
+    })
+  ]
 }

build/webpack.release.js

@@ -19,6 +19,7 @@ module.exports = {
   entry: {
     'vue-chartjs': './src/index.js'
   },
+  devtool: 'source-map',
   output: {
     filename: './dist/[name].js',
     library: 'VueChartJs',
@@ -82,17 +83,12 @@ module.exports = {
 }
 
 if (process.env.NODE_ENV === 'production') {
-  delete module.exports.devtool
+  // delete module.exports.devtool
   module.exports.plugins = [
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
     })
   ]
 }

build/webpack.release.min.js

@@ -3,12 +3,10 @@ var webpack = require('webpack')
 
 config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
 
-delete config.devtool
-
 config.plugins = [
   new webpack.optimize.ModuleConcatenationPlugin(),
   new webpack.optimize.UglifyJsPlugin({
-    sourceMap: false,
+    sourceMap: true,
     compress: {
       warnings: false
     }

docs/config.js

@@ -11,6 +11,11 @@ const langs = [
 
 docute.init({
   title: 'vue-chartjs docs',
+  announcement(route) {
+    const info = { type: 'success' }
+    info.html = '<a style="margin-right:10px;" class="docute-button docute-button-mini docute-button-success" href="https://www.paypal.me/apertureless/50eur" target="_blank">Donate!</a> Support vue-chartjs development by a one-time donation.'
+    return info
+  },
   landing: true,
   landing: '_landing.html',
   repo: 'apertureless/vue-chartjs',

docs/index.html

@@ -5,7 +5,7 @@
   <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">
+  <link rel="stylesheet" href="https://unpkg.com/docute/dist/docute.css">
 </head>
 <body>
   <!-- don't remove this part start -->

docs/ja/README.md

@@ -6,7 +6,7 @@ search: ja
 **vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
 
 ## イントロ
-`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
+`vue-chartjs` vueの中であまり面倒ことがなくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
 
 chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
 
@@ -41,7 +41,7 @@ export default {
 }
 ```
 
-renderChart()メソッドに2つの引数を渡すことができます:
+`renderChart()`メソッドに2つの引数を渡すことができます:
 
 - Data object
 - Options object
@@ -64,16 +64,18 @@ renderChart()メソッドに2つの引数を渡すことができます:
 ```
 
 詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
+
 ## プロパティ
 
-BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
+BaseChartsには基本プロパティがいくつか定義されています。 `extend()`したときにそれらは *表示されていません* が、使用するときに上書きして設定することができます。
 
 | プロパティ | 説明 |
 |---|---|
 | width | chartの表示幅 |
 | height | chartの表示高さ |
 | chart-id | canvas要素のid |
-
+| css-classes | 周囲のdivのCSSクラスの文字列 |
+| styles | 周囲のdivコンテナのCSSスタイルを持つオブジェクト |
 
 ## 実装例
 
@@ -115,7 +117,7 @@ export default {
 ```
 
 <p class="warning">
-`width` と `height` を反映させるためには、 `responsive：false` を設定しなければならないことに注意してください。
+固定値の`width` と `height` を反映させるためには、 `responsive：false` を設定しなければならないことに注意してください。
 </p>
 
 ### コンポーネント内のローカルデータを使用する場合
@@ -147,8 +149,7 @@ export default {
 
 ### コンポーネントの再利用
 
-チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。
-
+チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することがベストです。このようにしてチャートコンポーネントは純粋なデータ表示と、背後にあるロジックのラッパーとしてのみ責務を負います。単一ページアプリケーションを実行している場合や、たとえば laravel などで統合されている場合は、異なった方法があります。
 
 ## リアクティブデータ
 
@@ -182,7 +183,8 @@ export default {
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
-    // this.chartData is created in the mixin
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
 }
@@ -259,7 +261,24 @@ export default {
 
 ## Chart.js オブジェクト
 
-場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this.$data._chart` を使ってアクセスします。
+時にはchart.jsをより詳細に制御する必要があります。そのためには `this.$data._chart` を使ってChart.jsインスタンスにアクセスすることができます。
+
+## インライン プラグイン
+
+Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。[Chart.js docs]（http://www.chartjs.org/docs/latest/developers/plugins.html）で記載されているのようなグローバルプラグインは、 `vue-chartjs ` で問題なく動作しています。
+
+### Example
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
 
 ## 利用可能なグラフ
 
@@ -293,6 +312,11 @@ export default {
 
 ![Bubble](../assets/bubble.png)
 
+### 散布図
+
+このチャートは、他のものとは異なるデータ構造を持っています。現在のところ、reactive mixins はこのチャートタイプでは機能していません。
+
+![Scatter](../assets/scatter.png)
 
 ## ビルド方法の違い
 あなたが使用するビルドツールに依存した３つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。
@@ -320,3 +344,13 @@ Vue.jsとChart.jsは `peerDependencies` なので別にインストールする
 
 ### Webpack 2
 Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
+
+## Resources
+
+以下に `vue-chartjs` の使い方に関するチュートリアルのようなリソースがあります
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "3.0.2",
+  "version": "3.2.1",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -53,26 +53,23 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
+    "release": "cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
     "prepublishOnly": "yarn run lint && yarn run test && yarn run build"
   },
-  "dependencies": {
-    "lodash.merge": "^4.6.0"
-  },
   "peerDependencies": {
     "chart.js": "2.7.x"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.31",
-    "@babel/core": "^7.0.0-beta.31",
-    "@babel/preset-env": "^7.0.0-beta.31",
-    "@babel/preset-stage-2": "^7.0.0-beta.31",
+    "@babel/cli": "^7.0.0-beta.42",
+    "@babel/core": "^7.0.0-beta.42",
+    "@babel/preset-env": "^7.0.0-beta.42",
+    "@babel/preset-stage-2": "^7.0.0-beta.42",
     "babel-loader": "8.0.0-beta.0",
     "chai": "^3.5.0",
-    "chart.js": "2.7.0",
+    "chart.js": "2.7.2",
     "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-env": "^3.2.4",
+    "cross-env": "^5.1.1",
     "cross-spawn": "^5.1.0",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
@@ -108,7 +105,6 @@
     "karma-webpack": "2",
     "lolex": "^1.6.0",
     "mocha": "^3.1.0",
-    "nightwatch": "^0.9.14",
     "opn": "^5.1.0",
     "ora": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.13",
@@ -118,12 +114,12 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "2.5.2",
-    "vue-hot-reload-api": "2.1.0",
+    "vue": "2.5.16",
+    "vue-hot-reload-api": "2.3.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "3.0.1",
-    "vue-template-compiler": "2.5.2",
+    "vue-loader": "^14.2.1",
+    "vue-style-loader": "4.0.2",
+    "vue-template-compiler": "2.5.16",
     "webpack": "^3.7.1",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",

src/BaseCharts.js

@@ -0,0 +1,104 @@
+import Chart from 'chart.js'
+
+function generateChart (chartId, chartType) {
+  return {
+    render: function (createElement) {
+      return createElement(
+        'div', {
+          style: this.styles,
+          class: this.cssClasses
+        },
+        [
+          createElement(
+            'canvas', {
+              attrs: {
+                id: this.chartId,
+                width: this.width,
+                height: this.height
+              },
+              ref: 'canvas'
+            }
+          )
+        ]
+      )
+    },
+
+    props: {
+      chartId: {
+        default: chartId,
+        type: String
+      },
+      width: {
+        default: 400,
+        type: Number
+      },
+      height: {
+        default: 400,
+        type: Number
+      },
+      cssClasses: {
+        type: String,
+        default: ''
+      },
+      styles: {
+        type: Object
+      },
+      plugins: {
+        type: Array,
+        default () {
+          return []
+        }
+      }
+    },
+
+    data () {
+      return {
+        _chart: null,
+        _plugins: this.plugins
+      }
+    },
+
+    methods: {
+      addPlugin (plugin) {
+        this.$data._plugins.push(plugin)
+      },
+      renderChart (data, options) {
+        this.$data._chart = new Chart(
+          this.$refs.canvas.getContext('2d'), {
+            type: chartType,
+            data: data,
+            options: options,
+            plugins: this.$data._plugins
+          }
+        )
+      }
+    },
+    beforeDestroy () {
+      if (this.$data._chart) {
+        this.$data._chart.destroy()
+      }
+    }
+  }
+}
+
+export const Bar = generateChart('bar-chart', 'bar')
+export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
+export const Doughnut = generateChart('doughnut-chart', 'doughnut')
+export const Line = generateChart('line-chart', 'line')
+export const Pie = generateChart('pie-chart', 'pie')
+export const PolarArea = generateChart('polar-chart', 'polarArea')
+export const Radar = generateChart('radar-chart', 'radar')
+export const Bubble = generateChart('bubble-chart', 'bubble')
+export const Scatter = generateChart('scatter-chart', 'scatter')
+
+export default {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+}

src/BaseCharts/Bar.js

@@ -1,93 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-  props: {
-    chartId: {
-      default: 'bar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Bubble.js

@@ -1,96 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'bubble-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bubble',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Doughnut.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'doughnut-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'doughnut',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/HorizontalBar.js

@@ -1,95 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'horizontalbar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options, type) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'horizontalBar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Line.js

@@ -1,94 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'line-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            }
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'line',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Pie.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'pie-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'pie',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/PolarArea.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'polar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'polarArea',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Radar.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'radar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'radar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Scatter.js

@@ -1,85 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'scatter-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      defaultOptions: {
-        scales: {
-          xAxes: [{
-            type: 'linear',
-            position: 'bottom'
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'scatter',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/examples/App.vue

@@ -5,6 +5,11 @@
       <bar-example></bar-example>
     </div>
 
+    <div class="Chart">
+      <h1 style="text-align:center;">Horizontal Barchart</h1>
+      <horizontal-bar-example></horizontal-bar-example>
+    </div>
+
     <div class="Chart">
       <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
       <reactive-example></reactive-example>
@@ -63,6 +68,7 @@
   import ReactiveExample from './ReactiveExample'
   import ReactivePropExample from './ReactivePropExample'
   import ScatterExample from './ScatterExample'
+  import HorizontalBarExample from './HorizontalBarExample'
 
   export default {
     components: {
@@ -75,7 +81,8 @@
       BubbleExample,
       ReactiveExample,
       ReactivePropExample,
-      ScatterExample
+      ScatterExample,
+      HorizontalBarExample
     },
     data () {
       return {

src/examples/BarExample.js

@@ -1,4 +1,4 @@
-import Bar from '../BaseCharts/Bar'
+import { Bar } from '../BaseCharts'
 
 export default {
   extends: Bar,

src/examples/BubbleExample.js

@@ -1,4 +1,4 @@
-import Bubble from '../BaseCharts/Bubble'
+import { Bubble } from '../BaseCharts'
 
 export default {
   extends: Bubble,

src/examples/DoughnutExample.js

@@ -1,4 +1,4 @@
-import Doughnut from '../BaseCharts/Doughnut'
+import { Doughnut } from '../BaseCharts'
 
 export default {
   extends: Doughnut,

src/examples/HorizontalBarExample.js

@@ -1,4 +1,4 @@
-import HorizontalBar from '../BaseCharts/HorizontalBar'
+import { HorizontalBar } from '../BaseCharts'
 
 export default {
   extends: HorizontalBar,

src/examples/LineExample.js

@@ -1,4 +1,4 @@
-import Line from '../BaseCharts/Line'
+import { Line } from '../BaseCharts'
 
 export default {
   extends: Line,

src/examples/PieExample.js

@@ -1,4 +1,4 @@
-import Pie from '../BaseCharts/Pie'
+import { Pie } from '../BaseCharts'
 
 export default {
   extends: Pie,

src/examples/PolarAreaExample.js

@@ -1,4 +1,4 @@
-import PolarArea from '../BaseCharts/PolarArea'
+import { PolarArea } from '../BaseCharts'
 
 export default {
   extends: PolarArea,

src/examples/RadarExample.js

@@ -1,4 +1,4 @@
-import Radar from '../BaseCharts/Radar'
+import { Radar } from '../BaseCharts'
 
 export default {
   extends: Radar,

src/examples/ReactiveExample.js

@@ -1,20 +1,22 @@
-import Bar from '../BaseCharts/Bar'
-import reactiveData from '../mixins/reactiveData'
+import { Bar } from '../BaseCharts'
+import { reactiveData } from '../mixins'
 
 export default {
   extends: Bar,
   mixins: [reactiveData],
-  data () {
-    return {
-      chartData: ''
+  data: () => ({
+    chartData: '',
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
     }
-  },
+  }),
   created () {
     this.fillData()
   },
 
   mounted () {
-    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
+    this.renderChart(this.chartData, this.options)
 
     setInterval(() => {
       this.fillData()

src/examples/ReactivePropExample.js

@@ -1,11 +1,17 @@
-import Bar from '../BaseCharts/Bar'
-import reactiveProp from '../mixins/reactiveProp'
+import { Bar } from '../BaseCharts'
+import { reactiveProp } from '../mixins'
 
 export default {
   extends: Bar,
   mixins: [reactiveProp],
+  data: () => ({
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  }),
 
   mounted () {
-    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
+    this.renderChart(this.chartData, this.options)
   }
 }

src/examples/ScatterExample.js

@@ -1,4 +1,4 @@
-import Scatter from '../BaseCharts/Scatter'
+import { Scatter } from '../BaseCharts'
 
 export default {
   extends: Scatter,

src/helpers/options.js

@@ -1,5 +0,0 @@
-import merge from 'lodash.merge'
-
-export function mergeOptions (obj, src) {
-  return merge(obj, src)
-}

src/index.js

@@ -1,17 +1,18 @@
-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 Scatter from './BaseCharts/Scatter'
 import mixins from './mixins/index.js'
-import npmCfg from '../package.json'
+
+import {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+} from './BaseCharts'
 
 const VueCharts = {
-  version: npmCfg.version,
   Bar,
   HorizontalBar,
   Doughnut,

src/mixins/index.js

@@ -1,5 +1,91 @@
-import reactiveData from './reactiveData.js'
-import reactiveProp from './reactiveProp.js'
+function dataHandler (newData, oldData) {
+  if (oldData) {
+    let chart = this.$data._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) => {
+        // Get new and old dataset keys
+        const oldDatasetKeys = Object.keys(oldData.datasets[i])
+        const newDatasetKeys = Object.keys(dataset)
+
+        // Get keys that aren't present in the new data
+        const deletionKeys = oldDatasetKeys.filter((key) => {
+          return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+        })
+
+        // Remove outdated key-value pairs
+        deletionKeys.forEach((deletionKey) => {
+          delete chart.data.datasets[i][deletionKey]
+        })
+
+        // Update attributes individually to avoid re-rendering the entire chart
+        for (const attribute in dataset) {
+          if (dataset.hasOwnProperty(attribute)) {
+            chart.data.datasets[i][attribute] = dataset[attribute]
+          }
+        }
+      })
+
+      if (newData.hasOwnProperty('labels')) {
+        chart.data.labels = newData.labels
+      }
+      if (newData.hasOwnProperty('xLabels')) {
+        chart.data.xLabels = newData.xLabels
+      }
+      if (newData.hasOwnProperty('yLabels')) {
+        chart.data.yLabels = newData.yLabels
+      }
+      chart.update()
+    } else {
+      chart.destroy()
+      this.renderChart(this.chartData, this.options)
+    }
+  } else {
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
+    }
+    this.renderChart(this.chartData, this.options)
+  }
+}
+
+export const reactiveData = {
+  data () {
+    return {
+      chartData: null
+    }
+  },
+
+  watch: {
+    'chartData': dataHandler
+  }
+}
+
+export const reactiveProp = {
+  props: {
+    chartData: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
+  watch: {
+    'chartData': dataHandler
+  }
+}
 
 export default {
   reactiveData,

src/mixins/reactiveData.js

@@ -1,71 +0,0 @@
-module.exports = {
-  data () {
-    return {
-      chartData: null
-    }
-  },
-  watch: {
-    'chartData': {
-      handler (newData, oldData) {
-        if (oldData) {
-          let chart = this.$data._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) => {
-              // Get new and old dataset keys
-              const oldDatasetKeys = Object.keys(oldData.datasets[i])
-              const newDatasetKeys = Object.keys(dataset)
-
-              // Get keys that aren't present in the new data
-              const deletionKeys = oldDatasetKeys.filter((key) => {
-                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
-              })
-
-              // Remove outdated key-value pairs
-              deletionKeys.forEach((deletionKey) => {
-                delete chart.data.datasets[i][deletionKey]
-              })
-
-              // Update attributes individually to avoid re-rendering the entire chart
-              for (const attribute in dataset) {
-                if (dataset.hasOwnProperty(attribute)) {
-                  chart.data.datasets[i][attribute] = dataset[attribute]
-                }
-              }
-            })
-
-            if (newData.hasOwnProperty('labels')) {
-              chart.data.labels = newData.labels
-            }
-            if (newData.hasOwnProperty('xLabels')) {
-              chart.data.xLabels = newData.xLabels
-            }
-            if (newData.hasOwnProperty('yLabels')) {
-              chart.data.yLabels = newData.yLabels
-            }
-            chart.update()
-          } else {
-            chart.destroy()
-            this.renderChart(this.chartData, this.options)
-          }
-        } else {
-          this.renderChart(this.chartData, this.options)
-        }
-      }
-    }
-  }
-}

src/mixins/reactiveProp.js

@@ -1,71 +0,0 @@
-module.exports = {
-  props: {
-    chartData: {
-      required: true
-    }
-  },
-  watch: {
-    'chartData': {
-      handler (newData, oldData) {
-        if (oldData) {
-          let chart = this.$data._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) => {
-              // Get new and old dataset keys
-              const oldDatasetKeys = Object.keys(oldData.datasets[i])
-              const newDatasetKeys = Object.keys(dataset)
-
-              // Get keys that aren't present in the new data
-              const deletionKeys = oldDatasetKeys.filter((key) => {
-                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
-              })
-
-              // Remove outdated key-value pairs
-              deletionKeys.forEach((deletionKey) => {
-                delete chart.data.datasets[i][deletionKey]
-              })
-
-              // Update attributes individually to avoid re-rendering the entire chart
-              for (const attribute in dataset) {
-                if (dataset.hasOwnProperty(attribute)) {
-                  chart.data.datasets[i][attribute] = dataset[attribute]
-                }
-              }
-            })
-
-            if (newData.hasOwnProperty('labels')) {
-              chart.data.labels = newData.labels
-            }
-            if (newData.hasOwnProperty('xLabels')) {
-              chart.data.xLabels = newData.xLabels
-            }
-            if (newData.hasOwnProperty('yLabels')) {
-              chart.data.yLabels = newData.yLabels
-            }
-            chart.update()
-          } else {
-            chart.destroy()
-            this.renderChart(this.chartData, this.options)
-          }
-        } else {
-          this.renderChart(this.chartData, this.options)
-        }
-      }
-    }
-  }
-}

test/unit/specs/Bar.spec.js

@@ -76,9 +76,31 @@ describe('BarChart', () => {
       components: { BarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Bubble.spec.js

@@ -76,9 +76,31 @@ describe('BubbleChart', () => {
       components: { BubbleChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Doughnut.spec.js

@@ -76,9 +76,31 @@ describe('DoughnutChart', () => {
       components: { DoughnutChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/HorizontalBar.spec.js

@@ -76,9 +76,31 @@ describe('HorizontalBarChart', () => {
       components: { HorizontalBarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Line.spec.js

@@ -76,9 +76,31 @@ describe('LineChart', () => {
       components: { LineChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          LineChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Pie.spec.js

@@ -75,9 +75,31 @@ describe('PieChart', () => {
       components: { PieChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/PolarArea.spec.js

@@ -76,9 +76,31 @@ describe('PolarChart', () => {
       components: { PolarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Radar.spec.js

@@ -75,9 +75,31 @@ describe('RadarChart', () => {
       components: { RadarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Scatter.spec.js

@@ -76,9 +76,31 @@ describe('ScatterChart', () => {
       components: { ScatterChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/helpers/options.spec.js

@@ -1,54 +0,0 @@
-import { mergeOptions } from '@/helpers/options'
-
-describe('mergeOptions.js', () => {
-  const a = {
-    a: 'a',
-    b: 'a'
-  }
-
-  const b = {
-    a: 'b',
-    b: 'b'
-  }
-
-  const c = {
-    c: 'c'
-  }
-
-  const an = {
-    a: {
-      a: 'a'
-    },
-    b: {
-      b: 'a'
-    }
-  }
-
-  const bn = {
-    a: {
-      a: 'a'
-    },
-    b: {
-      b: 'b'
-    }
-  }
-
-  it('should replace old a and b if a and b are new', () => {
-    const ab = mergeOptions(a, b)
-    expect(ab).to.have.property('a').and.to.equal('b')
-    expect(ab).to.have.property('b').and.to.equal('b')
-  })
-
-  it('should add c if c is new', () => {
-    const ac = mergeOptions(a, c)
-    expect(ac).to.have.property('a').and.to.equal('b')
-    expect(ac).to.have.property('b').and.to.equal('b')
-    expect(ac).to.have.property('c').and.to.equal('c')
-  })
-
-  it('should replace old a and b if a and b are new in nested objects', () => {
-    const ab = mergeOptions(an, bn)
-    expect(ab).to.have.deep.property('a.a').and.to.equal('a')
-    expect(ab).to.have.deep.property('b.b').and.to.equal('b')
-  })
-})