CODEWITHSUNDEEP
cssreactjschartspie-chartrecharts
Harshal Wani
Harshal Wani

Reputation: 2349

Implement Circular progress bar using Recharts

I'm using recharts library for PieCharts.

With paddingAngle={0} able to remove padding angle but want to remove cell separator(white color).

Code:

const data = [
            { id: "1", name: "L1", value: 75 },
            { id: "2", name: "L2", value: 25 }
            ];

<PieChart width={50} height={50}>
  <text
    x={25}
    y={25}
    textAnchor="middle"
    dominantBaseline="middle"
  >
    25
  </text>
  <Pie
    data={data}
    dataKey="value"
    innerRadius="80%"
    outerRadius="100%"
    fill="#82ca9d"
    startAngle={90}
    endAngle={-270}
    paddingAngle={0}
    cornerRadius={5}
  >
    <Cell
      key="test"
      fill="#CCC"
    />
  </Pie>
</PieChart>

Current Looks like:

enter image description here

want to implement like this:

enter image description here

How to achieve this?

Thanks

Upvotes: 1

Views: 9103

Answers (2)

Harshal Wani
Harshal Wani

Reputation: 2349

Finally got the solution. Instead of doing the workaround with PieChart, would suggest using RadialBarChart

Solution:

const data = [
  { name: 'L1', value: 25 }
];

const circleSize = 30;

<RadialBarChart
  width={circleSize}
  height={circleSize}
  cx={circleSize / 2}
  cy={circleSize / 2}
  innerRadius={12}
  outerRadius={18}
  barSize={2}
  data={data}
  startAngle={90}
  endAngle={-270}
  >
  <PolarAngleAxis
  type="number"
  domain={[0, 100]}
  angleAxisId={0}
  tick={false}
  />
  <RadialBar
  background
  clockWise
  dataKey="value"
  cornerRadius={circleSize / 2}
  fill="#82ca9d"
  />
  <text
  x={circleSize / 2}
  y={circleSize / 2}
  textAnchor="middle"
  dominantBaseline="middle"
  className="progress-label"
  >
  25
  </text>
</RadialBarChart>

Upvotes: 6

CodeMeNatalie
CodeMeNatalie

Reputation: 134

From v.1.2.0 property blendStroke has been added to PieChart. So what you need to do is add it to your Pie component. I hope this will help you!

const data = [
  { id: "1", name: "L1", value: 75 },
  { id: "2", name: "L2", value: 25 }
];

<PieChart width={50} height={50}>
  <text
    x={25}
    y={25}
    textAnchor="middle"
    dominantBaseline="middle"
  >
    25
  </text>
  <Pie
    data={data}
    dataKey="value"
    innerRadius="80%"
    outerRadius="100%"
    fill="#82ca9d"
    startAngle={90}
    endAngle={-270}
    paddingAngle={0}
    blendStroke
  >
    <Cell
      key="test"
      fill="#CCC"
    />
  </Pie>
</PieChart>

Upvotes: 2

Related Questions