Have you wrapped your chart in a responsive container?

Can you share your code?

PLEASE make sure you use proper MD formatting for code so that it's properly formatted.

You're not using ResponsiveContainer (did you click the link that @drj17 shared?). Additionally, you can clean up your code by using react-bootstrap as well:

<Col md={2} sm={3} xs{3}>
  <ResponsiveContainer height={150} width="100%">
    <PieChart>
      <Pie
        data={this.props.graphData.tech}
        dataKey='value'
        innerRadius={35}
        outerRadius={50} startAngle={90} endAngle={450}
      >
        {this.props.graphData.tech.map((entry, index) => (
          <Cell fill={COLORS[index % COLORS.length]} />\
        )}
      </Pie>
      <Tooltip />
    </PieChart>
  </ResponsiveContainer>
</Col>

In the future, I suggest you look through documentation and the examples to see how responsiveness is handled.

Please check my jsfiddle at #675 I have a similar issue.

@Mujtaba4ahmed

Also try using percentage instead of fixed numbers in innerRadius and outerRadius

This issue can be closed, PieChart is 100% responsive ??. Here's a stripped down working example:

const
 EXAMPLE_DATA
 =
 [

  {

    name
: 
'example1'
,

    value
: 
23.4
,

  }
,

  {

    name
: 
'example2'
,

    value
: 
76.6
,

  }
,

]
;


<
ResponsiveContainer
 width
=
"100%"
 height
=
{
154
}
>

  <
PieChart
>

    <
Pie
 data
=
{
EXAMPLE_DATA
}
 innerRadius
=
"90%"
 outerRadius
=
"100%"
 fill
=
"#ff0000"
 paddingAngle
=
{
5
}
 /
>

  <
/
PieChart
>

<
/
ResponsiveContainer
>

Resulting in the following:

When the parent container is <= 154px (in this case), you'll see the Pie chart begin to scale down:

This issue still pending PieChart is not responsive. @breadadams You use fixed height, width and height can not increase or decrease with responsive grid columns. So it is not not responsive

A css hotfix I'm using for this. The relevant part is the margin, padding and vertical centering. This keeps the chart height at 600px but works.

<Grid
        item
        xs={12}
        style={{
          height: "0",
          marginTop: "50%",
          paddingBottom: "50%",
          display: "flex",
          alignItems: "center"
        }}
      >
        <ResponsiveContainer width={"100%"} height={600}>
            ...
        </ResponsiveContainer>
</Grid>

Sorry for not handling your issue in time, please try the latest version. If the problem persists, please open a new issue according to the issue guide.

This is still an issue. The SVG is not scaling with its HTML container and is failing on unit tests reporting zero width and height. Responsive SVG is achieved by removing the SVG width and height attributes on the svg element and only specifying width and height within the viewBox attribute. A global CSS style of svg {width: 100%;height: auto;} does the rest.
Recharts currently produces absolutely positioned paths prefixed with M and suffixed with Z . The specs specify a lower case m and z for relative paths.
Because Recharts is not allowing SVG to scale as a whole, text elements don't scale.

@christiancho you were amazing save my day

Going to re-open this as it seems it was closed while still an issue

This is still an issue.

Any update on this?