[Question] - How can I add a top and bottom bar to my linechart?

[ishaanbuildsthings]

Thanks to the contributors of this library, it is the best line chart library I have found.

I am using a line chart, and noticed the line goes above the highest bin, and below the lowest bin. Below is a screenshot.

I would like to add an extra bar to the top, and bottom, using the same automatically calculated bucketing distance. How can I do this?

Initially I tried fiddling with gridMax and gridMin, but they didn't seem to be the solution, I would get weird amounts of ticks and misalignment between my y-axis and gridlines.

Below is my current code:

const NUMBER_OF_TICKS = 4;
const VERTICAL_INSET = {top: 10, bottom: 10};
const HORIZONTAL_INSET = {left: 10, right: 10};
const X_AXIS_MARGIN = {marginHorizontal: -10};

export default function Chart({labels}) {
  return (
    <Box row style={styles.root}>
      <YAxis
        numberOfTicks={NUMBER_OF_TICKS}
        data={chartData}
        contentInset={VERTICAL_INSET}
      />
      <Box flex={1} style={styles.chartAndX}>
        <LineChart
          style={{height: 300}}
          contentInset={VERTICAL_INSET}
          data={chartData}
          numberOfTicks={NUMBER_OF_TICKS}>
          <Grid />
        </LineChart>
        <XAxis
          style={X_AXIS_MARGIN}
          data={chartData}
          contentInset={HORIZONTAL_INSET}
        />
      </Box>
    </Box>
  );
}

I apologize if this issue has been addressed elsewhere, I couldn't find the solution.