From c1c87da6233836ee176a77b61254eab8e537f9a9 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 23 Apr 2026 13:32:20 +0700
Subject: [PATCH] feat: add LabelList to pie chart to display category names

---
 resources/js/components/charts/pie-chart.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/charts/pie-chart.tsx b/resources/js/components/charts/pie-chart.tsx
index b4980d7..a1b8fa6 100644
--- a/resources/js/components/charts/pie-chart.tsx
+++ b/resources/js/components/charts/pie-chart.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useMemo } from "react"
-import { Pie, PieChart } from "recharts"
+import { LabelList, Pie, PieChart } from "recharts"
 
 import {
     Card,
@@ -71,7 +71,14 @@ export const CustomPieChart = React.memo(function CustomPieChart({
                             dataKey="total"
                             nameKey="name"
                             label
-                        />
+                        >
+                            <LabelList
+                                dataKey="name"
+                                className="fill-background font-medium"
+                                stroke="none"
+                                fontSize={12}
+                            />
+                        </Pie>
                     </PieChart>
                 </ChartContainer>
             </CardContent>