Responsive pie chart with react-vis

Question

I'm reading the docs on flexible charts and trying to apply them to a pie chart:

import React from 'react'
import { RadialChart, FlexibleXYPlot } from 'react-vis'

const MyChart = ({data}) => (
  <div>
    <FlexibleXYPlot>
      <RadialChart
        data={data}
        colorType="literal"
      />
    </FlexibleXYPlot>
  </div>
)

But when rendering this, I get markup like this:

<div>
  <div style="width: 100%; height: 100%;">
    <div class="rv-xy-plot " style="width: 0px; height: 0px;">
    </div>
  </div>
</div>

As you can see, the dimensions of the rv-xy-plot element are explicitly set to 0px. What am I doing wrong? How do I create a responsive pie chart?

Answer 1

I was recently running into the same problem with a lot of the charts from this package. A work around I found is to use React-virtualized-auto-sizer. Essentially what it does is wrap components that require a width and height around it, then pass the width and height of the parent container (that the auto sizer is in). Here is an example:

<div style={{height:'100%',width:'100%'}} className={"mb-4"}>
<AutoSizer>
    {({ height, width }) => (
        <RadialChart
            data={this.state.myData}
            width={width}
            height={height}
            onValueMouseOver={this.handleMouseOver}
            className={"mb-4"}
            labelsAboveChildren={true}
        />
    )}
</AutoSizer>

So the autosizer is looking above it at the outer div, figuring out the height and width, then passing it to the chart.