cally/components/pages/todos/user-chores/UserChart.tsx

import React, {useEffect, useState} from "react";
import { BarChart } from "react-native-gifted-charts";
import {UserProfile} from "@/hooks/firebase/types/profileTypes";

const UserChart = ({ profileData }: {
  profileData: UserProfile | undefined;
}) => {
  const [dataList, setDataList] = useState([]);

  const barColor = "#05a8b6";
  useEffect(() => {
    let weeklyDayPoints = profileData?.weeklyDayPoints || {
      Monday: 0,
      Tuesday: 0,
      Wednesday: 0,
      Thursday: 0,
      Friday: 0,
      Saturday: 0,
      Sunday: 0,
    };

    const data = Object.keys(weeklyDayPoints).map((day) => {
      const value = weeklyDayPoints[day];

      return {
        value: value,
        frontColor: barColor,
        label: day,
      }
    });
    setDataList(data);
  }, [])

  return (
    <BarChart
      data={dataList}
      width={255}
      height={150} // Height of the chart
      barWidth={20} // Width of each bar
      noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
      maxValue={1000} // Max value on the chart
      stepValue={200} // Step size for horizontal lines
      yAxisThickness={0} // Hide the Y-axis line
      // yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
      hideRules={false} // Show the horizontal lines
      rulesColor="#dadada" // Color for the horizontal lines
      barBorderTopLeftRadius={5} // Round the bars
      barBorderTopRightRadius={5} // Round the bars
      spacing={16}
      disableScroll
    />
  );
};

export default UserChart;