@marchaos It works fine in this demo . Can you show your question in an online jsfiddle demo ?

hi Xile. You're correct that it does rescale. I believe the problem I'm having is that I have a chart inside a flexbox container. Since recharts is using javascript to compute the resize, I don't think that it will work with flexbox. This isn't necessarily a recharts issue (or d3.js), but I would presume that a change or config on the recharts side would be needed to achieve what I'm doing.

@marchaos Recharts listens to the resize event of the container node. As long as you add a ResponsiveContainer in to a container node, and the container node can change size when the browser becomes larger or smaller, then the chart will change responsively. So I think it may be the bug of the layout which wrapper the ResponsiveContainer. It will be helpful to show your case in a jsfiddle demo.

@xile611 http://jsfiddle.net/9tjsb7k2/embedded/result/ . You'll see it opens to the correct size of the window, and if you resize from a small window to make it larger, it works, but not going from larger to smaller.

@marchaos It seems to be the problem of calculation strategy for flex box. You can check this stackoverflow question for detail.

http://jsfiddle.net/oezx3kh2/embedded/result/

Thanks, adding width: 0 to the children fixed that issue!

Does anyone know the fix for flexDirection: 'column'? Apparently setting width: 0 does not fix the issue here.

I figured it out. Kind of. If you're trying to use flexDirection: 'column' and run into this issue, I suggest that on your ResponsiveContainer that you add width={'99%'} along with a static height, like height={200} . This will make the chart resize properly. Just setting width: 0 on the parent element will not work because for some reason flex: 1 will not override width: 0 on the parent element. I have no idea why. According to this blog post, http://gedd.ski/post/the-difference-between-width-and-flex-basis/ , it should, but it doesn't.

This problem seems to persist.

got it working with a 99% width and a fixed height

We also got it working using 99% width.

Working with 99% however it would be nice if this worked at 100%. I'll do some further investigating to understand how this could be resolved in a way that doesn't include hacks.

Issue is still there.

Any suggestions?

@domix90 I set the height/width of a parent div using percents rather than flex grow. then set the responsive grid height/width props with percents as well. Seemed to work well.

<
div
 style
=
{
{
 height
: 
'1000px'
,
 width
: 
'1000px'
 }
}
 >

    <
div
 style
=
{
{
 height
: 
'100%'
,
 width
: 
'60%'
 }
}
>

          <
ResponsiveContainer
 height
=
{
/*some percent*/
}
 width
=
{
/*some percent*/
}
>

          <
/
ResponsiveContainer
>

     <
/
div
>

<
/
div
>

Thanks @tmercado !

I decided to switch to Charts.js to avoid this issue for future projects.

Why is this issue closed if it's still an issue and clearly a bug?

I mean, that's just pretty fucked up, should just work with 100% for width & height (and yes it only works with 99.8% for height for me, not 99.9% - or 99.99% for that matter).

I fixed it up using old lifehack with padding.

<div style={{position: 'relative', width: '100%', paddingBottom: '250px'}}>
  <div
    style={{
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    }}
  >
    <ResponsiveContainer>
      <YourChartGoesHere />
    </ResponsiveContainer>
  </div>
</div>

paddingBottom value can be in px for fixed height, and in percents for aspect ratio.

Animations are very slow with width 99%

@olelivalife You can try to delay or debounce the resize action and only then adjust the size of the container. That means though, that you might have to set the width manually using a ref.

http://bencentra.com/code/2015/02/27/optimizing-window-resize.html

For me, setting overflow: hidden in parent component solves the problem.

<
div
 style
=
{
{
 overflow
: 
'hidden'
,
 'flex-basis'
: 
"50%"
 }
}
>

  <
ResponsiveContainer
>

    <
YourChartGoesHere
 /
>

  <
/
ResponsiveContainer
>

<
/
div
>

new hack for issue
set position: relstive for .recharts-surface

.recharts-surface {
  position: absolute !important;
  left: 0px;
  top: 0;
}

.recharts-surface {
position: absolute !important;
left: 0px;
top: 0;
}

@VitaliyZH
relative ? or absolute . Your snippet shows aboslute?

The issue is still there. I have a problem with the flex layout with direction "row". Screen rotation on mobile devices does not resize chart from bigger to smaller height. My solution is to use height equals 94% on ResponsiveContainer so resizing is triggered and animation is not to slow.

It will be great if any fix of this problem will come out.

UPD.

I have found a new solution on the flexbox with direction column for my case.

On a flex-container I have:
{ width: 100%; height: 100%; display: flex; flex-wrap: nowrap; }

And on the wrapper flex div over ResponsiveContainer I have:
{ flex: 1, width: '100%', overflow: 'hidden' }

UPD2: Wrapper flex must be set to { flex: 1 }. Initially, I set it to { flex-grow: 1 }, but it does not work in the Safari.

On ResponsiveContainer height and width are set to 100%.

It seems to work properly when screen orientation on the mobile device is switched from landscape to portrait.

The jsx structure in the app is something about like this:

<
div
 style
=
{
{
 width
: 
'100%'
,
 height
: 
'100%'
,
 display
: 
'flex'
,
 flexWrap
: 
'nowrap'
 }
}
>

  <
div
 style
=
{
{
 width
: 
'100%'
 }
}
>

    Header element with some title
  
<
/
div
>

  <
div
 style
=
{
{
 flex
: 
1
,
 width
: 
'100%'
,
 overflow
: 
'hidden'
 }
}
>

    <
ResponsiveContainer

      width
=
"100%"

      height
=
"100%"

    >

       <
YourChartComponent
 /
>

    <
/
ResponsiveContainer
>

  <
/
div
>

<
/
div
>

overflow is important! It must be defined on the element. Without it resize does not work properly.

And also I have a wrapper container element with a defined height upper on the component tree. This structure is injected inside this wrapper element so they together work as a widget component. The main goal is that the ResponsiveContainer is reacting to any changes of the upper wrapper component with defined height. And it does in this case.

Animations are very slow with width 99%

Yep, I had that too. But then I tried the solution right before your comment; the one by @mixail-novikov . It works flawlessly.

Having issues with this as well. Tried everything mentioned here, and in other issues and SO threads.

The best I was able to do was use a width of 94% to speed up the animation, it's extremely clunky looking while resizing though.

    <div style={{ width: ''100%' }}>
      <ResponsiveContainer width="94%" height={450} debounce={1}>
        <BarChart
          data={chartData}
          margin={{
            top: 30,
            right: 0,
            left: 20,
            bottom: 30,
          }}
        >
...
    </div>

If I go any lower than 94% the bars get really out of whack in terms of being centered with the parent, using a left margin 20 and no right margin allows them to at least appear centered.

PS: Why is this issue closed? Using bs hacks like 99% and 94% with awful margins is not a solution it's a workaround for an obvious bug and/or limitation that needs to be addressed.

@reifnotreef Let us know why the one by @mixail-novikov is not working for you. It is working for me flawlessly.

@christiaanwesterbeek it does not. I thought it might have to do with me having a div above my responsize container.

    <div className={classes.barGraphWrapper}>
      <div className={classes.header}>
        {title && <div className={classes.headerStyles}>{title}</div>}
        {CustomTitle && <CustomTitle />}
      </div>
      <ResponsiveContainer width="94%" height={450} debounce={1}>
        <BarChart
          data={chartData}
          margin={{
            top: 30,
            right: 0,
            left: 20,
            bottom: 30,
          }}
        >

I tried removing the extra header div that but it still didn't work. It causes the bar graph to be rendered at about 25% width instead of 100%.

Either way this issue should not be closed as this is not a "fix" it's a hack/workaround for an inherit problem with the ResponsiveContainer.

This should definitely not be closed. Changing the height of the container does not trigger a change in height for the chart.

Merged #3391 - this defaults min-width to 0 which overrides the default auto value. The original problem with not-shrinking when responsive container is a flex child should be solved.

Will be released in next patch or minor release. Closing this issue back up. Thanks all!

Released in 2.5!

My Recommendation is just to stop using ResponsiveContainer and just use AutoSizer from react-virtualized-auto-sizer worked like a Charm for me at least

import AutoSizer from "react-virtualized-auto-sizer";

export default function Chart() {
  return (
    <AutoSizer>
      {({ width, height }) => <LineChart width={width} height={height}>{...}</LineChart>}
    </AutoSizer>
  );
}

THANKS !! ????

Many thanks to you @SamuelPrigent it worked very well for me too

Just changing from props of ResponsiveContainer from width="100%" height="70%" to width="99%" height="70%" worked for me

issue is still there

my code is like

<div
          style={{
            display: "flex",
            flexDirection: "column",
          }}
        >
          <h6>
            Some text
          </h6>
          <div style={{ flexGrow: 1 }}>
               <ResponsiveContainer>
                      // chart here
              </ResponsiveContainer>
          </div>
        </div>

its not resizing and with width 99.9 and height 99.8 %, animation is very very slow

@ckifer It seems this is not fully solved. I also just stumbled into this again. ??

I wonder whether we should even maintain our own ResponsiveContainer, if other solutions specialised to this problem are available, as mentioned above in #172 (comment)

Yeah I mean we're really just wrapping one of those solutions anyways right with resize detector.

Most other chart solutions are just responsive out of the box iirc. While we could tell people to go use something else for responsive needs I think that downgrades the out of the box value recharts currently gives (even if this bug exists).

Personally think we should keep responsive behavior but remove the extra component and have it as a part of each chart. If we need to change the internal implementation to get this to work that should be fine

(1) Our ResponsiveContainer wraps https://www.npmjs.com/package/react-resize-detector
Our way of usage is not the recommended way. We could upgrade the dependency and refactor to align with best practice. This could be a good first step either way.

(2) In the README it says:

Container queries now work in all major browsers . It's very likely you can resolve your problem using pure CSS .

1. Sounds good
2. If we could get a css solution to work internally that would be huge - since container queries are like media queries I'm not sure how it replaces things but i guess investigation needed.

Any updates on this? Would really love a fix

Responsive container has been refactored to use resize detector directly. That will be in the next minor release, but I haven't confirmed if that fixes this or not. Will check

@HHongSeungWoo do you know if your changes fix this?

@ckifer No, I think some changes might be needed for size detection in flexbox.
I'll create a PR, could you review it to see if there are any issues?

Yep

At v. 2.9, I was able to fix the no-shrink behaviour with the width='99%' hack, but charts with flex-basis assigned to them ignored it after the resize.

However, with v. 2.10.3 of the library, I stopped experiencing the no-shrink behaviour, even in flexbox scenarios, so I highly recommend pulling the latest version to see whether the issue goes away. All my charts are rendered like this, if it matters:

<div
 className={cx(
    'chartCard p-6 gap-6 grow-[1] max-w-full',
    chartConfig.type === 'bar' ? 'basis-[37%]' : 'basis-[57%]',
 )}
>
<div className='h-[250px] overflow-x-auto'>
  <ResponsiveContainer debounce={2} width='100%' height='100%' minWidth={%depends on chart type%}>
    <Chart ... />
  </ResponsiveContainer>
</div>
</div>

Here's what ended up working for me, with two graphs at about 50% height each in a column. I needed the flex-grow for it to grow, and the overflow: hidden for it to shrink.

<
div

  style
=
{
{

    height
: 
"95vh"
,

    display
: 
"flex"
,

    flexDirection
: 
"column"
,

  }
}

>

  ...other content
  
<
div

    style
=
{
{

      flexGrow
: 
1
,

      display
: 
"flex"
,

      flexDirection
: 
"column"
,

      overflowY
: 
"hidden"
,

    }
}

  >

    <
div
 style
=
{
{
 overflow
: 
"hidden"
,
 flexBasis
: 
"50%"
 }
}
>

      <
ResponsiveContainer
 width
=
"100%"
 height
=
"100%"
>

        ...AreaChart
      
<
/
ResponsiveContainer
>

    <
/
div
>

    <
div
 style
=
{
{
 overflow
: 
"hidden"
,
 flexBasis
: 
"50%"
 }
}
>

      <
ResponsiveContainer
>

        ...AreaChart
      
<
/
ResponsiveContainer
>

    <
/
div
>

  <
/
div
>

<
/
div
>