apertureless / vue-chartjs

📊 Vue.js wrapper for Chart.js
https://vue-chartjs.org
MIT License
5.56k stars 838 forks source link

[Bug]: Chart size not responsive #1105

Closed susanne99 closed 3 weeks ago

susanne99 commented 1 month ago

Good Chart: goodchart

Good Chart: with narrow menu goodchart1

Bad Chart: This happens when you make the left menu narrow and then wide again badchart

Would you like to work on a fix?

Current and expected behavior

i use vue3 with bootstrap vue next

I have a row with 2 columns. This is a detail view, which means that a menu is displayed in the left column and the details about it in the right. You can make the left column very narrow so that only icons can be seen to save space. I use this several times in my program - it works perfectly. only not with vue-chartjs. After reducing the size of the left column, the right side that contains the chart is no longer to the right of it but below it. I assume that height and width are not recalculated. the row is a flex container. What is the solution so that the two columns are still next to each other after changing the width of the left column.

Reproduction

Unfortunately I don't have any code for reproduction because the program is already too big

chart.js version

4.4.4

vue-chartjs version

v5.3.1

Possible solution

No response

apertureless commented 3 weeks ago

Check out the documentation of responsive charts in chart.js https://www.chartjs.org/docs/latest/configuration/responsive.html