graph works

components/stats/Graph.tsx

@@ -1,35 +1,29 @@
-import { useEffect } from "react";
+import { Dimensions, View } from "react-native";
 import { PieChart } from "react-native-chart-kit";
+import { useTheme } from "../../app/contexts/ThemeContext";
 import useFetch from "../../hooks/useFetch";
 
 const Graph = () => {
+    const {colors} = useTheme();
 
-    const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.name AS name, c.color AS color, SUM(e.amount) as total FROM category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []});
-
-    useEffect(() => {
-        console.log(data);
-    }, [data])
+    const {data} = useFetch({sql: "SELECT c.name AS name, c.color AS color, SUM(e.amount) as total FROM category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []});
+    const acctual_data = data.map(item => ({...item, legendFontColor: colors.primaryText, legendFontSize: 14}));
  
     return (
+        <View style={{backgroundColor: colors.backgroundColor, borderRadius: 10, margin: 10}}>
         <PieChart
-          data={data}
-          width={333}
-          height={333}
+          data={acctual_data}
+          width={Dimensions.get("window").width}
+          height={240}
           chartConfig={{
-            backgroundColor: '#e26a00',
-            backgroundGradientFrom: '#fb8c00',
-            backgroundGradientTo: '#ffa726',
-            decimalPlaces: 2, // optional, defaults to 2dp
             color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
-            style: {
-              borderRadius: 16
-            }
           }}
+          backgroundColor="transparent"
           accessor="total"
-          backgroundColor="red"
           paddingLeft="15"
-          absolute
+          avoidFalseZero={true}
         />
+        </View>
     );
 }