Not able to create two Y axes with the same scale and number of ticks

I’m creating a stacked chart where bars represent electricity consumption and lines represent outside temperature:

I’m trying to achieve a chart where the temperature labels would align with the grid lines rendered by the consumption data as they do on the Y axis on the left. But as it can be seen from the pic above, both the number of ticks and their position is different from the ones in the consumption axis. This is something that seems like a bug, as I’m using the same value (5) for the numberOfTicks prop. But is this just a feature that’s caused by the underlying d3 library? Please help me to understand how the Y axis scaling works 🙏 😄

Below a simplified code:

<View
  style={{
    height: 300,
    flexDirection: 'row',
  }}>
  <YAxis
    data={consumptionData}
    style={{ marginBottom: 20 }}
    numberOfTicks={5}
  />
  <View style={{ flex: 1 }}>
    <BarChart
      style={{ flex: 1 }}
      numberOfTicks={5}
      data={consumptionData}>
      <Grid />
    </BarChart>
    <LineChart
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 20,
      }}
      data={temperatureData}
      numberOfTicks={5}
    />
    <XAxis style={{ height: 20 }} data={consumptionData} />
  </View>
  <YAxis
    data={temperatureData}
    style={{ marginBottom: 20 }}
    numberOfTicks={5}
  />
</View>

[ronkot]

Thanks @ajacquierbret for insights and tips and @JesperLekland for your great work with this library. And what a coincidence that we’re building same kind of charts 😄

I’ll try to play with the parameters and also try the axis label formatting trick. Maybe I’ll also have to study a bit d3 😬 😅

[ronkot]

Back from the holidays… I’ll close this issue for now and try these tips when I’ll have again time to investigate this issue. Once again, thanks for help and this great library 💎