Making graph take up entire card div

[rahulbrahmal]

Hi!

I'm currently using react-financial-charts in a project of mine and am running into a slight problem. On a specific page, I have cards which resize dynamically based on the size of the container (I'm using the GRID and BOX components in chakra UI to do this). I would like a graph in these, but noticed that the graph does not extend to the entire area of the div. I know that with the withSize HOC that I can specify a minWidth, however, this does not resize when the card shrinks (for example when the page size is made smaller.

I've attached the two snippets of code below as well. Would anyone have a good way of potentially doing this?

<Box> <LineGraph data={data.data} xLabel={data.xLabel} yLabel={data.yLabel} /> </Box>

export default withSize({ style: { minHeight: 355 }, // @ts-ignore })(withDeviceRatio()(LineGraph));

[markmcdowell]

You just need to stretch the outer container to fit the space, you don't need a min height. Something like flex: 1 1 auto on your Box.

[dev-nll]

You might want to try to wrap everything in Flex (also part of Chakra), set it to row mode, and specify flex="1" inside the Box props

…

On Tuesday, August 10, 2021, Rahul Brahmal ***@***.***> wrote: Hi! I'm currently using react-financial-charts in a project of mine and am running into a slight problem. On a specific page, I have cards which resize dynamically based on the size of the container (I'm using the GRID and BOX components in chakra UI to do this). I would like a graph in these, but noticed that the graph does not extend to the entire area of the div. I know that with the withSize HOC that I can specify a minWidth, however, this does not resize when the card shrinks (for example when the page size is made smaller. I've attached the two snippets of code below as well. Would anyone have a good way of potentially doing this? <Box> <LineGraph data={data.data} xLabel={data.xLabel} yLabel={data.yLabel} /> </Box> export default withSize({ style: { minHeight: 355 }, // @ts-ignore })(withDeviceRatio()(LineGraph)); [image: image] <https://user-images.githubusercontent.com/24690504/128819023-1aa3e4e8-42a3-4891-a0a1-d66dac1a5b36.png> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#559>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKNU4XPFEPUFA2RWASWU5LT4DB55ANCNFSM5B3PFAGA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[rahulbrahmal]

Thank you so much! @dev-nll 's response worked perfectly! One additional thing I did need to do was set the Box props width and height to '100%'

<Flex direction="column">
  <Box flex="1" width="100%" height="100%">
    <LineGraph />
  </Box>
</Flex>