diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx index 135ce03..5d60d63 100644 --- a/src/components/ExpenseChart.tsx +++ b/src/components/ExpenseChart.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { PieChart, Pie, Cell, ResponsiveContainer, Label } from 'recharts'; +import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'; import { getCategoryColor } from '@/utils/categoryColorUtils'; interface ExpenseData { @@ -17,7 +17,7 @@ const ExpenseChart: React.FC = ({ data }) => { return (
- + = ({ data }) => { paddingAngle={5} dataKey="value" labelLine={true} - label={({ name, percent, x, y }) => { - // 좌표 조정으로 레이블 위치 최적화 - const radius = 90; // 레이블을 더 바깥쪽으로 배치 - const centerX = parseInt(x.toString()); - const centerY = parseInt(y.toString()); - - // 차트 중심으로부터의 각도 계산 - const angle = Math.atan2(centerY - 100, centerX - 100); - - // 레이블을 원 바깥으로 배치 - const labelX = 100 + Math.cos(angle) * radius; - const labelY = 100 + Math.sin(angle) * radius; - - return ( - - 100 ? "start" : "end"} - dominantBaseline="central" - fontSize={12} - > - {`${name} ${(percent * 100).toFixed(0)}%`} - - - ); - }} + label={({ name, percent }) => ( + `${name} ${(percent * 100).toFixed(0)}%` + )} + fontSize={12} > {data.map((entry, index) => (