how to set this chart width and height ?

my english is very poor ,sorry~

how to set this chart width and height ?

this is my code

// homechart.js
import { Line } from 'vue-chartjs'
export default Line.extend({
  props: ["data"],
  mounted () {
    this.renderChart(this.data, {

    })
  }
})

my vue app

<template>
  <homechart :data='chart'></homechart>
</template>
<script>
  import homechart from './homechart'
  export default {
    components: { homechart },
    data() {
      return {
        chart:{
          labels : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
          datasets : [
            {
              fillColor : "rgba(220,220,220,0.5)",
              strokeColor : "rgba(220,220,220,1)",
              data : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,1]
            }
          ]
        }
      }
    },
  }
</script>

the chart is work , but ,it’s so big, i want set chart width and height.

show me the code , please , think you!

[apertureless]

Hey,

seems to be related to #8

There are two possibilities. If you want your chart to be responsive, you can wrap your chart into a div that has a max-width (in css) If you want a fixed width and height, you can simply pass it the props.

<my-chart :width="300" :height="300"> </my-chart>

However you will need to set the repsonsive property to false. And maybe the maintainAspectRatio. Both are chartJs options you can pass in the data object.

http://www.chartjs.org/docs/#chart-configuration-global-configuration

[fengcms]

think you , you are so fast! it’s work now! the code is

// homechart.js
import { Line } from 'vue-chartjs'
export default Line.extend({
  props: ["data", "options"],
  mounted () {
    this.renderChart(this.data, {
      maintainAspectRatio:false
    })
  }
})

and

<homechart :width="300" :height="300" :data='chart'></homechart>