💎 Release new version 2.4.0

* 'develop' of github.com:apertureless/vue-chartjs:
  Added browserify support

.github/ISSUE_TEMPLATE.md

@@ -9,6 +9,6 @@
 
 
 ### Environment
-- OS: Write here
-- NPM Version: Write here
-
+- vue.js version: <version here>
+- vue-chart.js version: <version here>
+- npm version: <version here>

CHANGELOG.md

@@ -2,10 +2,64 @@
 
 ## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
 
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.3...HEAD)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.8...HEAD)
 
-**Fixed bugs:**
+**Closed issues:**
 
+- Add src folder to package.json "files" and make main "src/index.js" [\#49](https://github.com/apertureless/vue-chartjs/issues/49)
+- Unable to refresh [\#41](https://github.com/apertureless/vue-chartjs/issues/41)
+
+**Merged pull requests:**
+
+- 🐛 Fix \#49 [\#50](https://github.com/apertureless/vue-chartjs/pull/50) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.8](https://github.com/apertureless/vue-chartjs/tree/v2.3.8) (2017-03-01)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.6...v2.3.8)
+
+**Closed issues:**
+
+- Mixins don't seem to trigger a refresh of the chart [\#44](https://github.com/apertureless/vue-chartjs/issues/44)
+- Colors of dynamically added bars in bar graph are the default color instead of specified color [\#42](https://github.com/apertureless/vue-chartjs/issues/42)
+
+**Merged pull requests:**
+
+- Feature/documentation [\#47](https://github.com/apertureless/vue-chartjs/pull/47) ([apertureless](https://github.com/apertureless))
+- ⬆️ Update dependencies [\#46](https://github.com/apertureless/vue-chartjs/pull/46) ([apertureless](https://github.com/apertureless))
+- 📝 Update github issue template [\#45](https://github.com/apertureless/vue-chartjs/pull/45) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.6](https://github.com/apertureless/vue-chartjs/tree/v2.3.6) (2017-02-22)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.5...v2.3.6)
+
+**Closed issues:**
+
+- Please update1.1.3 chartjs to 2.5.0 [\#40](https://github.com/apertureless/vue-chartjs/issues/40)
+- Vue-chartjs components creating a second Vue runtime [\#39](https://github.com/apertureless/vue-chartjs/issues/39)
+- Since last update bar chart will no longer stack [\#38](https://github.com/apertureless/vue-chartjs/issues/38)
+- barchart 如何横向显示条形图 [\#37](https://github.com/apertureless/vue-chartjs/issues/37)
+- Animation with reactivity [\#34](https://github.com/apertureless/vue-chartjs/issues/34)
+
+**Merged pull requests:**
+
+- 🐛 Fix reactiveMixins issue \#42 [\#43](https://github.com/apertureless/vue-chartjs/pull/43) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.5](https://github.com/apertureless/vue-chartjs/tree/v2.3.5) (2017-02-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.4...v2.3.5)
+
+**Closed issues:**
+
+- Destory chart instance in reactiveMixins on render [\#35](https://github.com/apertureless/vue-chartjs/issues/35)
+- Rerendering doughtnut chart not working [\#33](https://github.com/apertureless/vue-chartjs/issues/33)
+
+**Merged pull requests:**
+
+- 🔨 Change reactiveMixins to fix \#35 [\#36](https://github.com/apertureless/vue-chartjs/pull/36) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.4](https://github.com/apertureless/vue-chartjs/tree/v2.3.4) (2017-02-11)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.3...v2.3.4)
+
+**Closed issues:**
+
+- Update Chart.js docs to include link to vue-chartjs [\#32](https://github.com/apertureless/vue-chartjs/issues/32)
 - Compatibility with Vue 2.1.10 [\#30](https://github.com/apertureless/vue-chartjs/issues/30)
 
 ## [v2.3.3](https://github.com/apertureless/vue-chartjs/tree/v2.3.3) (2017-01-19)
@@ -24,7 +78,7 @@
 ## [v2.3.2](https://github.com/apertureless/vue-chartjs/tree/v2.3.2) (2016-12-23)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.1...v2.3.2)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Content Security Policy [\#22](https://github.com/apertureless/vue-chartjs/issues/22)
 
@@ -36,13 +90,10 @@
 ## [v2.3.1](https://github.com/apertureless/vue-chartjs/tree/v2.3.1) (2016-12-20)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.0...v2.3.1)
 
-**Fixed bugs:**
-
-- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
-
 **Closed issues:**
 
 - Error in rendering [\#21](https://github.com/apertureless/vue-chartjs/issues/21)
+- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
 
 **Merged pull requests:**
 
@@ -59,8 +110,9 @@
 ## [v2.2.1](https://github.com/apertureless/vue-chartjs/tree/v2.2.1) (2016-12-07)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.0...v2.2.1)
 
-**Fixed bugs:**
+**Closed issues:**
 
+- Chart height definition inside the component [\#18](https://github.com/apertureless/vue-chartjs/issues/18)
 - Uncaught TypeError: Cannot read property 'draw' of null [\#15](https://github.com/apertureless/vue-chartjs/issues/15)
 
 **Merged pull requests:**
@@ -72,6 +124,7 @@
 
 **Closed issues:**
 
+- The page is blank？ [\#13](https://github.com/apertureless/vue-chartjs/issues/13)
 - question:syntax with vue-loader [\#12](https://github.com/apertureless/vue-chartjs/issues/12)
 - Rerender when data has changed [\#10](https://github.com/apertureless/vue-chartjs/issues/10)
 
@@ -89,13 +142,10 @@
 ## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)
 
-**Implemented enhancements:**
-
-- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
-
-**Fixed bugs:**
+**Closed issues:**
 
 - Passing chart size \(width / height\) as prop doesnt resize the chart [\#8](https://github.com/apertureless/vue-chartjs/issues/8)
+- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
 
 **Merged pull requests:**
 
@@ -104,7 +154,7 @@
 ## [1.1.2](https://github.com/apertureless/vue-chartjs/tree/1.1.2) (2016-09-07)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.1...1.1.2)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Change name of the render method to ensure compatiblity with Vue 2.0 [\#4](https://github.com/apertureless/vue-chartjs/issues/4)
 
@@ -114,7 +164,7 @@
 ## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Use Vue.util.mergeOptions to merge default options with user's options [\#5](https://github.com/apertureless/vue-chartjs/issues/5)
 
@@ -125,9 +175,12 @@
 ## [1.0.3](https://github.com/apertureless/vue-chartjs/tree/1.0.3) (2016-08-20)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.2...1.0.3)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Publish on NPM [\#2](https://github.com/apertureless/vue-chartjs/issues/2)
+
+**Merged pull requests:**
+
 - Properly destroy chartjs objects [\#3](https://github.com/apertureless/vue-chartjs/pull/3) ([LinusBorg](https://github.com/LinusBorg))
 
 ## [1.0.2](https://github.com/apertureless/vue-chartjs/tree/1.0.2) (2016-07-27)

README.md

@@ -13,19 +13,20 @@
 
 **vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
 
-## Demo
+## Demo & Docs
 
-[Demo](https://apertureless.github.io/vue-chartjs/)
+- [Demo](http://demo.vue-chartjs.org/)
+- [Docs](http://www.vue-chartjs.org/)
 
 ### Compatibility
 
-- v1 later
+- v1 later `@legacy`
   - Vue.js 1.x
 - v2 later
   - Vue.js 2.x
 
 After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
-No need for the @next tag anymore. If you want the v1 you need to define the version.
+No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
 If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
 
 ## Install
@@ -175,6 +176,29 @@ export default Line.extend({
 })
 ```
 
+## Webpack & Bundling tools
+There are now two version the main entry point is `src/index.js` which is the ES6 source, unbundled.
+If you're using webpack it is recommended to use this one. Because the bundled umd version has vue.js and chart.js bundled into it.
+
+However if you have problems o you can import the dist file
+
+```
+import VueCharts from 'vue-chartjs/dist/vue-chartjs'
+// or
+import { Line } from 'vue-chartjs/dist/vue-chartjs'
+```
+
+Or you can set an alias.
+
+### Browserify
+
+In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
+
+```
+{
+"presets": ["es2015"]
+}
+```
 ## Available Charts
 
 ### Bar Chart

docs/CNAME

@@ -0,0 +1 @@
+vue-chartjs.org

docs/README.md

@@ -0,0 +1,304 @@
+---
+search: english
+---
+
+# vue-chartjs
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+
+## Introduction
+`vue-chartjs` let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.
+
+It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.
+
+## Installation
+If you are working with Vue.js 2+ simple run:
+
+`yarn add vue-chartjs -S`
+
+If you are using vue 1.x please use the `legancy` tag. However the vue 1 version is not maintained anymore.
+
+`yarn add vue-chartjs@legacy -S`
+
+## Quick Start
+
+You need to import the base chart and extend it. This gives much more flexibility when working with different data.
+You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.
+
+You can import the whole package or each module individual.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart(data, options)
+  }
+})
+```
+
+You can pass the `renderChart()` method, two arguments:
+
+- Data object
+- Options object
+
+### Data object
+
+The data object looks like this:
+
+```javascript
+{
+  labels: ['January', 'February'],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20]
+    }
+  ]
+}
+```
+
+For more information take a look at the [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) docs.
+
+## Props
+
+There are some basic props defined in the BaseCharts. Because you `extend()` them, they are *invisible*, but you can overwrite them:
+
+| Prop | Description |
+|---|---|
+| width | chart width |
+| height | chart height |
+| id | id of the canvas |
+
+
+## Examples
+
+Here are some exmaples
+
+### Chart with props
+
+You can create the data and options props to pass data to the chart.
+
+```javascript
+// LineChart.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+After you add your component you can use it:
+
+```html
+ <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+```
+
+If you want to overwrite the width and height:
+
+```html
+ <line-chart
+  :data="{your data object}"
+  :options="{responsive: false, maintainAspectRatio: false}"
+  :width="400"
+  :height="200"
+  >
+ </line-chart>
+```
+
+<p class="warning">
+  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
+</p>
+
+### Chart with local data
+
+```javascript
+import {Bar} from 'vue-chartjs'
+
+export default Bar.extend({
+  data () {
+    return {
+      datacollection: {
+        labels: ['January', 'February'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20]
+          }
+        ]
+      }
+    }
+  }
+  mounted () {
+    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
+  }
+})
+```
+
+### Reusebale Components
+
+If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.
+
+## Reactive Data
+
+Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achive this.
+
+- `reactiveProp`
+- `reactiveData`
+
+Both mixins to actually the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop names `chartData` and add a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
+
+`reactiveData` simply creates a local chartData variable which is not a prop! And add a watcher.
+This is only usefull, if you need single purpose charts and make an API call inside your chart component.
+
+```javascript
+data () {
+  return {
+    chartData: null
+  }
+}
+```
+
+### Example
+
+**LineChart.js**
+```javascript
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+**RandomChart.vue**
+
+```javascript
+<template>
+  <div class="small">
+    <line-chart :chart-data="datacollection"></line-chart>
+    <button @click="fillData()">Randomize</button>
+  </div>
+</template>
+
+<script>
+  import LineChart from './LineChart.js'
+
+  export default {
+    components: {
+      LineChart
+    },
+    data () {
+      return {
+        datacollection: null
+      }
+    },
+    mounted () {
+      this.fillData()
+    },
+    methods: {
+      fillData () {
+        this.datacollection = {
+          labels: [this.getRandomInt(), this.getRandomInt()],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }, {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      },
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      }
+    }
+  }
+</script>
+
+<style>
+  .small {
+    max-width: 600px;
+    margin:  150px auto;
+  }
+</style>
+```
+
+## Chart.js object
+
+Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
+
+## Available Charts
+
+### Bar Chart
+<p class="tip">
+  The bar chart has an **optional** third parameter, which is the type.
+  The default type is `bar` but you can pass `horizontalBar` if you want horizontal bars.
+
+  `renderChart (data, options, type) {}`
+
+</p>
+
+![Bar](assets/bar.png)
+### Line Chart
+
+![Line](assets/line.png)
+
+### Doughnut
+
+![Doughnut](assets/doughnut.png)
+
+### Pie
+
+![Pie](assets/pie.png)
+
+### Radar
+
+![Pie](assets/radar.png)
+
+### Polar Area
+
+![Pie](assets/polar.png)
+
+### Bubble
+
+![Bubble](assets/bubble.png)
+
+## Webpack & Bundling tools
+There are now two version the main entry point is `src/index.js` which is the ES6 source, unbundled.
+If you're using webpack it is recommended to use this one. Because the bundled umd version has vue.js and chart.js bundled into it.
+
+However if you have problems o you can import the dist file
+
+```
+import VueCharts from 'vue-chartjs/dist/vue-chartjs'
+// or
+import { Line } from 'vue-chartjs/dist/vue-chartjs'
+```
+
+Or you can set an alias.
+
+### Browserify
+
+In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
+
+```
+{
+"presets": ["es2015"]
+}
+```

docs/_landing.html

@@ -0,0 +1,78 @@
+<h1>📈 vue-chartjs</h1>
+
+<h2>⚡ Easy and beautiful charts with Chart.js and Vue.js</h2>
+
+<ul class="features">
+  <li>Easy for both beginners and pros 🙌</li>
+  <li>Simple to use, easy to extend 💪</li>
+  <li>With the full power of chart.js 💯</li>
+</ul>
+
+<div class="landing-buttons">
+  <a class="landing-button" target="_blank" href="https://github.com/apertureless/vue-chartjs">
+    GitHub
+  </button>
+
+  <a class="landing-button" router-link="/home">
+    Docs
+  </a>
+
+  <a class="landing-button" target="_blank" href="http://demo.vue-chartjs.org/">
+    Demo
+  </a>
+</div>
+
+<style>
+  h1 {
+    margin: 0;
+    margin-top: -50px;
+    font-weight: normal;
+    font-size: 40px;
+    letter-spacing: 1px;
+  }
+  h2 {
+    margin-top: 20px;
+    color: #999;
+    font-weight: normal;
+    letter-spacing: 1px;
+  }
+  .landing {
+    padding: 10px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    height: 100%;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .features {
+    margin-top: 20px;
+    margin-bottom: 60px;
+    font-size: 16px;
+    line-height: 1.7;
+  }
+  .landing-button {
+    border: 1px solid #ccc;
+    border-radius: 33px;
+    padding: 10px 30px;
+    background-color: white;
+    display: inline-block;
+    margin-right: 20px;
+    color: #333;
+  }
+  .landing-button:hover {
+    border-color: #42b983;
+    color: #42b983;
+    text-decoration: none;
+  }
+</style>

docs/assets/vue-chartjs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="100%" x2="0%" y1="4.18%" y2="65.116%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient><linearGradient id="b" x1="108.208%" x2="5.433%" y1="12.265%" y2="86.92%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient></defs><g fill="none"><path fill="#fff" stroke="#EBEBEB" stroke-width="8.456" d="M128.744 13l99.745 57.46v114.921l-99.745 57.46-99.744-57.46v-114.921z"/><path fill="url(#a)" d="M129 17.941l90.395 51.432-4.057 117.675-86.903 4.653z"/><path fill="url(#b)" d="M129 17.814l-90.961 51.559-3.191 113.538 93.587 8.79z"/><path fill="#41B883" d="M32.955 72.755l95.789 54.681v110.49l-95.789-54.681z"/><path fill="#35495E" d="M224.48 71.627l-95.789 55.809v110.49l95.789-54.681z"/><path fill="#596F85" d="M224.48 71.627l-95.789 55.809v-7.892l88.445-51.299z"/><path fill="#61D09F" d="M32.955 72.755l95.789 54.681v-7.892l-89.575-50.171z"/></g></svg>

docs/config.js

@@ -0,0 +1,12 @@
+self.$config = {
+  title: 'vue-chartjs docs',
+  plugins: [
+    evanyou()
+  ],
+  landing: true,
+  // or custom path
+  landing: '_landing.html',
+  repo: 'apertureless/vue-chartjs',
+  twitter: 'apertureless',
+  'edit-link': 'https://github.com/apertureless/vue-chartjs/blob/master/docs'
+}

docs/index.html

@@ -1,13 +1,31 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
   <meta charset="utf-8">
-    <title>📊 Vue-ChartJs</title>
-  </head>
-  <body>
-    <div id="app">
-      <app></app>
-    </div>
-    <script src="dist/vue-chartjs.js"></script>
-  </body>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+  <title>vue-chartjs doc</title>
+  <link rel="stylesheet" href="https://unpkg.com/docute@2/dist/docute.css">
+</head>
+<body>
+  <!-- don't remove this part start -->
+  <div id="app"></div>
+  <script src="https://unpkg.com/docute-evanyou"></script>
+  <script src="./config.js"></script>
+  <script src="https://unpkg.com/docute@2/dist/docute.js"></script>
+  <!-- don't remove this part end -->
+
+  <!-- Google Analytics -->
+  <script>
+  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+  ga('create', 'UA-92766713-1', 'auto');
+  ga('send', 'pageview');
+  docute.router.afterEach(function (to) {
+    ga('set', 'page', to.fullPath);
+    ga('send', 'pageview');
+  });
+  </script>
+  <script async src='https://www.google-analytics.com/analytics.js'></script>
+  <!-- End Google Analytics -->
+</body>
 </html>

package.json

@@ -1,12 +1,34 @@
 {
   "name": "vue-chartjs",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "vue.js wrapper for chart.js",
-  "author": "Jakub Juszczak <jakub@nextindex.de>",
+  "author": "Jakub Juszczak <jakub@posteo.de>",
+  "homepage": "http://vue-chartjs.org",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "Thorsten Lünborg",
+      "web": "https://github.com/LinusBorg"
+    },
+    {
+      "name": "Juan Carlos Alonso",
+      "web": "https://github.com/jcalonso"
+    }
+  ],
+  "maintainers": [
+    {
+      "name": "Jakub Juszczak",
+      "email": "jakub@posteo.de",
+      "web": "http://www.jakubjuszczak.de"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com:apertureless/vue-chartjs.git"
   },
+  "bugs": {
+    "url": "https://github.com/apertureless/vue-chartjs/issues"
+  },
   "keywords": [
     "ChartJs",
     "Vue",
@@ -14,7 +36,12 @@
     "Wrapper",
     "Charts"
   ],
-  "main": "dist/vue-chartjs.js",
+  "main": "src/index.js",
+  "unpkg": "dist/vue-chartjs.js",
+  "files": [
+    "src",
+    "dist"
+  ],
   "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
@@ -25,21 +52,21 @@
     "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js"
   },
   "dependencies": {
-    "babel-runtime": "^6.11.6",
     "chart.js": "^2.5.0",
-    "vue": "^2.1.10"
+    "vue": "^2.2.1"
   },
   "devDependencies": {
-    "babel-core": "^6.10.4",
-    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.12.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
+    "babel-runtime": "^6.23.0",
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
     "chai": "^3.5.0",
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
     "cross-spawn": "^5.0.1",
-    "css-loader": "^0.26.1",
+    "css-loader": "^0.26.2",
     "eslint": "^3.7.1",
     "eslint-config-standard": "^6.2.0",
     "eslint-friendly-formatter": "^2.0.5",
@@ -52,7 +79,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
     "function-bind": "^1.0.2",
-    "html-webpack-plugin": "^2.8.1",
+    "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.2",
     "inject-loader": "^3.0.0-beta2",
     "isparta-loader": "^2.0.0",
@@ -77,15 +104,28 @@
     "shelljs": "^0.7.4",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
-    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^2.0.6",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^10.0.2",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.1.10",
+    "url-loader": "^0.5.8",
+    "vue-hot-reload-api": "^2.0.11",
+    "vue-html-loader": "^1.2.4",
+    "vue-loader": "^11.1.3",
+    "vue-style-loader": "^2.0.3",
+    "vue-template-compiler": "^2.2.1",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
     "webpack-merge": "^1.1.1"
+  },
+  "engines": {
+    "node": ">=6.9.0"
+  },
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
   }
 }

src/examples/ReactivePropExample.js

@@ -1,8 +1,8 @@
 import BarChart from '../BaseCharts/Bar'
-import reactiveData from '../mixins/reactiveProp'
+import reactiveProp from '../mixins/reactiveProp'
 
 export default BarChart.extend({
-  mixins: [reactiveData],
+  mixins: [reactiveProp],
 
   mounted () {
     this.renderChart(this.chartData)

src/mixins/reactiveData.js

@@ -26,7 +26,7 @@ module.exports = {
           // Check if Labels are equal and if dataset length is equal
           if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
             newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i].data = dataset.data
+              chart.data.datasets[i] = dataset
             })
 
             chart.data.labels = newData.labels

src/mixins/reactiveProp.js

@@ -27,7 +27,7 @@ module.exports = {
           // Check if Labels are equal and if dataset length is equal
           if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
             newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i].data = dataset.data
+              chart.data.datasets[i] = dataset
             })
 
             chart.data.labels = newData.labels