Nivo: Graphs aren't rendering in React.

[chrislombaard]

I've replicated one of the Heatmap examples provided on http://nivo.rocks/#/heatmap/, but the graph doesn't want to render. No error is thrown, and the div is just empty. Here is a code sandbox example. https://codesandbox.io/s/w2q9l3nojl

[plouc]

You must have a parent container with a height, otherwise, the Responsive component has no way to figure out which space it should occupy.

[plouc]

Iv'e updated your example => https://codesandbox.io/s/4wmky5qoo7

[chrislombaard]

@plouc Shouldn't this be added to the docs?

[chrislombaard]

@plouc Thanks for your prompt assistance! 👍

[plouc]

@chrislombaard, I don't know how to document this, responsive component should have a way to figure out its dimension, Maybe in the FAQ, something like "My chart isn't rendered".

[chrislombaard]

@plouc Yes, that could be very good. Also, I notice a significant reduction in performance of the chart in the code sandbox, and on my local machine, vs on the website http://nivo.rocks/#/heatmap/

[plouc]

The website is a production build, React behaves differently in dev mode.

[cherylschaefer]

For anyone else who stumbles on this issue like I did, include the container to set the height inside the component that is rendering the responsive graph.

[artemave]

Took a lot of head scratching to arrive here. Very confusing problem.

[plouc]

@artemave there's a warning on top of every code sample on the website, do you have a suggestion on how to make it easier for people to figure out what's happening?

[artemave]

Haha, there is indeed a warning 🤦‍♂️ . I think at some point I searched for "responsive" on the doc page, but it didn't find anything because I happened to have another tab (e.g. data) opened. So perhaps promoting this comment into the doc would make it easier to find?

[plouc]

Maybe the FAQ, something like "My component isn't rendering :/"

[EduardoAC]

@plouc This problem remains today, I am happy to contribute by adding a FAQ to the repository as you propose. I had to spend a day just to figure it out about the height since my components adjust to the content

[plouc]

@EduardoAC, there's a comment before each generated code sample, I thought this would be enough :/

[plouc]

Maybe people don't read it, but then, I think they won't read the doc either :)

[plouc]

@EduardoAC if you're willing to contribute to the FAQ => https://github.com/plouc/nivo/blob/master/website/src/components/pages/Faq.js

[EduardoAC]

@plouc I will be honest, I used the storybook and https://codesandbox.io/s/m4ro13jjn8 examples for my use case that require a compose chart. I didn't realise that it was in the live examples.

https://github.com/plouc/nivo/pull/462/

As well, I consider weird that the chart render an empty div, perhaps, it could setup a default height.

[JeffreyHoDev]

I have a problem rendering the graph. (I did put height)
I not sure is it my data structure error or what... i am using react, when i pass state data which is array with objects (Within object there is id and value after i fetch), it gives an error
Failed prop type: The prop data[0].value is marked as required in Pie, but its value is undefined.

[plouc]

@JeffreyHoDev it seems that the data items don't have a value property, which is required.

[JeffreyHoDev]

0: {item_id: 1, item_name: "item A", value: 15, id: "item A"}
1: {item_id: 2, item_name: "item B", value: 30, id: "item B"}
2: {item_id: 3, item_name: "item C", value: 10, id: "item C"}
3: {item_id: 6, item_name: "item D", value: 30, id: "item D"}
4: {item_id: 7, item_name: "item E", value: 30, id: "item E"}

These are the data structure i copied from console. originally don't have value and id, i just create them in loop.
I am troubleshooting it right now, one possible reason i can think of is when render function run in react, the state is not changed yet to pass in. (Initially state is empty array), thus causing undefined to passed as props, any idea can work around on this? I did make a conditional statement before return the jsx but still fail

[JeffreyHoDev]

Hi, I found out that it is due to mistake i made, shouldn't do normal assign operator for the array in the loop, it seems like it will not be accessible.

Anyway thanks a lot