I summarized how to adjust the vertical and horizontal length in Vue Chartjs.

⇨ Click here for the table of contents of Vue articles

Conclusion

<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; Specify width for a tight fit */
}

In this way, prepare two divs for the component that displays VueChart,

By specifying as above, you can create a graph with the width and height specified in .graph.

Intuitively, I thought that I could specify the width and height with just one div tag, but it didn't work like that.

Even when I tried providing :styles with props or making it responsive, it didn't work as expected, so it ended up like this.

Summary

That's all.

I hope it can be helpful for someone.

If you have any complaints or corrections, please contact me via DM on Twitter below.

Well then!