How to join after cornerRadius is provided for piecharts in recharts

Question

I am using recharts and I am trying to create a pie chart with only the radius at the edges of the chart. What I get is the following. Similar to that in this fiddle.

<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>

    <Pie
      data={data} 
      cx={420} 
      cy={200} 
      startAngle={180}
      endAngle={0}
      cornerRadius={40}
      innerRadius={60}
      outerRadius={80} 
      data={data}
     fill="#8884d8"
    />
  </PieChart>

As you can see that the corner radius is added to each of the data elements. What is want is something like the image below. (Sorry for my bad editing skills)

Is something like this possible in recharts?

If not something like having a total value could also work for me. What I mean is that let's say the total value to be shown in the chart is 100 and the data I provide is 50. Then 50% of the data is shown in the chart as some color and the reset 50% is greyed out.

score 4 · Answer 1 · answered Nov 23 '19 at 15:36

4

There is one possible way of doing it as follows, You can pass a prop named as paddingAngle={0} to the PieChart component. Find the code below.

<Pie
      data={data} 
      cx={120} 
      cy={200} 
      innerRadius={60}
      outerRadius={80} 
      fill="#8884d8"
      paddingAngle={0}
    >
        {
        data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
      }
    </Pie>

The results you will achieve will be like shown in image below enter image description here

Source fiddle: https://jsfiddle.net/vkpwm2st/

answered Nov 23 '19 at 15:36

developerKumar

1,706
10
14

Thanks for the answer. But i only needed a semi circle not a full circle. – Sagar Acharya Nov 24 '19 at 04:02
1

Use below code to get Semi Circle { data.map((entry, index) => ) } – developerKumar Nov 24 '19 at 04:04
Thanks for the response. But looks like this does not have have the rounded corners at the edges like that in the picture above. I just need the rounded corners at the edges. – Sagar Acharya Nov 24 '19 at 04:46
1

You can simply add paddingAngle={0} prop to your shared component in question. – developerKumar Nov 24 '19 at 04:47
1

Okay i just tried the solution in this fiddle. https://jsfiddle.net/ktbp6gr5/ . Can you please edit it. – Sagar Acharya Nov 24 '19 at 04:49
Visit: https://jsfiddle.net/jordc7xq/ I have edited the source code there as you asked, Now you can give paddingAngle prop in negative to overlap the pie chart. – developerKumar Nov 24 '19 at 04:53
Thanks for the response but is there no way to remove the cornerRadius completely. The overlap really doesnot look nice. – Sagar Acharya Nov 24 '19 at 05:02
You can set cornerRadius={0} – developerKumar Nov 24 '19 at 05:07
But that will remove the corner radius from the edges as well. I just need the corner radius at the edges. – Sagar Acharya Nov 24 '19 at 05:09

Sunil Chaudhary · Accepted Answer · 2019-12-09T10:47:38.753

There is a work around for this and it will help you out. I will suggest you to create 2 Pies: one with rounded corners and one with pointed corners. And rest all data same

for the pointed corners, make their colour transparent except for index 0 and length - 1
for the rounded corners, do the reverse

You will get this kind of output:

Here is the JS fiddle for the same: https://jsfiddle.net/kmfby50o/

Visually you will see what you want. And for the functionality like onClick etc, apply that to second <Pie>. Since it overlaps the first one, that will also be taken care of.

const { PieChart, Pie, Sector, Cell } = Recharts;
const data = [{ name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 }, { name: 'Group D', value: 200 }];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const RADIAN = Math.PI / 180;

const SimplePieChart = React.createClass({
    render() {
        return (
            <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>

                <Pie
                    data={data}
                    cx={420}
                    cy={200}
                    startAngle={180}
                    endAngle={0}
                    cornerRadius={40}
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8"
                    paddingAngle={-5}
                >
                    {
                        data.map((entry, index) => <Cell fill={index === 0 || index === data.length - 1 ? COLORS[index % COLORS.length] : 'transparent'} />)
                    }
                </Pie>
                <Pie
                    data={data}
                    cx={420}
                    cy={200}
                    startAngle={180}
                    endAngle={0}
                    cornerRadius={0}
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8"
                >
                    {
                        data.map((entry, index) => <Cell fill={index === 0 || index === data.length - 1 ? 'transparent' : COLORS[index % COLORS.length]} />)
                    }
                </Pie>
            </PieChart>
        );
    }
})

ReactDOM.render(
    <SimplePieChart />,
    document.getElementById('container')
);

Hope it helps. Revert for any doubts.

Thank you very much @Sunil. I just had one question and I will accept the answer. Can the curve at the orange section be removed? — Sagar Acharya, Dec 11 '19 at 09:32
The slight curve between orange and yellow, that one? Yes! In the 1st ``, there is `paddingAngle={-5}` make it to `-10` or `-15` and you will get the desired effect — Sunil Chaudhary, Dec 11 '19 at 10:05
One question I had is that is it possible to add a single tooltip to the pie chart. I mean that a single tooltip needs to be shown for the entire pie chart and the tooltip needs to follow the mouse pointer. I will be happy to ask a new question if you want. — Sagar Acharya, Dec 11 '19 at 11:19
One more question. Looks like this solution does not work if there are just 2 data points. I tried doing so and the edges still seemed to curve — Sagar Acharya, Dec 11 '19 at 11:45
For tooltip, I am not sure as of now, will post here if I get something relevant (or you can try posting new question so someone else might be able to help you out). You can try wrapping whole chart in div with title as given in [this example](https://stackoverflow.com/a/7117107/6487887). This will give you native tooltip — Sunil Chaudhary, Dec 11 '19 at 12:08
No worries sunil. I think i will just break down the largest section into two. so there will be 3 sections and there seems to be no problem when there are 3 sections. — Sagar Acharya, Dec 11 '19 at 12:56
And it seems that you can pass stroke property to the `Cell`. If stroke and fill are same there will be no gap between the two and they will seem one. — Sagar Acharya, Dec 11 '19 at 12:56
I dont think the tootltip solution with the div will work. I just need the tooltip over the chart. Thanks i will try to research for this a little bit. — Sagar Acharya, Dec 11 '19 at 12:58

score 0 · Answer 3 · answered Nov 06 '22 at 04:43

The answer is quite simple. Just set the paddingAngle attribute to a negative value like so:

<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>

    <Pie
      data={data} 
      cx={420} 
      cy={200} 
      startAngle={180}
      endAngle={0}
      cornerRadius={40}
      innerRadius={60}
      outerRadius={80} 
      data={data}
      paddingAngle={-20}
     fill="#8884d8"
    />
</PieChart>

score 0 · Answer 4 · answered Feb 24 '23 at 11:08

0

Instead of using Pie chart you should use Radial bar chart provided you are using only one sector for your pie

answered Feb 24 '23 at 11:08

anonymous

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 01 '23 at 22:10

How to join after cornerRadius is provided for piecharts in recharts

4 Answers4