💎 Release new version 2.8.0

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>