search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.08k stars 1.02k forks source link

Adaptive resize height and width responsive #523

Closed stahlmanDesign closed 5 years ago

stahlmanDesign commented 5 years ago

Nivo charts have always automatically resized when the width changes, but not the height. Now, the examples on the website resize vertically and horizontally when you resize the page.

I have wrapped some charts in react-measure, but it is cumbersome and it looks like there might be a better way to do it like the example. What is the best way to do this?

resize-adapt-horiz-and-vertical

plouc commented 5 years ago

Responsive components are already wrapper in react-measure, use ResponsiveLine for example instead of Line

plouc commented 5 years ago

Also it was already the case before, it's just that now the website uses a percentage instead of a fixed value.

plouc commented 5 years ago

You just need to have a parent container with a defined size.

codepharmer commented 3 years ago

@plouc How can the graph be responsive if it has a defined size?

plouc commented 3 years ago

@codepharmer, a defined size can be in % or inside a grid using fr units, a flexbox... even if responsive, the behavior has to be determined, as you would do for a responsive website.

AntoineFachez commented 1 year ago

Hi Plouc,

thanks for all the work! as some of us I am stuck with the responsive width as well. I got control of the height, perfect. But the width sticks with its latest min. The line chart does not shrink. I consoled your line chart at nivo.rocks and reproduced the structure, I gotElementById and forced the container, the svg and a wrapping div to "100%" or some "Xvw" all together, seperate… any given combination I would come up with. I tried npm autoSizer.

the only value that got any "accaptable" result was a fixed value not based on percentage or viewport width.

Can you point me to the right direction how you did that on your page? I cant figure it out.

Very, very much appreciated :) Antoine.