Horizontal Bar Chart does not properly fit parent container width and leaves empty space below

[buildtheui]

When I create a Bar Chart horizontally, the chart does not take up its parent's width; it creates an extra empty height space below the chart.

The only workaround I found, and it is kind of clunky, is to get the parent's width with onLayout and add it to the BarChart's width property. To "remove" the below empty height, I have to add a fixed negative number xAxisLabelsHeight because what I saw from the code internally, it adds a negative marginBottom. The problem with this approach is that for different screens, I have to change this value so that the chart is not out of the container.

Is there a way to make it work in horizontal bar charts?

this is my code

  const [viewWidth, setViewWidth] = useState<number>(0);

  const handleViewLayout = (event: LayoutChangeEvent) => {
    const { width } = event.nativeEvent.layout;
    setViewWidth(width);
  };

  const calcChartHeight = (width: number) => {
        if (width < 350) {
          return -110;
        }

        if (width < 325) {
          return -95;
        }

        return -155;
      };
...

     <BarChart
        horizontal
        isAnimated
         // workaround to adjust chart height to fit the container
        width={Math.min(viewWidth - 120, 268)}
        barWidth={22}
        noOfSections={5}
        barBorderRadius={4}
        xAxisLabelsVerticalShift={36}
        yAxisTextStyle={{ color: "black" }}
        xAxisLabelTextStyle={{
          color: "black",
          width: 80,
          fontSize: 12,
        }}
        // workaround to adjust chart height to fit the container
        xAxisLabelsHeight={calcChartHeight(viewWidth)}
        shiftY={-40}
        data={[
          {
            value: countOne,
            label: "Data 1",
            frontColor: "red",
            topLabelComponent: () => <TopLabelComponent value={countOne} />,
          },
          {
            value: countTwo,
            label: "Data 2",
            frontColor: "green",
            topLabelComponent: () => <TopLabelComponent value={countTwo} />,
          },
        ]}
        yAxisThickness={0}
        xAxisThickness={0}
      />

      ...

[Abhinandan-Kushwaha]

Hi @buildtheui This can be solved by adding a <View> around the component and giving appropriate height to the in its style.

[buildtheui]

@Abhinandan-Kushwaha This does not solve the problem, actually this was my first approach and it has the follow problems:

1. you've got to statically define the container height. This does not happen with vertical BarCharts, as they take up the available parent component height.
2. If we follow your recommendation the empty space now is at the top of the element. as shown on the following image

Part of the empty space mention in number 2, it's because I need to increase the xAxisLabelsVerticalShift, so labels don't overlap the horizontal bars, and for some reason whenever I increase this number the top empty space increases too.