04 Aug 08:08

60f87e7

Features

Because of #158 now dynamic styles are added. In addition to this, you can also pass a class name for the outer div.

The canvas element is wrapped into a div and if you set responsive: true the canvas will ignore the width and height props and grow based on the div.

CSS Classes

You can now set css-classes which is a string with classes that get applied to the out div.

<my-line-chart :chart-data="mydata" :options="myoptions" css-classes="chart-class-1 col-md-2" />

Dynamic Styles

You can now set responsive: true and pass in an styles object which get applied as inline styles to the outer div. This way you can change the height and width of the outer container dynamically. It is best to use computed properties for this.

⚠ You need to set position: relative.

<template>
     <div>
       <line-chart :styles="myStyles"/>
       <button @click="increase()">Increase height</button>
     </div>
</template>

<script>
export default {
  data () {
    return {
      height: 300
    }
  },
  methods: {
    increase () {
     this.height += 10
    }
  },
  computed: {
    myStyles () {
      return {
        height: `${this.height}px`,
        position: 'relative'
      }
    }
  }
}
</script>

Assets 2

25 Jul 10:58

apertureless

v1.2.0

4f5aa18

💎 Release new version 1.2.0

This is a vue 1 release!

Updated

Chart.js to 2.6.0

Added

Scatter Chart

Fixed

Get error when $destroy is started #149

Assets 2

22 Jul 16:17

apertureless

v2.7.2

188ab83

💎 Release new version 2.7.2

Update

peerDependency [email protected]

Assets 2

05 Jul 19:08

apertureless

v2.7.1

4f7dda3

💎 Release new version 2.7.1

Fixed

Fixed missing export of new scatter chart

Assets 2

04 Jul 09:15

apertureless

v2.7.0

640ce5c

💎 Release new version 2.7.0

🔥 New Features

Scatter Chart #129

The scatter chart is not really new, as it is only a derivation of the the line chart. However now it is available as a own chart type.

import {Scatter} from `vue-chartjs`

export default Scatter.extend({
...
})

⚠ Please keep in mind, that the scatter chart is not working with the reactiveProp and data mixins, as the data structure is different then in the other charts.

Add support for inline plugins #137 (kurbar)

We exposed now a method to add inline plugin to your chart instance.

mounted () {
   this.addPlugin({id: 'my-plugin', ....})
}

📚 Tutorials

You can find now some tutorials and other resources in the docs, on how to use vue-chartjs and build cool application with it. 👉 docs

Change Log

v2.7.0 (2017-07-04)

Full Changelog

Closed issues:

Reactive Data Tutorial #132
Using inline plugins #130
Scatter Chart #129
Generating Chart after clicking submit button #128
Ticks not working with reactive props #127
Error in callback for watcher "chartData": "TypeError: Cannot read property 'data' of undefined" #126
Passing the data from vue to chartjs #125
Combination of Bar and Line Chart #123
Reactive data example not working #122
vue-chartjs height was 0 when i set v-show #120
Bar chart, barPercentage in X axis #119
update event not firing on data change #118