angulartypescriptchart.jsng2-charts

Chart.js Bar-Chart Overlaps when screen size too small


Good day first, I have this problem when the screen width is too low that the bar chart overlaps. I suspect that it is due to maintainAspectRatio. But since I set this propertie to false because I didn't want the charts to render too small. I only wanted them to shrink in width and not in both axes. Additionally, I controlled the gap between each bar with a white border because I couldn't find another way to solve the problem.

Heres a screen of what i mean:

enter image description here

And heres how it looks when the screen size is larger:

enter image description here

Now I have the question, if it is possible to prevent this problem from occurring anyway.

I can provide some code if necessary.

Thanks in advance!


Solution

  • fixed it by adding min-width and overflow-y to the card content container.