💎 Release new version 2.2.0

Merge pull request #14 from wahaha2012/feature-horizontal-bar
add horizontal bar parameter
2025-10-29 18:00:20 +00:00 · 2016-10-24 11:33:36 +02:00 · 2016-10-23 19:20:17 +02:00 · 2016-10-22 21:17:21 +08:00 · 2016-10-15 13:37:58 +02:00 · 2016-10-15 13:00:24 +02:00
41 changed files with 461 additions and 5948 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,3 @@ npm-debug.log
 selenium-debug.log
 test/unit/coverage
 test/e2e/reports
-dist/
-es/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log

+## [v2.1.1](https://github.com/apertureless/vue-chartjs/tree/v2.1.1) (2016-10-02)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v.2.1.0...v2.1.1)
+
+## [v.2.1.0](https://github.com/apertureless/vue-chartjs/tree/v.2.1.0) (2016-09-23)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.1.3...v.2.1.0)
+
 ## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)

--- a/README.md
+++ b/README.md
@@ -4,9 +4,20 @@

 > VueJS wrapper for ChartJs

+### Compatibility
+
+- v1 later
+  - 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.
+If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
+
 ## Install

-Simply run `npm install vue-chartjs@1.1.3`
+Simply run `npm install vue-chartjs`

 ## How to use

@@ -25,10 +36,10 @@ Just create your own component.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'

-export default BarChart.extend({
-  ready () {
+export default Bar.extend({
+  mounted () {
    // Overwriting base render method with actual data.
-    this.render({
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
@@ -56,10 +67,10 @@ You can overwrite the default chart options. Just pass the options object as a s
 // MonthlyIncome.js
 import { Line } from 'vue-chartjs'

-export default LineChart.extend({
+export default Line.extend({
  props: [data, options],
-  ready () {
-    this.render(this.data, this.options)
+  mounted () {
+    this.renderChart(this.data, this.options)
  }
 })
 ```
@@ -81,6 +92,30 @@ export default {
 </script>
 ```

+## Reactivity
+
+Chart.js does not update or re-render the chart if new data is passed.
+However you can simply implement this by your own or use one of the two mixins which are included.
+
+- `reactiveProp`
+- `reactiveData`
+
+The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
+
+```javascript
+// MonthlyIncome.js
+import { Line, reactiveProp } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [reactiveProp]
+  props: [chartData, options],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
 ## Available Charts

 ### Bar Chart
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -16,6 +16,7 @@ module.exports = {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
+      'vue': 'vue/dist/vue.js',
      'src': path.resolve(__dirname, '../src'),
      'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
    }
--- a/codecov.yml
+++ b/codecov.yml
@@ -0,0 +1,34 @@
+codecov:
+  branch: master
+
+coverage:
+  precision: 2
+  round: down
+  range: "70...100"
+
+  status:
+    project:
+      default:
+        target: auto
+        threshold: null
+        branches: null
+
+    patch:
+      default:
+        target: auto
+        branches: null
+
+    changes:
+      default:
+        branches: null
+
+  ignore:
+    - "tests/*"
+    - "src/examples/*"
+    - "src/mixins/*"
+
+
+comment:
+  layout: "header, diff, changes, sunburst, uncovered, tree"
+  branches: null
+  behavior: default
--- a/dist/vue-chartjs.js
+++ b/dist/vue-chartjs.js
--- a/dist/vue-chartjs.js.map
+++ b/dist/vue-chartjs.js.map
--- a/index.html
+++ b/index.html
@@ -5,7 +5,9 @@
    <title>Vue-ChartJs</title>
  </head>
  <body>
+  <div id="app">
    <app></app>
+  </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-chartjs",
-  "version": "1.2.0",
+  "version": "2.2.0",
  "description": "Vue wrapper for chart.js",
  "author": "Jakub Juszczak <jakub@nextindex.de>",
  "repository": {
@@ -15,77 +15,76 @@
    "Charts"
  ],
  "main": "dist/vue-chartjs.js",
-  "files": [
-    "dist"
-  ],
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit",
-    "lint": "eslint --ext .js,.vue src test/unit/specs",
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "prepublish": "node build/build.js"
  },
  "dependencies": {
-    "babel-runtime": "^6.0.0",
-    "chart.js": "^2.6.0",
-    "vue": "^1.0.21"
+    "babel-runtime": "^6.11.6",
+    "chart.js": "^2.2.1",
+    "vue": "^2.0.1"
  },
  "devDependencies": {
-    "babel-core": "^6.0.0",
+    "babel-core": "^6.10.4",
    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "chai": "^3.5.0",
    "chromedriver": "^2.21.2",
    "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^2.1.5",
-    "css-loader": "^0.23.0",
-    "eslint": "^2.10.2",
-    "eslint-config-standard": "^5.1.0",
+    "cross-spawn": "^4.0.2",
+    "css-loader": "^0.25.0",
+    "eslint": "^3.7.1",
+    "eslint-config-standard": "^6.2.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^1.3.0",
-    "eslint-plugin-promise": "^1.0.8",
-    "eslint-plugin-standard": "^1.3.2",
+    "eslint-plugin-promise": "^2.0.1",
+    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.4",
+    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
-    "http-proxy-middleware": "^0.12.0",
+    "http-proxy-middleware": "^0.17.2",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
+    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
-    "karma": "^0.13.15",
-    "karma-coverage": "^0.5.5",
-    "karma-mocha": "^0.2.2",
+    "karma": "^1.3.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-mocha": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.24",
+    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.7.0",
-    "lodash": "^4.15.0",
+    "lodash": "^4.16.3",
    "lolex": "^1.4.0",
-    "mocha": "^2.4.5",
-    "nightwatch": "^0.8.18",
-    "ora": "^0.2.0",
-    "phantomjs-prebuilt": "^2.1.3",
-    "selenium-server": "2.53.0",
-    "shelljs": "^0.6.0",
+    "mocha": "^3.1.0",
+    "nightwatch": "^0.9.8",
+    "ora": "^0.3.0",
+    "phantomjs-prebuilt": "^2.1.13",
+    "selenium-server": "^2.53.1",
+    "shelljs": "^0.7.4",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^1.2.0",
-    "vue-html-loader": "^1.0.0",
-    "vue-loader": "^8.3.0",
+    "vue-hot-reload-api": "^2.0.6",
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^9.3.0",
    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.12.2",
+    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^0.8.3"
+    "webpack-merge": "^0.14.1"
  }
 }
--- a/src/BaseCharts/Bar.js
+++ b/src/BaseCharts/Bar.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -49,12 +49,12 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options, type) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
-          type: 'bar',
+        this.$refs.canvas.getContext('2d'), {
+          type: type || 'bar',
          data: data,
          options: chartOptions
        }
@@ -63,8 +63,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
+    this._chart.destroy()
  }
 })
--- a/src/BaseCharts/Bubble.js
+++ b/src/BaseCharts/Bubble.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -27,16 +27,33 @@ export default Vue.extend({
  data () {
    return {
      defaultOptions: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            },
+            gridLines: {
+              display: false
+            }
+          }],
+          xAxes: [ {
+            gridLines: {
+              display: false
+            },
+            categoryPercentage: 0.5,
+            barPercentage: 0.2
+          }]
+        }
      }
    }
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'bubble',
          data: data,
          options: chartOptions
@@ -46,8 +63,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
+    this._chart.destroy()
  }
 })
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'doughnut',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
+    this._chart.destroy()
  }
 })
--- a/src/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -47,11 +47,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'line',
          data: data,
          options: chartOptions
@@ -61,8 +61,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
+    this._chart.destroy()
  }
 })
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'pie',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
+    this._chart.destroy()
  }
 })
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'polarArea',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
+    this._chart.destroy()
  }
 })
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'radar',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
+    this._chart.destroy()
  }
 })
--- a/src/BaseCharts/Scatter.js
+++ b/src/BaseCharts/Scatter.js
@@ -1,59 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  template: `
-    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
-    </div>
-  `,
-
-  props: {
-    chartId: {
-      default: 'scatter-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-        scales: {
-          xAxes: [{
-            type: 'linear',
-            position: 'bottom'
-          }]
-        }
-      }
-    }
-  },
-
-  methods: {
-    render (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
-          type: 'scatter',
-          data: data,
-          options: chartOptions
-        }
-      )
-      this._chart.generateLegend()
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="container">
    <bar-example></bar-example>
+    <reactive-example></reactive-example>
    <line-example></line-example>
    <doughnut-example></doughnut-example>
    <pie-example></pie-example>
@@ -18,6 +19,8 @@
  import RadarExample from './RadarExample'
  import PolarAreaExample from './PolarAreaExample'
  import BubbleExample from './BubbleExample'
+  import ReactiveExample from './ReactiveExample'
+  import ReactivePropExample from './ReactivePropExample'

  export default {
    components: {
@@ -27,7 +30,9 @@
      PieExample,
      RadarExample,
      PolarAreaExample,
-      BubbleExample
+      BubbleExample,
+      ReactiveExample,
+      ReactivePropExample
    }
  }
 </script>
--- a/src/examples/BarExample.js
+++ b/src/examples/BarExample.js
@@ -1,8 +1,8 @@
 import BarChart from '../BaseCharts/Bar'

 export default BarChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
--- a/src/examples/BubbleExample.js
+++ b/src/examples/BubbleExample.js
@@ -1,8 +1,8 @@
 import BubbleChart from '../BaseCharts/Bubble'

 export default BubbleChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      datasets: [
        {
          label: 'Data One',
--- a/src/examples/DoughnutExample.js
+++ b/src/examples/DoughnutExample.js
@@ -1,8 +1,8 @@
 import DoughnutChart from '../BaseCharts/Doughnut'

 export default DoughnutChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
--- a/src/examples/LineExample.js
+++ b/src/examples/LineExample.js
@@ -1,8 +1,8 @@
 import LineChart from '../BaseCharts/Line'

 export default LineChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
--- a/src/examples/PieExample.js
+++ b/src/examples/PieExample.js
@@ -1,8 +1,8 @@
 import PieChart from '../BaseCharts/Pie'

 export default PieChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
--- a/src/examples/PolarAreaExample.js
+++ b/src/examples/PolarAreaExample.js
@@ -1,8 +1,8 @@
 import PolarAreaChart from '../BaseCharts/PolarArea'

 export default PolarAreaChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
--- a/src/examples/RadarExample.js
+++ b/src/examples/RadarExample.js
@@ -1,8 +1,8 @@
 import RadarChart from '../BaseCharts/Radar'

 export default RadarChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
--- a/src/examples/ReactiveExample.js
+++ b/src/examples/ReactiveExample.js
@@ -0,0 +1,41 @@
+import BarChart from '../BaseCharts/Bar'
+import reactiveData from '../mixins/reactiveData'
+
+export default BarChart.extend({
+  mixins: [reactiveData],
+  data () {
+    return {
+      chartData: ''
+    }
+  },
+  created () {
+    this.fillData()
+  },
+
+  mounted () {
+    this.renderChart(this.chartData)
+
+    setInterval(() => {
+      this.fillData()
+    }, 5000)
+  },
+
+  methods: {
+    fillData () {
+      this.chartData = {
+        labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
+          }
+        ]
+      }
+    },
+
+    getRandomInt () {
+      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+    }
+  }
+})
--- a/src/examples/ReactivePropExample.js
+++ b/src/examples/ReactivePropExample.js
@@ -0,0 +1,10 @@
+import BarChart from '../BaseCharts/Bar'
+import reactiveData from '../mixins/reactiveProp'
+
+export default BarChart.extend({
+  mixins: [reactiveData],
+
+  mounted () {
+    this.renderChart(this.chartData)
+  }
+})
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,8 @@ 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 reactiveProp from './mixins/reactiveProp'
+import reactiveData from './mixins/reactiveData'

 const VueCharts = {
  Bar,
@@ -15,7 +16,8 @@ const VueCharts = {
  PolarArea,
  Radar,
  Bubble,
-  Scatter
+  reactiveProp,
+  reactiveData
 }

 module.exports = VueCharts
--- a/src/mixins/reactiveData.js
+++ b/src/mixins/reactiveData.js
@@ -0,0 +1,44 @@
+module.exports = {
+  data () {
+    return {
+      chartData: null
+    }
+  },
+  watch: {
+    'chartData': {
+      handler (newData, oldData) {
+        if (oldData) {
+          let chart = this._chart
+
+          let newDataLabels = newData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          let oldDataLabels = oldData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
+            this.forceUpdate(newData, chart)
+          } else {
+            this.forceRender()
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    forceUpdate (newData, chart) {
+      newData.datasets.forEach((dataset, i) => {
+        chart.data.datasets[i].data = dataset.data
+      })
+
+      chart.data.labels = newData.labels
+      chart.update()
+    },
+
+    forceRender () {
+      this.renderChart(this.chartData, this.options)
+    }
+  }
+}
--- a/src/mixins/reactiveProp.js
+++ b/src/mixins/reactiveProp.js
@@ -0,0 +1,35 @@
+module.exports = {
+  props: {
+    chartData: {
+      required: true
+    }
+  },
+
+  watch: {
+    'chartData': {
+      handler (newData, oldData) {
+        if (oldData) {
+          let chart = this._chart
+
+          let newDataLabels = newData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          let oldDataLabels = oldData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
+            newData.datasets.forEach((dataset, i) => {
+              chart.data.datasets[i].data = dataset.data
+            })
+            chart.data.labels = newData.labels
+            chart.update()
+          } else {
+            this.renderChart(this.chartData, this.options)
+          }
+        }
+      }
+    }
+  }
+}
--- a/test/unit/.eslintrc
+++ b/test/unit/.eslintrc
@@ -4,6 +4,7 @@
  },
  "globals": {
    "expect": true,
+    "jasmine": true,
    "sinon": true
  }
 }
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -54,7 +54,7 @@ module.exports = function (config) {
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['PhantomJS'],
-    frameworks: ['mocha', 'sinon-chai'],
+    frameworks: ['mocha', 'sinon-chai', 'jasmine'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
--- a/test/unit/specs/Bar.spec.js
+++ b/test/unit/specs/Bar.spec.js
@@ -2,16 +2,30 @@ import Vue from 'vue'
 import BarChart from 'src/examples/BarExample'

 describe('BarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
  it('should render a canvas', () => {
    const vm = new Vue({
-      el: 'body',
-      replace: false,
      template: '<bar-chart></bar-chart>',
      components: { BarChart }
-    })
+    }).$mount(el)
+
    expect(vm.$el.querySelector('#bar-chart')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
    expect(vm.$el.querySelector('canvas')).to.exist
  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<bar-chart chartId="barchartprop"></bar-chart>',
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
+  })
 })
--- a/test/unit/specs/Bubble.spec.js
+++ b/test/unit/specs/Bubble.spec.js
@@ -2,16 +2,30 @@ import Vue from 'vue'
 import BubbleChart from 'src/examples/BubbleExample'

 describe('BubbleChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
  it('should render a canvas', () => {
    const vm = new Vue({
-      el: 'body',
-      replace: false,
      template: '<bubble-chart></bubble-chart>',
      components: { BubbleChart }
-    })
+    }).$mount(el)
+
    expect(vm.$el.querySelector('#bubble-chart')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
    expect(vm.$el.querySelector('canvas')).to.exist
  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<bubble-chart chartId="bubblechartprop"></bubble-chart>',
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
+  })
 })
--- a/test/unit/specs/Doughnut.spec.js
+++ b/test/unit/specs/Doughnut.spec.js
@@ -2,16 +2,30 @@ import Vue from 'vue'
 import DoughnutChart from 'src/examples/DoughnutExample'

 describe('DoughnutChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
  it('should render a canvas', () => {
    const vm = new Vue({
-      el: 'body',
-      replace: false,
      template: '<doughnut-chart></doughnut-chart>',
      components: { DoughnutChart }
-    })
+    }).$mount(el)
+
    expect(vm.$el.querySelector('#doughnut-chart')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
    expect(vm.$el.querySelector('canvas')).to.exist
  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<doughnut-chart chartId="doughnutchartprop"></doughnut-chart>',
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
+  })
 })
--- a/test/unit/specs/Line.spec.js
+++ b/test/unit/specs/Line.spec.js
@@ -2,16 +2,30 @@ import Vue from 'vue'
 import LineChart from 'src/examples/LineExample'

 describe('LineChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
  it('should render a canvas', () => {
    const vm = new Vue({
-      el: 'body',
-      replace: false,
      template: '<line-chart></line-chart>',
      components: { LineChart }
-    })
+    }).$mount(el)
+
    expect(vm.$el.querySelector('#line-chart')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
    expect(vm.$el.querySelector('canvas')).to.exist
  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<line-chart chartId="linechartprop"></line-chart>',
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
+  })
 })
--- a/test/unit/specs/Pie.spec.js
+++ b/test/unit/specs/Pie.spec.js
@@ -2,16 +2,30 @@ import Vue from 'vue'
 import PieChart from 'src/examples/PieExample'

 describe('PieChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
  it('should render a canvas', () => {
    const vm = new Vue({
-      el: 'body',
-      replace: false,
      template: '<pie-chart></pie-chart>',
      components: { PieChart }
-    })
+    }).$mount(el)
+
    expect(vm.$el.querySelector('#pie-chart')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
    expect(vm.$el.querySelector('canvas')).to.exist
  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<pie-chart chartId="piechartprop"></pie-chart>',
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
+  })
 })
--- a/test/unit/specs/PolarArea.spec.js
+++ b/test/unit/specs/PolarArea.spec.js
@@ -2,16 +2,30 @@ import Vue from 'vue'
 import PolarChart from 'src/examples/PolarAreaExample'

 describe('PolarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
  it('should render a canvas', () => {
    const vm = new Vue({
-      el: 'body',
-      replace: false,
      template: '<polar-chart></polar-chart>',
      components: { PolarChart }
-    })
+    }).$mount(el)
+
    expect(vm.$el.querySelector('#polar-chart')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
    expect(vm.$el.querySelector('canvas')).to.exist
  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<polar-chart chartId="polarchartprop"></polar-chart>',
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
+  })
 })
--- a/test/unit/specs/Radar.spec.js
+++ b/test/unit/specs/Radar.spec.js
@@ -2,16 +2,30 @@ import Vue from 'vue'
 import RadarChart from 'src/examples/RadarExample'

 describe('RadarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
  it('should render a canvas', () => {
    const vm = new Vue({
-      el: 'body',
-      replace: false,
      template: '<radar-chart></radar-chart>',
      components: { RadarChart }
-    })
+    }).$mount(el)
+
    expect(vm.$el.querySelector('#radar-chart')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
    expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
    expect(vm.$el.querySelector('canvas')).to.exist
  })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<radar-chart chartId="rodarchartprop"></radar-chart>',
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
+  })
 })
--- a/test/unit/specs/mixins/reactiveData.js
+++ b/test/unit/specs/mixins/reactiveData.js
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Jakub Juszczak	720d75b56b	💎 Release new version 2.2.0	2016-10-24 11:33:36 +02:00
Jakub	75925f0d5c	Merge pull request #14 from wahaha2012/feature-horizontal-bar add horizontal bar parameter	2016-10-23 19:20:17 +02:00
wxwdesign	ddb47ff63a	add horizontal bar parameter	2016-10-22 21:17:21 +08:00
Jakub	2df29e1cf1	Merge pull request #11 from apertureless/feature/reactive_chart_data WIP Feature/reactive chart data #11	2016-10-15 13:37:58 +02:00
Jakub Juszczak	6f77de832e	🐛 Fix missing export	2016-10-15 13:00:24 +02:00
Jakub Juszczak	f94b320dfa	✨ Change reactiveDataMixin	2016-10-15 12:58:51 +02:00
Jakub Juszczak	4ec6fa4cae	✨ Add codecov yml	2016-10-09 17:17:06 +02:00
Jakub Juszczak	ecdb98c4c8	🐛 Fix paths	2016-10-02 18:30:48 +02:00
Jakub Juszczak	c21cf2f3ac	✨ Add export for mixins	2016-10-02 18:26:38 +02:00
Jakub Juszczak	ef9fbe472a	📝 Update README with reactive Data and props example	2016-10-02 18:26:06 +02:00
Jakub Juszczak	06c3148897	⬆️ Update examples	2016-10-02 18:25:02 +02:00
Jakub Juszczak	e716482154	✨ Add reactiveProperty mixin	2016-10-02 18:10:44 +02:00
Jakub Juszczak	59cc74a00d	✨ Add reactiveData Example	2016-10-02 10:34:06 +02:00
Jakub Juszczak	a7194b990f	✨ Add reactive Data example	2016-10-02 10:32:30 +02:00
Jakub Juszczak	45e543b636	✨ Add reactiveData mixin	2016-10-02 10:31:14 +02:00
Jakub Juszczak	ae93b96b9c	⬆️ Update dependencies	2016-10-02 09:40:12 +02:00
Jakub Juszczak	b3faeb4f2b	📝 Update Changelog	2016-10-02 09:34:45 +02:00
Jakub Juszczak	42f552a1f2	📝 Update README	2016-10-02 09:29:28 +02:00
Jakub Juszczak	b847becdc7	💎 Release new version 2.1.1	2016-10-02 09:26:08 +02:00
Jakub Juszczak	64e0a60dbf	⬆️ Update Readme	2016-10-02 09:19:05 +02:00
Jakub Juszczak	1be5149bde	Merge branch 'next' into develop * next: 📝 Update CHANGELOG 💎 Release new version 2.1.0 ✨ Add travis config 🐛 Fix tests ✨ Add chartId as prop and fix width and height props ✨ Add bubble-chart example ✅ Add tests ✨ Add chart type Bubble Move examples into src for better testing 📝 Update README 💎 Release new version 2.0.0-alpha Add vue 2.0 build files 📝 Update README ⬆️ Update dependency chartjs to 2.2.1 Update examples ⬆️ Update dependency vue 2.0 Change deprecated v-el to ref Change render() method name to renderChart # Conflicts: # CHANGELOG.md # dist/vue-chartjs.js # dist/vue-chartjs.js.map # package.json # src/BaseCharts/Bar.js # src/BaseCharts/Bubble.js # src/BaseCharts/Doughnut.js # src/BaseCharts/Line.js # src/BaseCharts/Pie.js # src/BaseCharts/PolarArea.js # src/BaseCharts/Radar.js # src/examples/App.vue # src/examples/BubbleExample.js # test/unit/specs/Bar.spec.js # test/unit/specs/Bubble.spec.js # test/unit/specs/Doughnut.spec.js # test/unit/specs/Line.spec.js # test/unit/specs/Pie.spec.js # test/unit/specs/PolarArea.spec.js # test/unit/specs/Radar.spec.js	2016-10-02 09:16:45 +02:00
Jakub Juszczak	7d256e6492	📝 Update CHANGELOG Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 15:14:56 +02:00
Jakub Juszczak	0a04114eb0	💎 Release new version 2.1.0 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 15:03:59 +02:00
Jakub Juszczak	b14b107890	✨ Add travis config Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 14:55:16 +02:00
Jakub Juszczak	13ff782ec8	🐛 Fix tests Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 14:52:37 +02:00
Jakub Juszczak	975a804570	✨ Add chartId as prop and fix width and height props Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 13:29:03 +02:00
Jakub Juszczak	3c252ce904	✨ Add bubble-chart example Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 13:28:38 +02:00
Jakub Juszczak	74cedd4ec4	✅ Add tests	2016-09-23 12:59:17 +02:00
Jakub Juszczak	d6c3f50ba8	✨ Add chart type Bubble	2016-09-23 12:59:00 +02:00
Jakub Juszczak	d7003306d1	Move examples into src for better testing	2016-09-23 12:49:09 +02:00
Jakub Juszczak	c0e93cd824	📝 Update README	2016-08-23 21:11:24 +02:00
Jakub Juszczak	5d34181e8e	💎 Release new version 2.0.0-alpha	2016-08-23 20:43:36 +02:00
Jakub Juszczak	1323791c52	Add vue 2.0 build files	2016-08-23 20:34:41 +02:00
Jakub Juszczak	5248534991	📝 Update README Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:32:47 +02:00
Jakub Juszczak	d3cb01b76c	⬆️ Update dependency chartjs to 2.2.1 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:31:19 +02:00
Jakub Juszczak	b374370706	Update examples Change deprecated ready() method to mounted() Change render() method to renderChart() method Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:28:24 +02:00
Jakub Juszczak	60627650a3	⬆️ Update dependency vue 2.0 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:26:32 +02:00
Jakub Juszczak	92982ef2ac	Change deprecated v-el to ref Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:06:50 +02:00
Jakub Juszczak	012b9a82bf	Change render() method name to renderChart This way it does not conflict with the vue 2.0 render function. Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:01:38 +02:00