💎 Release new version 3.2.0

Closes #306

.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,11 +1,111 @@
 # 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)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v3.0.0...v3.0.1)
+
+**Closed issues:**
+
+- \[Suggestion\]Loose package dependencies [\#245](https://github.com/apertureless/vue-chartjs/issues/245)
+- reactiveData mixin [\#244](https://github.com/apertureless/vue-chartjs/issues/244)
+- Customise individual Axis Labels [\#243](https://github.com/apertureless/vue-chartjs/issues/243)
+- presets es2015  [\#242](https://github.com/apertureless/vue-chartjs/issues/242)
+- Uncaught TypeError: Cannot read property 'transition' of null [\#241](https://github.com/apertureless/vue-chartjs/issues/241)
+- Is it possible to create an callback on the onAnimationComplete option [\#240](https://github.com/apertureless/vue-chartjs/issues/240)
+- When resizing window, chart returns to first loaded state [\#239](https://github.com/apertureless/vue-chartjs/issues/239)
+- Reactively change chart properties [\#237](https://github.com/apertureless/vue-chartjs/issues/237)
+- how to enforce the max value on y axis [\#236](https://github.com/apertureless/vue-chartjs/issues/236)
+- Chart is not rendered when maintainAspectRatio is set to false and chart container is hidden [\#235](https://github.com/apertureless/vue-chartjs/issues/235)
+- How to access Chart.defaults.global [\#234](https://github.com/apertureless/vue-chartjs/issues/234)
+- Blank Chart - no data [\#233](https://github.com/apertureless/vue-chartjs/issues/233)
+- Maxin with multiple chartData [\#231](https://github.com/apertureless/vue-chartjs/issues/231)
+- How to destroy chart before re-rendering? [\#230](https://github.com/apertureless/vue-chartjs/issues/230)
+- chnage gridlines color [\#228](https://github.com/apertureless/vue-chartjs/issues/228)
+- Stacked bar chart? [\#226](https://github.com/apertureless/vue-chartjs/issues/226)
+- Chart crashes when reentering page [\#223](https://github.com/apertureless/vue-chartjs/issues/223)
+- 在图表上左右滑动会出现数据错乱的问题 [\#222](https://github.com/apertureless/vue-chartjs/issues/222)
+- How do I set the scale of the Y axis? [\#220](https://github.com/apertureless/vue-chartjs/issues/220)
+- Upgrading from 2.8.2 to 2.8.3 breaks charts [\#209](https://github.com/apertureless/vue-chartjs/issues/209)
+- How to scale the radius property of each bubble in a vue-chartjs bubble chart [\#205](https://github.com/apertureless/vue-chartjs/issues/205)
+- Last release is causing problems with Firefox [\#203](https://github.com/apertureless/vue-chartjs/issues/203)
+- 🔥 Remove Vue.extend\(\) [\#201](https://github.com/apertureless/vue-chartjs/issues/201)
+- Update to webpack@3 [\#134](https://github.com/apertureless/vue-chartjs/issues/134)
+
+**Merged pull requests:**
+
+- Feature/dependency and build fix [\#246](https://github.com/apertureless/vue-chartjs/pull/246) ([apertureless](https://github.com/apertureless))
+- Typo fix in EN docs [\#238](https://github.com/apertureless/vue-chartjs/pull/238) ([chakan](https://github.com/chakan))
+- Made some small edits to French README.MD [\#232](https://github.com/apertureless/vue-chartjs/pull/232) ([music-mind](https://github.com/music-mind))
+- update webpack to version 3 [\#227](https://github.com/apertureless/vue-chartjs/pull/227) ([kingkong64](https://github.com/kingkong64))
+
+## [v3.0.0](https://github.com/apertureless/vue-chartjs/tree/v3.0.0) (2017-10-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.7...v3.0.0)
+
+**Closed issues:**
+
+- Create an image of the chart to download [\#219](https://github.com/apertureless/vue-chartjs/issues/219)
+- How to achieve this effect? [\#218](https://github.com/apertureless/vue-chartjs/issues/218)
+- Some Error [\#217](https://github.com/apertureless/vue-chartjs/issues/217)
+- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData" [\#216](https://github.com/apertureless/vue-chartjs/issues/216)
+- can't get legendCallback to fire at all [\#212](https://github.com/apertureless/vue-chartjs/issues/212)
+- this demo is not support, is it because version older? [\#210](https://github.com/apertureless/vue-chartjs/issues/210)
+- how to change value without reload?? [\#208](https://github.com/apertureless/vue-chartjs/issues/208)
+- typescript definition? [\#207](https://github.com/apertureless/vue-chartjs/issues/207)
+- 使用动态数据时报错 [\#204](https://github.com/apertureless/vue-chartjs/issues/204)
+- Commit the final dist js files to github [\#202](https://github.com/apertureless/vue-chartjs/issues/202)
+- \[Best Practices❓\] Usage of Private Data [\#182](https://github.com/apertureless/vue-chartjs/issues/182)
+- 📝 Update docs & examples - SSR with nuxt [\#172](https://github.com/apertureless/vue-chartjs/issues/172)
+- 📝 Update Docs - Section about extending [\#171](https://github.com/apertureless/vue-chartjs/issues/171)
+- Register vue-chartjs as vue-plugin? [\#168](https://github.com/apertureless/vue-chartjs/issues/168)
+- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders [\#151](https://github.com/apertureless/vue-chartjs/issues/151)
+
+**Merged pull requests:**
+
+- Feature/v3 [\#225](https://github.com/apertureless/vue-chartjs/pull/225) ([apertureless](https://github.com/apertureless))
+- ✏️ Spelling in docs [\#215](https://github.com/apertureless/vue-chartjs/pull/215) ([cugu](https://github.com/cugu))
+- Fix inaccuracies in Russian translation [\#214](https://github.com/apertureless/vue-chartjs/pull/214) ([pushkyn](https://github.com/pushkyn))
+- Add id docs readme support [\#213](https://github.com/apertureless/vue-chartjs/pull/213) ([tesarwijaya](https://github.com/tesarwijaya))
+- French translation for README.md [\#211](https://github.com/apertureless/vue-chartjs/pull/211) ([julienc91](https://github.com/julienc91))
+
+## [v2.8.7](https://github.com/apertureless/vue-chartjs/tree/v2.8.7) (2017-09-16)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.6...v2.8.7)
+
+**Closed issues:**
+
+- 真机和浏览器呈现的效果不一样的问题 [\#199](https://github.com/apertureless/vue-chartjs/issues/199)
+- can not use npm install? [\#198](https://github.com/apertureless/vue-chartjs/issues/198)
+- Reactive Props - Max Call Stack Exceeded Error [\#197](https://github.com/apertureless/vue-chartjs/issues/197)
+- Unmet Peer Dependency [\#196](https://github.com/apertureless/vue-chartjs/issues/196)
+- Is there a way to update options? [\#195](https://github.com/apertureless/vue-chartjs/issues/195)
+- deepmerge [\#194](https://github.com/apertureless/vue-chartjs/issues/194)
+- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
+
+## [v2.8.6](https://github.com/apertureless/vue-chartjs/tree/v2.8.6) (2017-09-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.5...v2.8.6)
+
 ## [v2.8.5](https://github.com/apertureless/vue-chartjs/tree/v2.8.5) (2017-09-12)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.4...v2.8.5)
 
 **Closed issues:**
 
-- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
 - Chart error since the addition of deepmerge in build 2.8.4 [\#192](https://github.com/apertureless/vue-chartjs/issues/192)
 
 ## [v2.8.4](https://github.com/apertureless/vue-chartjs/tree/v2.8.4) (2017-09-08)

README.md

@@ -33,7 +33,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 +73,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 +123,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 +158,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 +166,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 +188,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 +234,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 +294,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
 

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
     }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -37,7 +37,7 @@
     "Charts"
   ],
   "main": "dist/vue-chartjs.js",
-  "unpkg": "dist/vue-chartjs.full.min.js",
+  "unpkg": "dist/vue-chartjs.min.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
   "files": [
@@ -53,12 +53,10 @@
     "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"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "chart.js": "2.7.x"
   },
@@ -72,7 +70,7 @@
     "chart.js": "2.7.0",
     "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 +106,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",

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,19 @@
-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,
+  version: LIB_VERSION,
   Bar,
   HorizontalBar,
   Doughnut,

src/mixins/index.js

@@ -1,5 +1,89 @@
-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: {
+      required: true
+    }
+  },
+  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')
-  })
-})