How to fix ChartJS overflow

Ask us anything
1

Hello,

I have a chart (ChartJS) which is displayed correctly in the editor. It fits into the container without overflow.

image
image3824×1266 493 KB

However when I publish and look on the live url, the chart element is always overflowing the parent container. I have tried different sizing settings but I can’t get it right.

In the chart’s sizing settings the height and width are set to 100%.

image
image540×624 29.5 KB

Here are some screenshots of what it looks like on the live url:

image
image4554×1290 381 KB

image
image4554×1290 385 KB

Does anyone know how I can make sure this ChartJS element does not get bigger than the parent container?

Thank you!

2

Hey @sampannemans !

Sorry for the late reply!
Can you try wrapping your chart in another container, both with height at 100%?

Like:
container (your personal sizing) > container (100% height) > chart (100% height)