Chart container does not appear within Display Flex Container

[zbayoff]

🐛Bug report

Describe the bug When a <ChartContainer>, wrapped in the <Resizable> component is within a display: flex container, the chart will not appear in the DOM

To Reproduce Steps to reproduce the behavior: I have created a test repo here: https://github.com/zbayoff/react-timeseries-charts-example using the Simple Bar Chart Example. The test repo is created with the Create React App code.

Clone the repo, npm install and yarn run start.

Expected behavior The bar chart should show in the DOM. Setting the row class to display: block and the bar chart will appear. It is necessary, in my app, however, that the container is display: flex.

Desktop (please complete the following information):

• OS: iOS
• Chrome
• Version 79.0.3945.130 (Official Build) (64-bit)

[pjm17971]

That seems to be bootstrap code. I'm not sure, but does it need a column div, you only have a row containing no column span. Maybe wrap the Resizable in something like <div className="col-md-12">

[zbayoff]

@pjm17971 I removed the Bootstrap classes, but I still get the issue if I set the container to display: flex. I've updated my test repo.

[pjm17971]

Yeah it seems like the Resizable code isn't working with flexbox parents, and it also seems like this is a general problem. In general the chart code just expects a width prop passed into it. What the Resizable component does is tries to measure its parent and inject that width into the ChartContainer below it. So the question is how to measure the parent when it's a flexbox 🤔

Thanks for the report. I'm not sure what the solution is unfortunately.

[BennettDixon]

I have encountered the same issue with failing to render in flex-boxes. I have resolved it by wrapping the <Resizable /> container in a containing div and setting the height & width to 100%:

<div style={{ height: '100%', width: '100%' }}>
  <Resizable>
    <ChartContainer {...chartContainerProps} >
      <ChartRow height={CHART_HEIGHT}>
        <YAxis {...yAxisProps} />
        <Charts>{charts}</Charts>
      </ChartRow>
    </ChartContainer>
  </Resizable>
</div>