mobile-darmasaba/components/home/chartDokumenHome.tsx

import Styles from "@/constants/Styles";
import { Dimensions, Text, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";

export default function ChartDokumenHome() {
   const barData = [
      { value: 23, label: 'Gambar', frontColor: '#fac858' },
      { value: 12, label: 'Dokumen', frontColor: '#92cc76' },
   ];
   const width = Dimensions.get("window").width;

   return (
      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
         <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
         <BarChart
            showFractionalValues={false}
            showYAxisIndices
            noOfSections={4}
            maxValue={25}
            data={barData}
            isAnimated
            width={width - 140}
            barWidth={width * 0.25}
            renderTooltip={(item: any, index: any) => {
               return (
                  <View
                     style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: width * 0.25
                     }}>
                     <Text>{item.value}</Text>
                  </View>
               );
            }}
         />
      </View>
   )
}