Nightingale/Rose charts

• I have searched the issues of this repository and believe that this is not a duplicate. #1334 did cover this but was closed due to inactivity

What problem does this feature solve?

A Nightingale or Rose chart is a variant on a Pie chart. In a traditional Pie chart, the size of the angle changing relative to the value of the data point while the radius stays the same. In a Nightingale or Rose chart, the size of the angle stays the same but the radius changes relative to the value of the data point.

In recharts, this would equate to setting the “outer radius” of each Segment.

In chart.js this graph is called a Polar Area chart

What does the proposed API look like?

This could be achieved in many ways. Either with a new component usable instead of Pie in a PieChart, a new boolean property to Pie, or some way of allowing each Cell/Segment/data item to define its own outer radius (i.e. radiusKey or allowing Cell to take radius)

[dillonreedy]

@jscocozza so I added the 2nd and 3rd colored segment layers through using the innerRadius prop and a little calculation and the radial lines through using the <PolarGrid/> but yeah, look further into the labels for the radial and tick lines, it might be possible through <RadarChart/> or with a little calculation and the <Text/> component.

[dillonreedy]

I feel there’s a way to modify what’s here to get to what you want:

You’ll have to explore labelling, I know the <RadarChart/> component has good radial lines labelling and good tick labelling. So I’d explore that a little further, and how to adapt what’s in the codesandbox to be used with the RadarCharts labels.