fix: prevent pie chart labels from being clipped

Move Fallgruppen names into a Legend below the chart instead of
inline labels that overflow the container. Reduce pie radius to
leave breathing room.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
CCS Admin 2026-02-24 09:13:00 +00:00
parent 5ee1cff0d6
commit f12f664ce5

View file

@ -173,12 +173,12 @@ export function DashboardPage() {
<Pie
data={fallgruppenData}
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={100}
cy="45%"
innerRadius={50}
outerRadius={85}
paddingAngle={3}
dataKey="value"
label={({ name, value }) => `${name}: ${value}`}
label={({ value }) => value}
>
{fallgruppenData.map((_, idx) => (
<Cell
@ -195,6 +195,14 @@ export function DashboardPage() {
color: 'var(--popover-foreground)',
}}
/>
<Legend
verticalAlign="bottom"
iconType="circle"
iconSize={10}
formatter={(value: string) => (
<span style={{ color: 'var(--foreground)', fontSize: '13px' }}>{value}</span>
)}
/>
</PieChart>
</ResponsiveContainer>
</CardContent>