Vue-chartjs: how to set this chart width and height ?

[fengcms]

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>

[craigcosmo]

What if I want to set the height but keep the the responsive part? because I want the width to extend to container's width.

[apertureless]

Then you need to set a height on your outer container.

You could also utilize the styles prop:

<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>

[craigcosmo]

does that work for you? tried that, it doesn't work. The height did not get to pass to line-chart component somehow.

[craigcosmo]

oh sorry, I didn't pass it properly :). It's working now

[barshalamixaane]

While using :height ="300" :width ="300" only height is changed but not width

[barshalamixaane]

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>

hi, while using this only height is changed but not width

[rayfoss]

For me, I had a race condition with the chartData watcher. I was able to set the dimensions while remaining responsive. MaintainAspectRatio was unnecessary, it maintained it anyway.

Without setting dimensions, the size of the chart wildly depended on timing... Which was odd.

[IsabelMeraner]

I had to adjust the height depending on the number of labels while generating multiple charts in a loop.
Re-calculating the height using 20px per single label and an additional 70px for the chart header for each chart did the trick for me:

```

            <v-card>
                <horizontal-bar-chart 
                                      :chart-data="{labels: chart.labels, datasets: [chart.dataset]}"
                                      :options="chart.options"
                                      :height="chart.labels.length*20+70"
                ></horizontal-bar-chart> 
            </v-card>

        </v-col>

```