I developed an half donut pie chart but i could not add red circle to the point 2 pies touch each other
I need to add a red circle white bordered in pic below.
this is my component
import {
PieChart,
Pie,
Sector,
Cell,
ResponsiveContainer,
Label,
} from "recharts";
function Gauge() {
const data = [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 200 },
];
const percentage = (
(data[0].value / (data[0].value + data[1].value)) *
100
).toFixed(0);
const COLORS = ["#E8333E", "#F7B9BD"];
const startAngle = 180;
const endAngle = 0;
const totalValue = data.reduce((acc, item) => acc + item.value, 0);
const firstSegmentValue = data[0].value;
const firstSegmentPercentage = firstSegmentValue / totalValue;
const firstSegmentEndAngle = startAngle - (startAngle - endAngle) * firstSegmentPercentage;
const midpointAngle = firstSegmentEndAngle - (firstSegmentEndAngle - endAngle) / 2;
const radius = 70;
// Calculate position for the circle
const cx = 100 + radius * Math.cos(midpointAngle * Math.PI / 180);
const cy = 100 - radius * Math.sin(midpointAngle * Math.PI / 180);
return (
<PieChart width={800} height={400}>
<Pie
data={data}
cx={100}
cy={100}
startAngle={180}
endAngle={0}
innerRadius={60}
outerRadius={80}
fill="#8884d8"
paddingAngle={0}
dataKey="value"
cornerRadius={6}
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
<Label
value={`${percentage}%`}
position="center"
style={{ fontSize: "30px", fontWeight: "700" }}
/>
</Pie>
<circle
cx={cx}
cy={cy}
r={6}
fill="#E8333E"
stroke="white"
strokeWidth="3"
/>
</PieChart>
);
}
export default Gauge;
I tried to use <circle> but could not calculate its x and y values. circle places a point out of context
this is the current case
this is what i wanna have