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.

Answer 1

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.