React-Native-SVG-Charts Y-Axis Ticks

Question

I'm trying to get this line chart to scale properly and I'm unable to get the YAxis to line up with the ticks on the LineChart. I've spent a few days looking at this and the only info I've been able to find is that I need to ensure that the numberOfTicks prop lines up between the YAxis Component and the LineChart Component. It's receiving that from a var so it's absolutely the same value. If there's any more info you need I'll do my best to get it to you by updating this post.

renders 10 ticks on line chart regardless of what value is passed, yAxis renders properly

update: 5 ticks and below change the number of ticks but anything above that doesn't change it from 10

This shows the ticks in black, as well as the YAxis

Notes:

• Using Var to hold numOfTicks

• Using Expo

Package:

• react-native-svg-charts

Code:

      <YAxis
        data={yIndex}
        contentInset={{ top: 10, bottom: 30 }}
        svg={{
          fill: "white",
          fontSize: 10,
        }}
        formatLabel={(value) => `$${value}K-`}
        numberOfTicks={numYIndex}
      />
      <View style={{ width: "90%" }}>
        <LineChart
          style={{
            flex: 1,
            borderWidth: 1,
            borderColor: "white",
            borderTopWidth: 0,
            borderRightWidth: 0
          }}
          data={this.state.data}
          contentInset={{ top: 10, bottom: 30 }}
          numberOfTicks={numYIndex}
          gridMin={0}
        >
          <Grid />
          {/* {this.state.data.map((dataPoint, index) => {
            return <Tooltip index={index} />;
          })} */}
        </LineChart>
        <XAxis
            style={{
            width: "100%",
            borderTopWidth: 1,
            borderColor: "white",
          }}
          data={this.state.keys}
          formatLabel={(value, index) => value}
          contentInset={{ left: 10, right: 10 }}
          svg={{ fontSize: 10, fill: "white" }}
        />
      </View>