Vue の Chartjs で、縦と横の長さを整える方法についてまとめました。

⇨ Vue 記事の目次はこちら

結論

<div class="graph_wrap">
  <div class="graph">
    <PvLine :chartData="chartData" />
  </div>
</div>

.graph_wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.graph {
  width: 100%;
  height: auto;
  /* width: 200px; widthを指定するとカッチリ指定できる*/
}

このように、VueChart を表示してくれるコンポーネントに対して div を２つ用意して、

上記の通り指定すると、.graph で指定する width・height のとおりのグラフが作成できます。

なんとなく直感だと、div タグ１個で width、height を指定すればいいのかな？と思いましたが、それではできなかったのと、

props で:styles を与えたり、responsive にしてみても思ったように動かなかったので、この形になりました。

まとめ

以上です。

誰かの参考になればと思います。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！