XYChart: Initial Height based on Parent width?

[lapidus]

The XYChart itself is responsive. But would we be a good way of responding to the parent containers width to set the height specifically?

I'd like to achieve something like this:

let height = 500

if(parentWidth < 500){
   height = 300
}

<XYChart
   height={height}
   ...
>
   ...
</XYChart>

[williaster]

Hey @lapidus, XYChart is responsive by default but you can pass your own width and height. To accomplish what you want I would just wrap it in a ParentSize and pass the desired dimensions. Something like this:

<ParentSize>
  {({ width, height }) => (
    <XYChart 
      width={width}
      height={/* base on width */}
      {...}
    />
  )}
</ParentSize>

[lapidus]

Thanks a lot for confirming! I ended up using that solution and it works fine!