React js: Nivo Pie chart not showing up - reactjs

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>