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

import React from "react";
import { View } from "react-native";
import { BarChart } from "react-native-gifted-charts";

const UserChart = () => {
    const barColor = "#05a8b6"
  const data = [
    {
      value: 290, // Direct value of the bar
      frontColor: barColor, // Color of the bar
      label: "M",
    },
    {
      value: 190,
      frontColor: barColor,
      label: "Tu",
    },
    {
      value: 210,
      frontColor: barColor,
      label: "W",
    },
    {
      value: 410,
      frontColor: barColor,
      label: "Th",
    },
    {
      value: 220,
      frontColor: barColor,
      label: "F",
    },
    {
      value: 160,
      frontColor: barColor,
      label: "Sa",
    },
    {
      value: 160,
      frontColor: barColor,
      label: "Su",
    },
  ];

  return (
    <BarChart
      data={data}
      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;