ResponsivePie not rendering anything. about nivo HOT 17 CLOSED

Can you provide the component's React code please?

from nivo.

And what's the size of the wrapping div in your browser inspector?

from nivo.

I don't see any data in your settings

from nivo.

Sorry, you're using the sample data, missed that :/

from nivo.

Yeah, sorry my implementation looks like this:

<ResponsivePie
          {...settings}
          data={testData} // Data from nivo.rocks site.
        />

It's placed inside a grid with this properties:

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 30px 30px;

and the div itself has a min height of 200px.

from nivo.

@andeersg what's the computed size of the div in whatever browser dev tools you use ?

from nivo.

The wrapper I mean

from nivo.

It has a computed size of width: 600px and height: 200px;

from nivo.

really weird then… quite hard to debug without having the proper code though

from nivo.

I mean something I can try to run

from nivo.

I can try to experiment with some different heights for the wrapper, if that does not work I will try to reproduce it somewhere you can look at it.

Really cool project btw!

from nivo.

Thank you

from nivo.

@andeersg, I think I've found the problem, see https://www.webpackbin.com/bins/-KtLnILuaFhwgfJnIkYC

from nivo.

You cannot use min-height as responsive components use available space to render, but min-height relies on content dimension, so…

from nivo.

If you want a fixed size component, you should use Pie, otherwise, you'll have to set an explicit height on the wrapper

from nivo.

Or perhaps find a way to get an usable height, using 100% height for all parents of the grid, because default align-items value is stretch, but need to have a parent with a defined height to be correctly used

from nivo.

I close this issue as it's more a CSS issue in the end.

from nivo.