How to set the percent of each RadialBar in RadialBarChart?

Do you want to request a feature or report a bug?

feature

What is the current behavior?

The code as below:

import  {ResponsiveContainer, RadialBar,RadialBarChart,Legend} from 'recharts';
const data = [
    { uv: 100, fill: '#ffff00' },
    { uv: 20, fill: '#83a6ed' },
    { uv: 30, fill: '#83a6ed' },
];
const SimpleRadialBarChart = () => {
        return (
                <ResponsiveContainer width={200} height={200}>
                <RadialBarChart className="radial" cx="50%" cy="50%" innerRadius='20%' outerRadius="80%" data={data}>
                    <RadialBar minAngle={15}  background clockWise={true} dataKey='uv'/>
                </RadialBarChart>
                </ResponsiveContainer>
        );
    };

export default SimpleRadialBarChart; result is as

What is the expected behavior?

how to set the percent of each RadialBar. If I want to set the percent of the yellow circle ,what can i do ?

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

“recharts”: “^1.0.0-beta.6”

[jefferymills]

@Pimaweichai In case you haven’t discovered yet here is how this can be done:

const data = [
    { uv: 100, fill: '#ffff00' },
    { uv: 20, fill: '#83a6ed' },
    { uv: 30, fill: '#83a6ed' },
];
<RadialBarChart width={200} height={200} data={data}>
    <PolarAngleAxis type="number" domain={[0, 300]} angleAxisId={0} tick={false} />
    <PolarAngleAxis type="number" domain={[0, 200]} angleAxisId={1} tick={false} />
    <PolarAngleAxis type="number" domain={[0, 100]} angleAxisId={2} tick={false} />
    <RadialBar background dataKey="uv" angleAxisId={0} data={[data[0]]} />
    <RadialBar background dataKey="uv" angleAxisId={1} data={[data[1]]} />
    <RadialBar background dataKey="uv" angleAxisId={2} data={[data[2]]} />
</RadialBarChart>

[svarlamov]

Adding on to @jefferymills for folks with n potential bars, that you can just pass the entire data array to the RadialBar as usual too. Solution looks like this:

const data = [
    { pct: 80, fill: '#ffff00' },
    { pct: 50, fill: '#ffff00' },
    { pct: 70, fill: '#ffff00' },
];
<RadialBarChart width={200} height={200} data={data}>
    <PolarAngleAxis type="number" domain={[0, 100]} dataKey={'pct'} angleAxisId={0} tick={false} />
    <RadialBar background dataKey="pct" angleAxisId={0} data={data} />
</RadialBarChart>