Vue
How to adjust the vertical and horizontal length in Vue Chartjs
Table Of Contents
Summary on how to adjust the vertical and horizontal length in Vue Chartjs.
PR
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.
Well then!
Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!




