Change color

components/charts/NamaBeasiswaPieChart.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<NamaBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -82,7 +82,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000',
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -175,14 +175,14 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
         </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={{...chartOptions, labels}}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>