Vue

VueのChartjsで、縦と横の長さを整える方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

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 を2つ用意して、

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

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

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

まとめ

以上です。

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

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

それでは!