vue-chartjsでデータの数に応じてグラフサイズを変える

やりたいこと

1. Horizontal Barグラフでデータ数が増えたときに、ラベルが間引かれるのを防ぎたい。
2. さらに、Barが小さくなるのではなく、グラフの方が大きくなって欲しい。

1.に対する解決策

autoSkip: falseを設定する。

yAxes: [{
  ticks: {
    autoSkip: false,  //ラベルを間引かない
    fontSize: 10,
  },
}]

2.に対する解決策

基本的にresponsive: true, maintainAspectRatio: falseの2つを設定すれば実現可能。

しかし今回は開閉するパネル内にグラフを配置しており、パネルの開閉時にグラフの高さが0から増えないという現象に悩まされたので、明示的に高さを指定するようにする。

data () {
  labels: this.label,
  datasets: [{
    data: this.value,
  }],
  return {
    options: {
      responsive: true,  //レスポンシブ
      maintainAspectRatio: true //縦横は固定
    },
  }
}

mounted () {
    this.$refs.canvas.height = this.value.length*17.5; //データ数に応じて高さ指定
    this.renderChart(this.data, this.options)
  },