React Chart Resize To Containing div.

[Paul Cookson]

Hi,
I’m stuggling to get my charts to resize to the containing div in react.

I am using 2 charts synced.

<div> //This is 100% height and width
<div><CanvasJSChart1/></div>This is 25% height
<div><CanvasJSChart2/></div>This is 75% height
</Box>

When the charts are rendered they respect the width (say if I put 50% width) but do not respect the height. Always rendering at about 500px.

If I set the height manually the hight is respected. But I want this to fill the containing div.

In summary resizing works with width but not height.

Any ideas?

Paul

[Thangaraj Raman]

@pncookson,

By default, the height of the container depends on its content. When setting the height of child elements in percentage, the parent element’s height must be set explicitly since the child element’s height is calculated as a percentage of the defined parent element’s height. (In your case, you are setting the height of both parent and child elements in percentage). Setting the height of the body element explicitly to 100vh seems to be working fine.

Please take a look at this Stackblitz for an example.

—
Thangaraj Raman
Team CanvasJS

[Paul Cookson]

HI Thangaraj,

I has missed the containerProps altogether. By setting this property like this:-

const containerProps1 = {
width: “100%”,
height: “100%”,
};
const containerProps2 = {
width: “100%”,
height: “100%”,
};

the charts fill their containers 100% and resize as desired.

Simple if you know how. Thanks for your help.

Much appriciated.

Paul