Friday, 22 March 2019

Responsive pie chart with react-vis

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?



from Responsive pie chart with react-vis

No comments:

Post a Comment