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