Can I make a radial bar chart like this in Rechart? - reactjs

Question

I want to make a chart like this in Recharts.
They have a similar chart but the edges of it's lines are straight and not round like I need. Can it be configured?

Answer 1

Yeah we can make that double radial bar chart using recharts. This is react/ next js Component. You can modify Bar Radius, Inner radius. For Inner text there is a single number given from Recharts you can use Positioning for rendering that inner text and stylings.
import React from 'react';
import { RadialBarChart, PolarAngleAxis, RadialBar } from 'recharts';
const index = () => {
// Sample data
const data = [
{ name: 'A', x: 1, fill: 'green' },
{ name: 'B', x: 2, fill: 'yellow' },
// { name: 'C', x: 3, fill: 'aqua' },
// { name: 'D', x: 4, fill: 'blue' },
// { name: 'E', x: 5, fill: 'orange' },
// { name: 'F', x: 6, fill: 'red' },
// { name: 'G', x: 7, fill: 'black' },
// { name: 'H', x: 8, fill: 'purple' },
// { name: 'I', x: 9, fill: 'gray' },
];
return (
<RadialBarChart width={143} height={143} data={data}
// cx={30 / 2}
// cy={30 / 2}
innerRadius={25}
// outerRadius={18}
barSize={4}
startAngle={90}
endAngle={-270}>
<PolarAngleAxis
type="number"
domain={[0, 10]}
angleAxisId={0}
tick={false}
/>
<RadialBar
background
dataKey="value"
cornerRadius={30 / 2}
fill="#0BEFF2"
/>
<text
x={30 / 2}
y={33 / 2}
textAnchor="middle"
dominantBaseline="middle"
className="progress-label"
>
89
</text>
</RadialBarChart>
);
};
export default index;