Streaming data line chart

Question

I am attempting to chart values that are streaming in from a connected BLE device. Performance of this is incredible as compared to other options, but I'm looking for the line to start to scroll horizontally once it reaches a certain point (say 20 entries). Instead, the chart keeps getting narrower and narrower as it continues to add points to the chart. I've been looking for a way to do this but haven't found any good examples. Admittedly I am quite new to Skia.

Background Info/Attempts

This is my current chart component:

import { CartesianChart, Line } from 'victory-native'
import prompt from '@assets/fonts/Prompt-Regular.ttf'
import { useFont } from '@shopify/react-native-skia'

const GravityChart = ({ gravityReadings }) => {
  const font = useFont(prompt, 6)
  
  return (
    <View style={{ height: 300 }}>
      <Text>{gravityReadings.length}</Text>

      <CartesianChart
        data={gravityReadings}
        xKey='time'
        yKeys={['x', 'y', 'z']}
        axisOptions={{
          tickCount: { x: 10, y: 20 },
          font,
          formatXLabel: (value = '') => {
            return value
          },
        }}
        domain={{ y: [-10, 10] }}
      >
        {({ points, chartBounds }) => {
          return (
            <>
              <Line points={points.x} color='red' strokeWidth={1} />
              <Line points={points.y} color='green' strokeWidth={1} />
              <Line points={points.z} color='blue' strokeWidth={1} />
            </>
          )
        }}
      </CartesianChart>
    </View>
  )
}

export default GravityChart

This is a sample of the data. A new entry in the array gets added to the end every 20ms

  { time: '54:35:47', 
	  x: 0, 
	  y: 0, 
	  z: 0 },
  {
    time: '54:39:313',
    x: 0.46073418855667114,
    y: 0.7824550271034241,
    z: 9.76445198059082,
  },
  {
    time: '54:39:443',
    x: 0.5134066343307495,
    y: 0.8420107960700989,
    z: 9.756820678710938,
  },
  {
    time: '54:39:539',
    x: 0.5569511651992798,
    y: 0.9157821536064148,
    z: 9.747842788696289,
  },
  {
    time: '54:39:619',
    x: 0.618452250957489,
    y: 0.9852139949798584,
    z: 9.737367630004883,
  }
]

Any help is greatly appreciated!