CODEWITHSUNDEEP
reactjspie-chartrecharts
wariows
wariows

Reputation: 56

Unable to make Gauge chart (using Recharts Pie) fit the container

I have a basic Gauge chart (see below) component that renders a PieChart with startAngle={180} and endAngle={0}, but I'm unable to make it fit the container...

How it looks like right now:

enter image description here

How it's supposed to look like:

enter image description here

Here is a demo of a basic version: https://codesandbox.io/s/recharts-playground-3zibx

Upvotes: 1

Views: 4426

Answers (2)

opalis
opalis

Reputation: 11

Use the cy props and assign value in percentage. Ex. cy={'70%'}.

<div style={{ width: 500, height: 260, border: "1px solid black" }}>
  <PieChart height={260} width={500}>
    <Pie startAngle={180}
         endAngle={0}
         innerRadius="55%"
         data={data}
         dataKey="value"
         labelLine={false}
         blendStroke
         isAnimationActive={false}
         cy={"70%"}>
      <Cell fill="#000" />
      <Cell fill="#eaeaea" />
    </Pie>
    </PieChart>
</div>

Upvotes: 1

MohammadAmin Mohammadi
MohammadAmin Mohammadi

Reputation: 1211

You can use margin top and bottom. For example for (width:500, height: 260) you should set (top:760, bottom: 500):

To use full width and stick to bottom:

Top = Width + Height, Bottom = Width

<div style={{ width: 500, height: 260, border: "1px solid black" }}>
      <PieChart height={260} width={500} margin={{ top: 760, bottom: 500 }}>
        <Pie
          startAngle={180}
          endAngle={0}
          innerRadius="56%"
          data={data}
          dataKey="value"
          labelLine={false}
          blendStroke
          isAnimationActive={false}
        >
          <Cell fill="#000" />
          <Cell fill="#eaeaea" />
        </Pie>
      </PieChart>
    </div>

Upvotes: 0

Related Questions