How can I make charts responsive ?

[0xrushi]

The const height and const width mentioned here https://pastebin.com/Q1MMAxJF shows a small plot but If I do const height = "100%"; It is showing blank plot.

[markmcdowell]

Use the withSize hoc to give the dimensions of the space you put it in.

[0xrushi]

I'm on it. I wasn't aware about hoc as I'm new to react, now understood something of it. Will update soon If I get it :-).

[0xrushi]

So for https://pastebin.com/N0jsRypB is this correct (at the bottom)

export default withSize({style:{height:800, width:400}})(ChartCard);

I still don't get how will it be flexible based on its parent div inside index.js?

<div className="card"> <ChartCard /> </div>

[0xrushi]

UPDATE:
in index.js

<div className="card"> 
    <ChartCard style={{height:400, width:400}} />
</div>

and in ChartCard component

const ChartCard = (props) => {
...
...
let  {height,width} = props['style'];

}
export default withSize({style:{height:800, width:400}})(ChartCard);

It works. but I'm not able to pass values as %.

[markmcdowell]

HOCs work by passing props down to components. The correct code would be:

const ChartCard = (props) => {
...
...
const { height, width } = props;

}
export default withSize()(ChartCard);

[0xrushi]

Thanks a lot 🤩, It works.