How to have growing chart in table shrink back down in React when resizing window

Question

I'm using a visualization library React-vis and have found that while a line graph or chart can shrink and grow normally when using the FlexibleXYPlot component, once it's placed in a table cell with a width of 40% of the row it's in, it grows but does not shrink back down when I resize the window. I was wondering how I can get the shrinking behavior that I get outside a table in a table. The code is here, which demonstrates the two contexts: https://codesandbox.io/s/wk6kpxl3jk

The below is not my graph per se, but shows the same behavior that I'm getting and would like to avoid.

score 0 · Answer 1 · answered Apr 18 '19 at 09:53

0

Try using vw instead of %. Like this

.class {
    width: 100vw
}

You might need to use a smaller number than 100 though

answered Apr 18 '19 at 09:53

Chris

85
1
4
16

score 0 · Answer 2 · answered Jun 10 '19 at 02:42

I do it with

import ReactResizeDetector from 'react-resize-detector';

...

const handleResize = () => {
   const element = window.document.querySelector('.mainWrapper');
   this.setState({ width: element.offsetWidth });
}

...

<ReactResizeDetector handleWidth handleHeight onResize={handleResize} />

Then add the width as prop to your chart component.

szokrika · Answer 3 · 2019-06-21T03:09:36.193

Probably this is a better solution. There is actual responsive support in the library:

import {
  FlexibleXYPlot,
  FlexibleWidthXYPlot,
  FlexibleHeightXYPlot
} from 'react-vis';

FlexibleWidthXYPlot modifies XYPlot so that it no longer requires a width, since it will take all the with in its container div. Likewise, FlexibleHeightXYPlot modifies XYPlot so that is no longer requires a height, and its height will be that of its container div. Finally, FlexibleXYPlot modifies XYPlot so that it no longer requires either a width and a height, its dimensions will be that of its container.

These components can be used exactly as XYPlot:

<FlexibleWidthXYPlot height={100}>
  <VerticalBarSeries data={data} />
</FlexibleWidthXYPlot>

<FlexibleHeightXYPlot width={100}>
  <VerticalBarSeries data={data} />
</FlexibleHeightXYPlot>

<FlexibleXYPlot>
  <VerticalBarSeries data={data} />
</FlexibleXYPlot>

How to have growing chart in table shrink back down in React when resizing window

3 Answers3