Adjust ExpenseChart label size

Modified the ExpenseChart component to ensure the labels on the pie chart have a consistent text size.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 12:00:28 +00:00
parent f935ae04e4
commit a24272023b

View File

@@ -27,7 +27,11 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
paddingAngle={5} paddingAngle={5}
dataKey="value" dataKey="value"
labelLine={false} labelLine={false}
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`} label={({ name, percent }) => (
<text className="text-sm" textAnchor="middle" style={{ fontSize: '12px' }}>
{`${name} ${(percent * 100).toFixed(0)}%`}
</text>
)}
> >
{data.map((entry, index) => ( {data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} /> <Cell key={`cell-${index}`} fill={entry.color} />