Nivo: Bubble chart example from nivo rocks not rendering anything?

[BhavyaLight]

I installed nivo/circle-packaging followed by loadesh due to missing dependency.

Then I simply created a component for Responsive Bubble Chart from nivo.rocks using the same sample data and code. Nothing is rendering on the screen, however.

Sometimes, I get this error:
Cannot read property 'value' of undefined
TypeError: Cannot read property 'value' of undefined
at hierarchy (http://localhost:3000/_next/1514696593619/page/index.js:39545:22)
at http://localhost:3000/_next/1514696593619/page/index.js:91408:116
at new WithPropsOnChange (http://localhost:3000/_next/1514696593619/page/index.js:15642:161)
at constructClassInstance (http://localhost:3000/_next/1514696593619/commons.js:6361:20)
at updateClassComponent (http://localhost:3000/_next/1514696593619/commons.js:7845:9)
at beginWork (http://localhost:3000/_next/1514696593619/commons.js:8231:16)
at performUnitOfWork (http://localhost:3000/_next/1514696593619/commons.js:10230:16)
at workLoop (http://localhost:3000/_next/1514696593619/commons.js:10294:26)
at HTMLUnknownElement.callCallback (http://localhost:3000/_next/1514696593619/commons.js:548:14)
at Object.invokeGuardedCallbackDev (http://localhost:3000/_next/1514696593619/commons.js:587:16)

[uqe]

Same for ResponsivePie. Using the sample data and code rendering nothing.

[BhavyaLight]

I released there was an error in the documentation on nivo.rocks. The 'data' field needs to be replaced with 'root' field

render((
    <ResponsiveBubble
        data={/* see data tab */} //This should be replaces with root={ your data }
        margin={{
            "top": 20,
            "right": 20,
            "bottom": 20,
            "left": 20
        }}
        identity="name"
        value="loc"
        colors="nivo"
        colorBy="depth"
        padding={6}
        labelTextColor="inherit:darker(0.8)"
        borderWidth={2}
        defs={[
            {
                "id": "lines",
                "type": "patternLines",
                "background": "none",
                "color": "inherit",
                "rotation": -45,
                "lineWidth": 5,
                "spacing": 8
            }
        ]}
        fill={[
            {
                "match": {
                    "depth": 1
                },
                "id": "lines"
            }
        ]}
        animate={true}
        motionStiffness={90}
        motionDamping={12}
    />
), document.getElementById('chart'))

This should make it work

[kevinahuber]

Even with replacing data with root, this does not work for me. On v0.33.0

[BhavyaLight]

Try below:
Define a wrapper div over your BubbleGraph with className="App"
Also add this css:

                    .App {
                        position: fixed;
                        top: 10px;
                        right: 0;
                        bottom: 0;
                        left: 15%;
                        height: 100%;
                        width: 100%;
                        z-index: 100;
                    }

[ellipticaldoor]

Same result here but with ResponsiveLine, I tried the div wrapper with className="App" but same result.

[markj-]

I had this issue until I set a fixed height on the wrapper div. Using 100% as the height doesn't fix it.

[StephenHaney]

I ran into the same thing. The parent container needs to have an explicit height.

It would be cool if there was an option to have the chart scale to the width of its parent and expand vertically to fill the amount of space it needs -- aligning more with how other HTML elements work responsively.

[plouc]

I've fixed the examples which were missing some required props and added a comment for each responsive example regarding required parent height.

[andrewnicolalde]

@plouc
There is still a discrepancy in the documentation on http://nivo.rocks/bubble/
data={/* see data tab */}
should become
root={/* see data tab */}