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:
@@ -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} />
|
||||||
|
|||||||
Reference in New Issue
Block a user