diff --git a/components/home/chartDokumenHome.tsx b/components/home/chartDokumenHome.tsx
index 60ac76c..fa87790 100644
--- a/components/home/chartDokumenHome.tsx
+++ b/components/home/chartDokumenHome.tsx
@@ -21,16 +21,24 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
    const width = Dimensions.get("window").width;
 
    // TanStack Query for Document Chart data
-   const { data: chartData = [], isLoading } = useQuery({
+   const { data: chartData = [], isLoading, isFetching } = useQuery({
       queryKey: ['homeData', 'dokumen'],
       queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "dokumen", user: hasil })
-         return response.data.map((item: { color: any; label: any; value: any; }) => ({
-            frontColor: item.color,
-            label: item.label,
-            value: Number(item.value)
-         })) as Props
+         return response.data.map((item: { color: any; label: any; value: any; }) => {
+            const val = Number(item.value) || 0;
+            return {
+               frontColor: val > 0 ? (item.color || '#fac858') : 'transparent',
+               label: item.label,
+               value: val,
+               topLabelComponent: () => (
+                  <View style={{ marginBottom: 5 }}>
+                     <Text style={{ color: colors.text, fontSize: 12 }}>{val > 0 ? val : ""}</Text>
+                  </View>
+               )
+            }
+         }) as Props
       },
       enabled: !!token?.current,
       staleTime: 0,
@@ -39,19 +47,23 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
    // Derived state for maxValue
    const maxValue = useMemo(() => {
       const maxVal = chartData.reduce((max: number, obj: { value: number; }) => Math.max(max, obj.value), 0);
-      return maxVal > 0 ? Math.ceil(maxVal / 10) * 10 : 10;
+      // Adjust maxValue and intervals based on the data
+      if (maxVal === 0) return 10;
+      if (maxVal < 5) return 5;
+      return Math.ceil(maxVal / 10) * 10;
    }, [chartData]);
 
    return (
       <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
          {
-            isLoading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
+            isLoading || (refreshing && isFetching) ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
                :
                <BarChart
+                  key={JSON.stringify(chartData)}
                   showFractionalValues={false}
                   showYAxisIndices
-                  noOfSections={4}
+                  noOfSections={maxValue < 5 ? (maxValue === 0 ? 4 : maxValue) : 4}
                   maxValue={maxValue}
                   data={chartData}
                   isAnimated
@@ -59,18 +71,6 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
                   barWidth={width * 0.25}
                   yAxisTextStyle={{ color: colors.text }}
                   xAxisLabelTextStyle={{ color: colors.text }}
-                  renderTooltip={(item: any, index: any) => {
-                     return (
-                        <View
-                           style={{
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                              width: width * 0.25
-                           }}>
-                           <Text>{item.value}</Text>
-                        </View>
-                     );
-                  }}
                />
          }
       </View>