Render better bar charts

[Hadionly]

Hey guys, I have a couple of issues I've been scratching my head over the last days:
1 - How can I have a consistent y-axis labels dynamically based on the data provided, that is even eg (2, 4, 6 or 5, 10, 15), must be on the negative too
2 - I don't why the origin is not zero (I want it to always be zero)
3 - the labels are all shifted down below the origin
4 - the tooltip is not render properly
5- Finally when there is only one or two elements the lines don't extend till the end of the view ( second screenshot)
Thank you for taking your time to help, I highly appreciate it 🙌💖

code snippet:

 const getStepvalue = (minValue, maxValue) => {
    if (minValue === maxValue) {
      let numberOfLabels = minValue < 0 ? 7 : 3;
      const interval = minValue / numberOfLabels;
      const stepValue = interval.toFixed(2); // Adjust the number of decimal places as needed
      return stepValue;
    }
    let numberOfLabels = minValue < 0 ? 7 : 3;
    const interval = (maxValue - minValue) / numberOfLabels;

    const stepValue = interval.toFixed(2); // Adjust the number of decimal places as needed

    return stepValue;
  };
  const maxValue = Math.max(...data.map((item) => item.value));
  const minValue = Math.min(...data.map((item) => item.value));
  const stepValue = getStepvalue(minValue, maxValue);

       <BarChart
          data={data}
          initialSpacing={30}
          xAxisLabelTextStyle={{
            color: COLORS.white,
            fontSize: 12,
          }}
          maxValue={maxValue * 1.2}
          mostNegativeValue={minValue < 0 ? minValue * 1.2 : 0}
          stepValue={stepValue}
          stepHeight={40}
          noOfSections={4}
          noOfSectionsBelowXAxis={minValue < 0 ? 3 : 0}
          barWidth={30}
          autoShiftLabels
          spacing={60}
          xAxisColor={COLORS.skyBase}
          yAxisColor={COLORS.dopeGray}
          yAxisTextStyle={{ color: COLORS.white }}
          formatYLabel={(label) => formatNumberWithPrefix(label, 0)}
          barBorderRadius={5}
          renderTooltip={(item, index) => {
            return (
              <View
                style={{
                  marginBottom: s(10),
                  backgroundColor: COLORS.white,
                  paddingHorizontal: 6,
                  paddingVertical: 4,
                  borderRadius: 4,
                }}>
                <Text>{item.tooltip}</Text>
              </View>
            );
          }}
        />

[Abhinandan-Kushwaha]

Hi @Hadionly
Here are solutions to some of your issues-

1. For y-axis labels, we have props like formatYLabel, yAxisLabelPrefix, yAxisLabelSuffix and finally yAxisLabelTexts
2. Your origin is not zero, because you are not following the relation- maxValue = noOfSections * stepValue; See the note under the docs here
3. This can be solved by point 2
4. Possibly solvable by point 2
5. You can set the width of the chart using the width prop.