vue-chartjsでグラフの大きさを調整する

vue-chartjsでグラフを描画すると大きさがメチャクチャになったりして、ハマったので調整する方法についてメモです。
またvue-chartjsにはあまり関係ありませんが、Nuxtでやりたいと思います。

目標は「親要素に合わせた大きさに調整」です。

まずは普通にグラフを表示する

ドーナツチャートを表示するプログラムです。
これを使うと、めちゃデカいグラフが表示されてしまいます。

<script>
import { Doughnut } from 'vue-chartjs';

export default {
  extends: Doughnut,
  name: 'chart',
  data () {
    return {
      data: {
        labels: ['teens','twenties', 'thirties', 'forties', 'fifties', 'sixties'],
        datasets: [
          {
            label: 'Dataset',
            data: [20, 10, 30, 10, 60, 30],
            backgroundColor: ['blue', 'green', 'purple', 'yellow', 'pink', 'skyblue', 'gray']
          }
        ]
      },
      options: {
        responsive: true
      }
    }
  },
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

<template>
  <graph />
</template>

<script>
import graph from '~/components/graph.vue'

export default {
  components: {
    graph
  }
}
</script>

グラフの大きさを調整できるようにする

vue-chartjsではグラフを呼び出す側がグラフにstyleを渡すことができます。
ここで、大きさを調整できるんですね。
それでは、コードを書き換えましょう。

<script>
import { Doughnut } from 'vue-chartjs';

export default {
  extends: Doughnut,
  name: 'chart',
  data () {
    return {
      data: {
        labels: ['teens','twenties', 'thirties', 'forties', 'fifties', 'sixties'],
        datasets: [
          {
            label: 'Dataset',
            data: [20, 10, 30, 10, 60, 30],
            backgroundColor: ['blue', 'green', 'purple', 'yellow', 'pink', 'skyblue', 'gray']
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

<template>
  <graph :styles="myStyles" />
</template>

<script>
import graph from '~/components/graph.vue'

export default {
  components: {
    graph
  },
  data(){
    return{
      height:500
    }
  },
  computed:{
    myStyles(){
      return{
        height: `${this.height}px`,
        position:'relative'
      }
    }
  }
}
</script>

maintainAspectRatio: flase になっていることに注意しましょう
これを設定しないと、うまく動作しません

グラフの大きさが調整できていることがわかります。

親要素に大きさを合わせてみる

<template>
  <div class="size">
    <graph :styles="myStyles" />
  </div>
</template>

<script>
import graph from '~/components/graph.vue'

export default {
  components: {
    graph
  },
  data(){
    return{
      height:100
    }
  },
  computed:{
    myStyles(){
      return{
        height: `${this.height}%`,
        position:'relative'
      }
    }
  }
}
</script>

<style>
.size{
  height:500px;
}
</style>

以上！！