I am working on a React application where I need to display data using various graphs. After evaluating several options, I chose the react-native-gifted-charts library for its features and ease of use.

In my application, data for the graphs is fetched via an API call. Once the data is retrieved, it is used to render the graphs, primarily using the Bar chart component from the library.

While the Bar chart works well for most cases, I’ve encountered issues when dealing with negative data or other unexplained anomalies. These issues result in unexpected styling changes in the graph, which I haven’t been able to diagnose or resolve.

For instance, here is a correctly displayed graph showing 24-hour data for a specific day:

However, on another day, the graph displays incorrectly:

this is how I my code for the bar chart:

<BarChart
          barWidth={13}
          noOfSections={5}
          barBorderRadius={2}
          frontColor="#FF6B00"
          data={mapFinancialSavings(data, selectedOption)}
          yAxisThickness={0}
          xAxisThickness={0}
          spacing={12}
          xAxisLabelTextStyle={{
            fontSize: 10,
            fontFamily: "Goga-Bold",
          }}
          roundToDigits={2}
          yAxisTextStyle={{
            left: 0,
            fontSize: 8,
            color: "#FF6B00",
            fontFamily: "Goga-Bold",
          }}
          yAxisLabelPrefix="€ "
          yAxisLabelTexts={["0", "100", "500", "1000", "10000", "25000"]}
          initialSpacing={5}
          showGradient={true}
          rulesThickness={0}
          formatYLabel={formatYLabel}
          gradientColor={"#FF6B00"}
        />



const formatYLabel = (value) => {
    if (value === "0") return "0";
    if (value === "100") return "100";
    if (value === "500") return "500";
    if (value === "1000") return "1K";
    if (value === "10000") return "10K";
    if (value === "25000") return "25K";
    return value;
  };

and this function maps the data and creates the label for the bar chart:

 function mapFinancialSavings(data, selectedOption) {
        if (selectedOption === "day") {
          return data.map((entry) => {
            const hour = new Date(entry.time_stamp).getUTCHours();
            return {
              value: entry.solar_savings.financial,
              label: hour,
            };
          });
        }
....
}

I would appreciate any insights or suggestions on why these issues might occur and how to address them.