From a24272023bc3315671de41801ff69de3943fa120 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 12:00:28 +0000
Subject: [PATCH] Adjust ExpenseChart label size

Modified the ExpenseChart component to ensure the labels on the pie chart have a consistent text size.
---
 src/components/ExpenseChart.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index 0450ab6..e67eaec 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -27,7 +27,11 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
             paddingAngle={5}
             dataKey="value"
             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) => (
               <Cell key={`cell-${index}`} fill={entry.color} />