💎 Release new version 1.2.0

✨ Add scatter chart
✨ Add dist files to ignire
2025-10-29 18:00:20 +00:00 · 2017-07-25 12:56:13 +02:00 · 2017-07-25 12:53:17 +02:00 · 2017-07-25 12:52:12 +02:00 · 2017-07-25 12:49:06 +02:00 · 2017-07-22 19:25:48 +02:00
33 changed files with 5934 additions and 236 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ npm-debug.log
 selenium-debug.log
 test/unit/coverage
 test/e2e/reports
+dist/
+es/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,5 @@
 # Change Log

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

@@ -52,4 +47,4 @@
 ## [1.0.2](https://github.com/apertureless/vue-chartjs/tree/1.0.2) (2016-07-27)


-\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
--- a/README.md
+++ b/README.md
@@ -4,18 +4,9 @@

 > VueJS wrapper for ChartJs

-### Compatibility
-
- v1 later
-- Vue.js 1.x
- v2 later
-- Vue.js 2.x
-
-If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
-
 ## Install

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

 ## How to use

@@ -35,9 +26,9 @@ Just create your own component.
 import { Bar } from 'vue-chartjs'

 export default BarChart.extend({
-  mounted () {
+  ready () {
    // Overwriting base render method with actual data.
-    this.renderChart({
+    this.render({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
@@ -67,8 +58,8 @@ import { Line } from 'vue-chartjs'

 export default LineChart.extend({
  props: [data, options],
-  mounted () {
-    this.renderChart(this.data, this.options)
+  ready () {
+    this.render(this.data, this.options)
  }
 })
 ```
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -16,7 +16,6 @@ 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/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,9 +5,7 @@
    <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": "2.1.1",
+  "version": "1.2.0",
  "description": "Vue wrapper for chart.js",
  "author": "Jakub Juszczak <jakub@nextindex.de>",
  "repository": {
@@ -15,24 +15,27 @@
    "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 test/e2e/specs",
+    "lint": "eslint --ext .js,.vue src test/unit/specs",
    "prepublish": "node build/build.js"
  },
  "dependencies": {
-    "babel-runtime": "^6.11.6",
-    "chart.js": "^2.2.1",
-    "vue": "^2.0.0-rc.1"
+    "babel-runtime": "^6.0.0",
+    "chart.js": "^2.6.0",
+    "vue": "^1.0.21"
  },
  "devDependencies": {
-    "babel-core": "^6.10.4",
+    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.12.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "chai": "^3.5.0",
@@ -76,11 +79,11 @@
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^2.0.6",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^9.3.0",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^8.3.0",
    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.13.2",
+    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
--- 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" ref="canvas"></canvas>
+      <canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
    </div>
  `,

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

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

      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
          type: 'bar',
          data: data,
          options: chartOptions
@@ -63,6 +63,8 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      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" ref="canvas"></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
    </div>
  `,

@@ -27,33 +27,16 @@ 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: {
-    renderChart (data, options) {
+    render (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
          type: 'bubble',
          data: data,
          options: chartOptions
@@ -63,6 +46,8 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      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" ref="canvas"></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
    </div>
  `,

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

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

      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
          type: 'doughnut',
          data: data,
          options: chartOptions
@@ -46,6 +46,8 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      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" ref="canvas"></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
    </div>
  `,

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

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

      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
          type: 'line',
          data: data,
          options: chartOptions
@@ -61,6 +61,8 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      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" ref="canvas"></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
    </div>
  `,

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

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

      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
          type: 'pie',
          data: data,
          options: chartOptions
@@ -46,6 +46,8 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      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" ref="canvas"></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
    </div>
  `,

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

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

      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
          type: 'polarArea',
          data: data,
          options: chartOptions
@@ -46,6 +46,8 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      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" ref="canvas"></canvas>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
    </div>
  `,

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

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

      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
          type: 'radar',
          data: data,
          options: chartOptions
@@ -46,6 +46,8 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
  }
 })
--- a/src/BaseCharts/Scatter.js
+++ b/src/BaseCharts/Scatter.js
@@ -0,0 +1,59 @@
+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
@@ -20,7 +20,15 @@
  import BubbleExample from './BubbleExample'

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

--- a/src/examples/BarExample.js
+++ b/src/examples/BarExample.js
@@ -1,8 +1,8 @@
 import BarChart from '../BaseCharts/Bar'

 export default BarChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
      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({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
      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({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
      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({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
      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({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
      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({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
      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({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ 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'

 const VueCharts = {
  Bar,
@@ -13,7 +14,8 @@ const VueCharts = {
  Pie,
  PolarArea,
  Radar,
-  Bubble
+  Bubble,
+  Scatter
 }

 module.exports = VueCharts
--- a/test/unit/specs/Bar.spec.js
+++ b/test/unit/specs/Bar.spec.js
@@ -2,30 +2,16 @@ 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,30 +2,16 @@ 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,30 +2,16 @@ 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,30 +2,16 @@ 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,30 +2,16 @@ 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,30 +2,16 @@ 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,30 +2,16 @@ 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/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Jakub Juszczak	4f5aa1811d	💎 Release new version 1.2.0	2017-07-25 12:56:13 +02:00
Jakub Juszczak	098c90edf1	✨ Add scatter chart	2017-07-25 12:53:17 +02:00
Jakub Juszczak	3f15eb9abc	✨ Add dist files to ignire	2017-07-25 12:52:12 +02:00
Jakub Juszczak	68e94b7fe3	Merge branch 'release/1.x' into pr/152 * release/1.x: ⬆️ Update dependency chart.js to 2.6.0 🐛 Fix dependency 💎 Release new version 1.1.4 # Conflicts: # dist/vue-chartjs.js # dist/vue-chartjs.js.map	2017-07-25 12:49:06 +02:00
Denis Lapi	0d24270bf2	Delete vue-chartjs.js	2017-07-22 19:25:48 +02:00
Denis Lapi	e034467e5b	Delete vue-chartjs.js.map	2017-07-22 19:25:39 +02:00
Jakub Juszczak	c7cb8e24e9	⬆️ Update dependency chart.js to 2.6.0	2017-07-22 17:28:36 +02:00
DenisLapi	4c9f4fc5e5	#149 - Fix error on beforeDestroy - VueJS v1	2017-07-22 10:01:29 +02:00
Jakub Juszczak	a25d327b13	🐛 Fix dependency	2017-02-23 08:46:21 +01:00
Jakub Juszczak	f57e555d94	💎 Release new version 1.1.4 Updated chart.js dependency	2017-02-22 13:01:59 +01:00
Jakub Juszczak	88d2771175	📝 Update README	2016-10-02 09:19:41 +02:00