[web] Partial data loss when getting over `250px` of height

[FacuM]

On the web, changing the height of the graph breaks the amount of displayed information from the data array.

This behaviour isn't observed within Expo Go on an Android device.

Here's the code for the broken component:

import { View } from "react-native";
import { useTheme } from "react-native-paper";

import { LineChart } from "react-native-gifted-charts";
import { useSafeAreaFrame } from "react-native-safe-area-context";
import { useState } from "react";

export default function Index() {
  const [ graphHeight, setGraphHeight ] = useState(0);

  console.log('graphHeight:', graphHeight);

  const { colors } = useTheme();

  const data = [
    {
      value: 50, 
      date: '20 Apr 2022',
      label: '20 Apr'
    },
    {
      value: 80,
      date: '20 Apr 2022',
      label: '20 Apr'
    },
    { value: 90 },
    { value: 70 }
  ];

  return (
    <>
      <View style={{ display: 'flex', flexGrow: 1 }} onLayout={event => setGraphHeight(event.nativeEvent.layout.height)}></View>
      <View style={{ position: 'absolute', height: graphHeight }}>
        <LineChart
          data={data}
          height={graphHeight - 52}
          initialSpacing={0}
          showXAxisIndices={true}
          adjustToWidth={true}
          textColor={colors.onBackground}
          rulesColor={colors.onBackground}
          dataPointsColor={colors.onBackground}
          stripColor={colors.onBackground}
          yAxisColor={colors.onBackground}
          xAxisColor={colors.onBackground}
          verticalLinesColor={colors.onBackground}
          showValuesAsDataPointsText={true}
          textShiftY={-12}
          textFontSize={16}
          yAxisTextStyle={{ color: colors.onBackground }}
          xAxisLabelTextStyle={{ color: colors.onBackground }}
          isAnimated={true}
          animateOnDataChange={true}
          color={colors.onBackground}
        />
      </View>
    </>
  );
}

Here's a screenshot from the web with a height of 250px:

And here's one when going with the full height of the container:

However, here's how it looks totally fine on a native device:

Please let me know if I missed any information to help when debugging the issue.

[Rouret]

Same issue, did you find a way to fix it? @FacuM

[FacuM]

Same issue, did you find a way to fix it? @FacuM

Nothing so far, I've paused this project for now though, I'm not in the mood to keep it up.

Hope the owner can get it sorted out so that I can keep using this library.