React js: Nivo Pie chart not showing up

Question

i'm working in react js with nivo pie chart i'm using the exact code as provided in the documentation but when i start server the chart is not rendered and it displays empty page and there is no error in the console and server terminal.

code:

import React from 'react';
import { render } from 'react-dom'
import { ResponsivePie } from '@nivo/pie'


var data = [
    {
        "id": "rust",
        "label": "rust",
        "value": 576,
        "color": "hsl(167, 70%, 50%)"
    },
    {
        "id": "javascript",
        "label": "javascript",
        "value": 129,
        "color": "hsl(119, 70%, 50%)"
    },
    {
        "id": "java",
        "label": "java",
        "value": 422,
        "color": "hsl(253, 70%, 50%)"
    },
    {
        "id": "hack",
        "label": "hack",
        "value": 71,
        "color": "hsl(307, 70%, 50%)"
    },
    {
        "id": "erlang",
        "label": "erlang",
        "value": 354,
        "color": "hsl(187, 70%, 50%)"
    }
];
render((
    <ResponsivePie
        data={data}
        margin={{
            "top": 40,
            "right": 80,
            "bottom": 80,
            "left": 80
        }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        colors="nivo"
        colorBy="id"
        borderWidth={1}
        borderColor="inherit:darker(0.2)"
        radialLabelsSkipAngle={10}
        radialLabelsTextXOffset={6}
        radialLabelsTextColor="#333333"
        radialLabelsLinkOffset={0}
        radialLabelsLinkDiagonalLength={16}
        radialLabelsLinkHorizontalLength={24}
        radialLabelsLinkStrokeWidth={1}
        radialLabelsLinkColor="inherit"
        slicesLabelsSkipAngle={10}
        slicesLabelsTextColor="#333333"
        animate={true}
        motionStiffness={90}
        motionDamping={15}
        defs={[
            {
                "id": "dots",
                "type": "patternDots",
                "background": "inherit",
                "color": "rgba(255, 255, 255, 0.3)",
                "size": 4,
                "padding": 1,
                "stagger": true
            },
            {
                "id": "lines",
                "type": "patternLines",
                "background": "inherit",
                "color": "rgba(255, 255, 255, 0.3)",
                "rotation": -45,
                "lineWidth": 6,
                "spacing": 10
            }
        ]}
        fill={[
            {
                "match": {
                    "id": "ruby"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "c"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "go"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "python"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "scala"
                },
                "id": "lines"
            },
            {
                "match": {
                    "id": "lisp"
                },
                "id": "lines"
            },
            {
                "match": {
                    "id": "elixir"
                },
                "id": "lines"
            },
            {
                "match": {
                    "id": "javascript"
                },
                "id": "lines"
            }
        ]}
        legends={[
            {
                "anchor": "bottom",
                "direction": "row",
                "translateY": 56,
                "itemWidth": 100,
                "itemHeight": 18,
                "itemTextColor": "#999",
                "symbolSize": 18,
                "symbolShape": "circle",
                "effects": [
                    {
                        "on": "hover",
                        "style": {
                            "itemTextColor": "#000"
                        }
                    }
                ]
            }
        ]}
    />
), document.getElementById('root'));

this is first time i'm working on charts in react js. What i'm doing wrong any help will be appreciated. Thanks.

Answer 1

I think you maybe forget to set the height of the father component of ResponsivePie.Here is the explain in the document

---

make sure parent container have a defined height when using responsive component,otherwise height will be 0 and no chart will be rendered

like this:

<div style={{height: 200}}>
   <ResponsivePie .../>
</div>