💎 Release new version 2.6.5

vue@2.3.4
chart.js@2.6.0

CHANGELOG.md

@@ -1,5 +1,46 @@
 # Change Log
 
+## [v2.6.4](https://github.com/apertureless/vue-chartjs/tree/v2.6.4) (2017-06-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.3...v2.6.4)
+
+**Closed issues:**
+
+- Transition leave-active-class not working [\#117](https://github.com/apertureless/vue-chartjs/issues/117)
+- chartOptions reactivity [\#116](https://github.com/apertureless/vue-chartjs/issues/116)
+- Cannot switch off legend [\#114](https://github.com/apertureless/vue-chartjs/issues/114)
+- run error on my mac pro [\#113](https://github.com/apertureless/vue-chartjs/issues/113)
+- Update install instructions in docs [\#112](https://github.com/apertureless/vue-chartjs/issues/112)
+- Typo in docs [\#111](https://github.com/apertureless/vue-chartjs/issues/111)
+- Charts are given a fixed width, even when they are set to be responsive [\#108](https://github.com/apertureless/vue-chartjs/issues/108)
+- Use Reactive Data with \<script\> version of vue-chartjs [\#107](https://github.com/apertureless/vue-chartjs/issues/107)
+
+**Merged pull requests:**
+
+- Fix typo in docs [\#115](https://github.com/apertureless/vue-chartjs/pull/115) ([euledge](https://github.com/euledge))
+- :memo: Add pt-br readme support [\#110](https://github.com/apertureless/vue-chartjs/pull/110) ([kimuraz](https://github.com/kimuraz))
+- Fix reactive mixins animation re-rendering issue. [\#109](https://github.com/apertureless/vue-chartjs/pull/109) ([MuseofMoose](https://github.com/MuseofMoose))
+
+## [v2.6.3](https://github.com/apertureless/vue-chartjs/tree/v2.6.3) (2017-05-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.2...v2.6.3)
+
+**Closed issues:**
+
+- Reactivity of Options [\#106](https://github.com/apertureless/vue-chartjs/issues/106)
+- Do not use built-in or reserved HTML elements as component id: MenuItem [\#104](https://github.com/apertureless/vue-chartjs/issues/104)
+- Is it possible to use with axios? [\#103](https://github.com/apertureless/vue-chartjs/issues/103)
+- How to change momentjs locale for time scale? [\#101](https://github.com/apertureless/vue-chartjs/issues/101)
+- It seems that the reactiveProp couldn't let the chart update itself [\#99](https://github.com/apertureless/vue-chartjs/issues/99)
+- Why do I need both vue-chartjs chart.js? [\#98](https://github.com/apertureless/vue-chartjs/issues/98)
+- vue-chartjs not working with lodash-webpack-plugin installed [\#97](https://github.com/apertureless/vue-chartjs/issues/97)
+- multi lines with same options [\#95](https://github.com/apertureless/vue-chartjs/issues/95)
+- Zoom And Pan Options in Vue Charts [\#94](https://github.com/apertureless/vue-chartjs/issues/94)
+
+**Merged pull requests:**
+
+- Update README.md [\#105](https://github.com/apertureless/vue-chartjs/pull/105) ([guilherfp](https://github.com/guilherfp))
+- translated README.md into Japanese [\#102](https://github.com/apertureless/vue-chartjs/pull/102) ([euledge](https://github.com/euledge))
+- add CDNJS version badge in README.md [\#100](https://github.com/apertureless/vue-chartjs/pull/100) ([extend1994](https://github.com/extend1994))
+
 ## [v2.6.2](https://github.com/apertureless/vue-chartjs/tree/v2.6.2) (2017-04-29)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.1...v2.6.2)
 
@@ -80,7 +121,7 @@
 
 **Merged pull requests:**
 
-- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/integration/greenkeeper))
+- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/apps/greenkeeper))
 
 ## [v2.5.3](https://github.com/apertureless/vue-chartjs/tree/v2.5.3) (2017-03-17)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.2...v2.5.3)

README.md

@@ -122,7 +122,7 @@ You can overwrite the default chart options. Just pass the options object as a s
 import { Line } from 'vue-chartjs'
 
 export default Line.extend({
-  props: ["data", "options"],
+  props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
@@ -165,7 +165,7 @@ import { Line, mixins } from 'vue-chartjs'
 
 export default Line.extend({
   mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
@@ -183,7 +183,7 @@ import VueCharts from 'vue-chartjs'
 
 export default VueCharts.Line.extend({
   mixins: [VueCharts.mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
@@ -196,7 +196,7 @@ import { Line, mixins } from 'vue-chartjs'
 
 export default Line.extend({
   mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
@@ -210,7 +210,7 @@ const { reactiveProp } = mixins
 
 export default Line.extend({
   mixins: [reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }

docs/README.md

@@ -13,7 +13,7 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
 ## Installation
 If you are working with Vue.js 2+ simple run:
 
-`yarn add vue-chartjs`
+`yarn add vue-chartjs chart.js`
 
 If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
 
@@ -112,7 +112,7 @@ If you want to overwrite the width and height:
 ```
 
 <p class="warning">
-  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
+  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
@@ -312,7 +312,7 @@ You can use `vue-chartjs` directly in the browser without any build setup. Like
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+However Vue.js and Chart.js are `peerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and 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`

docs/config.js

@@ -1,7 +1,8 @@
 const langs = [
   {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
   {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
-  {title: '日本語', path: '/ja/', matchPath: /^\/ja/}
+  {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
+  {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}
 ]
 
 docute.init({
@@ -36,7 +37,7 @@ docute.init({
       apiKey: 'b3544f7387612693644777553675d56a',
       indexName: 'vue-chartjs',
       // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de'],
+      tags: ['en', 'de', 'ja', 'pt-br'],
       // this plugin does require a url too
       // where docsearch fetches contents
       url: 'https://vue-chartjs.org'

docs/de/README.md

@@ -13,7 +13,7 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
 ## Installation
 If you are working with Vue.js 2+ simple run:
 
-`yarn add vue-chartjs`
+`yarn add vue-chartjs chart.js`
 
 If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
 

docs/ja/README.md

@@ -13,7 +13,7 @@ chart.jsの基本ロジックを抽象化していますが、公開されたcha
 ## インストール
 Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:
 
-`yarn add vue-chartjs`
+`yarn add vue-chartjs chart.js`
 
 Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。
 
@@ -315,4 +315,4 @@ Gulp、BrowserifyまたはWebpackのバージョン1を使用している場合
 Vue.jsとChart.jsは `peerDependencies` なので別にインストールする必要があります。ほとんどのプロジェクトでは、Vue.jsはすでにインストールされているでしょう。この方法では、このパッケージと異なるバージョンのVue.jsとChart.jsを持つことができます。
 
 ### Webpack 2
-Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
+Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。

docs/pt-br/README.md

@@ -0,0 +1,284 @@
+<div align="center">
+  <img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
+</div>
+
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
+[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
+[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
+[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
+[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
+[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
+[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
+
+# vue-chartjs
+
+**vue-chartjs** é um wrapper para o [Chart.js](https://github.com/chartjs/Chart.js) no vue. Você pode criar gráficos reutilizáveis facilmente.
+
+## Demo & Docs
+
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)
+
+### Compatibilidade
+
+- v1 later `@legacy`
+  - Vue.js 1.x
+- v2 later
+  - Vue.js 2.x
+
+Após a release final do vue.js 2, você também instala por padrão o vue-chartjs v2 pelo npm.
+Não é mas necessária a tag @next. Se você quiser a versão v1, você precisa definir a versão ou usar uma tag legada.
+Se está procurando pela versão v1, dê uma olhada nessa [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
+
+## Instalação
+
+Simplemente execute `yarn add vue-chartjs chart.js`
+
+Ou se quiser utilizar diretamente no browser, adicione
+
+```html
+<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
+```
+em seus scripts. Veja [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+
+## Explicação das diferentes builds
+
+Existem três diferentes pontos de entrada (entry points). Isso depende da configuração de build que você possui. As dependências são empacotadas (bundled) ou requisitadas como peerDependency.
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### Browser
+Você pode usar o `vue-chartjs` diretamente no seu browser sem qualquer configuração de build. Como em [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Nesse caso, use `vue-chartjs.full.min.js` que é a versão minificada. Esse arquivo contém o Vue.js e o Chart.js inseridos nele. E são  And empacotados (bundled) em um módulo UMD. Então você precisa somente desse arquivo.
+
+
+### Browserify / Webpack 1
+
+Se você estiver usando Gulb, Browserify ou Webpack 1 a opção é `vue-chartjs.js`, que é __transpiled__ e __bundled__ no modelo UMD.
+
+Porém, Vue.js e Chart.js são `peerDependencies`, então você precisa instalá-los seperadamente. Na maioria dos projetos você terá o `Vue.js` instalado de qualquer maneira. Dessa forma, você pode ter diferentes versões do Vue.js e do Chart.j nesse pacote.
+
+
+### Webpack 2
+Se você está usando o Webpack 2, ele automaticamente usará a opção `jsnext:main` / `module`. Que é `es/index.js`, uma versão do código do es __transpiled__. Não é __bundled__ em módulo algum. Dessa forma, seu [tree shaking](https://webpack.js.org/guides/tree-shaking/) funcionará. Como na versão bundled, o `Vue.js` e o `Chart.js` são `peerDependencies` e precisam ser instalados.
+
+## Como usar
+
+Você precisa importar a classe de gráficos básica e extendê-la. Isso garante muito mais flexibilidade quando se está trabalhando com dados diferentes. Você pode passar dados via props ou vue-resource.
+
+Você pode importar todo o pacote ou cada módulo individualmente.
+
+```javascript
+import VueCharts from 'vue-chartjs'
+import { Bar, Line } from 'vue-chartjs'
+```
+
+Apenas crie seu próprio componente.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    })
+  }
+})
+```
+
+Então, simplesmente importe e use seu próprio componente extendido como um componente vue.
+
+```javascript
+import CommitChart from 'path/to/component/CommitChart'
+```
+
+## Another Example with options
+
+Você pode sobreescrever as options (opções) padrão do gráfico. Basta passar o objeto options como segundo parâmetro do método de renderização.
+
+```javascript
+// MonthlyIncome.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ["data", "options"],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+Use isso no seu componente vue
+
+```javascript
+import MonthlyIncome from 'path/to/component/MonthlyIncome'
+
+<template>
+  <monthly-income :data={....} />
+</template>
+
+<script>
+export default {
+  components: { MonthlyIncome },
+  ....
+}
+</script>
+```
+
+## Reactivity (Reatividade)
+
+O Chart.js não atualiza nem re-renderiza o gráfico se novos dados são passados.
+Porém, você pode implementar isso por si só ou usar um dos dois mixins inclusos.
+
+- `reactiveProp`
+- `reactiveData`
+
+Ambos estão incluídos no módulo de `mixins`.
+
+Os mixins criam automaticamente o `chartData` como um prop ou como um data. E adiciona um watcher. Se os dados mudarem, o gráfico será atualizado. Mas matenha em mente as limitações do vue e do javascript para as mutations(mutações) em vetores e objetos. Mais informações [aqui](http://vue-chartjs.org/#/home?id=reactive-data)
+
+
+```javascript
+// MonthlyIncome.js
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
+### Módulo de Mixins
+O módulo de `mixins` está incluído no módulo do  `VueCharts` e como módulo separado.
+Algumas maneiras de importá-los:
+
+```javascript
+// Load complete module with all charts
+import VueCharts from 'vue-chartjs'
+
+export default VueCharts.Line.extend({
+  mixins: [VueCharts.mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules with destructure assign
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+## Gráficos disponíveis
+
+### Gráfico de Barra
+
+![Barra](assets/bar.png)
+
+### Gráfico de Linha
+
+![Linha](assets/line.png)
+
+### Donut
+
+![Donut](assets/doughnut.png)
+
+### Pizza
+
+![Pizza](assets/pie.png)
+
+### Radar
+
+![Radar](assets/radar.png)
+
+### Área Polar
+
+![Área Polar](assets/polar.png)
+
+### Bolha
+
+![Bolha](assets/bubble.png)
+
+## Configurações de Build
+
+``` bash
+# Instala as dependências
+npm install
+
+# roda o servidor com hot reload at localhost:8080
+npm run dev
+
+# build para produção com minificação
+npm run build
+
+# roda testes unitários
+npm run unit
+
+# roda testes e2e
+npm run e2e
+
+# roda todos os teste
+npm test
+```
+
+Para informações detalhadas de como as coisas funcionam, confira o [guia](http://vuejs-templates.github.io/webpack/) e [documentação do vue-loader](http://vuejs.github.io/vue-loader).
+
+## Contribuindo
+
+1. Faça um fork o projeto ( https://github.com/apertureless/vue-chartjs/fork )
+2. Crie uma branch da sua feature (`git checkout -b my-new-feature`)
+3. Faça o commit das suas modificações (`git commit -am 'Add some feature'`)
+4. Faça o push da branch (`git push origin my-new-feature`)
+5. Crie uma nova requisição de pull
+
+## License
+
+Esse software é distribuído sob a licença [MIT license](LICENSE.txt).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -60,19 +60,19 @@
     "lodash": "^4.17.4"
   },
   "peerDependencies": {
-    "chart.js": "^2.5.0",
-    "vue": "^2.3.3"
+    "chart.js": "^2.6.0",
+    "vue": "^2.3.4"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
+    "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "chai": "^3.5.0",
-    "chart.js": "^2.5.0",
+    "chart.js": "^2.6.0",
     "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
     "cross-env": "^3.2.4",
@@ -117,12 +117,12 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "^2.3.3",
+    "vue": "^2.3.4",
     "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.0.4",
+    "vue-loader": "^12.2.1",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.3.3",
+    "vue-template-compiler": "^2.3.4",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",

src/mixins/reactiveData.js

@@ -26,7 +26,26 @@ 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] = dataset
+              // 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]
+                }
+              }
             })
 
             chart.data.labels = newData.labels

src/mixins/reactiveProp.js

@@ -4,7 +4,6 @@ module.exports = {
       required: true
     }
   },
-
   watch: {
     'chartData': {
       handler (newData, oldData) {
@@ -27,7 +26,26 @@ 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] = dataset
+              // 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]
+                }
+              }
             })
 
             chart.data.labels = newData.labels

yarn.lock

@@ -269,20 +269,20 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.1.tgz#8c428564dce1e1f41fb337ec34f4c3b022b5ad83"
+babel-core@^6.1.4, babel-core@^6.24.1, babel-core@^6.25.0, babel-core@~6:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
   dependencies:
     babel-code-frame "^6.22.0"
-    babel-generator "^6.24.1"
+    babel-generator "^6.25.0"
     babel-helpers "^6.24.1"
     babel-messages "^6.23.0"
     babel-register "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-    babylon "^6.11.0"
+    babel-template "^6.25.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
     convert-source-map "^1.1.0"
     debug "^2.1.1"
     json5 "^0.5.0"
@@ -293,13 +293,13 @@ babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-generator@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.1.tgz#e715f486c58ded25649d888944d52aa07c5d9497"
+babel-generator@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
   dependencies:
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
+    babel-types "^6.25.0"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
     lodash "^4.2.0"
@@ -798,6 +798,16 @@ babel-template@^6.24.1:
     babylon "^6.11.0"
     lodash "^4.2.0"
 
+babel-template@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    lodash "^4.2.0"
+
 babel-traverse@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
@@ -812,6 +822,20 @@ babel-traverse@^6.24.1:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
+babel-traverse@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
 babel-types@^6.19.0, babel-types@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
@@ -821,6 +845,15 @@ babel-types@^6.19.0, babel-types@^6.24.1:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
+babel-types@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
 babylon@^6.11.0:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
@@ -829,6 +862,10 @@ babylon@^6.15.0:
   version "6.16.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
 
+babylon@^6.17.2:
+  version "6.17.3"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.3.tgz#1327d709950b558f204e5352587fd0290f8d8e48"
+
 backo2@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
@@ -1086,11 +1123,11 @@ change-case@3.0.x:
     upper-case "^1.1.1"
     upper-case-first "^1.1.0"
 
-chart.js@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.5.0.tgz#fe6e751a893769f56e72bee5ad91207e1c592957"
+chart.js@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.6.0.tgz#308f9a4b0bfed5a154c14f5deb1d9470d22abe71"
   dependencies:
-    chartjs-color "^2.0.0"
+    chartjs-color "^2.1.0"
     moment "^2.10.6"
 
 chartjs-color-string@^0.4.0:
@@ -1099,9 +1136,9 @@ chartjs-color-string@^0.4.0:
   dependencies:
     color-name "^1.0.0"
 
-chartjs-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.0.0.tgz#7f60c7256589b24914814ece757659117381e35b"
+chartjs-color@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
   dependencies:
     chartjs-color-string "^0.4.0"
     color-convert "^0.5.3"
@@ -5670,9 +5707,9 @@ vue-html-loader@^1.2.4:
     loader-utils "^1.0.2"
     object-assign "^4.1.0"
 
-vue-loader@^12.0.4:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.0.4.tgz#bc9385326e3fd6538606454977baa91eacc6e6fd"
+vue-loader@^12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.1.tgz#53f27c0973d386768f5a75156f4129b5efc6ba55"
   dependencies:
     consolidate "^0.14.0"
     hash-sum "^1.0.2"
@@ -5695,9 +5732,9 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.3.tgz#b5bab9ec57309c906b82a78c81a02179dbc2f470"
+vue-template-compiler@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.4.tgz#5a88ac2c5e4d5d6218e6aa80e7e221fb7e67894c"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -5706,9 +5743,9 @@ vue-template-es2015-compiler@^1.2.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"
 
-vue@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.3.tgz#d1eaa8fde5240735a4563e74f2c7fead9cbb064c"
+vue@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"
 
 watchpack@^0.2.1:
   version "0.2.9"