Streaming data line chart

[choneyse]

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!

[choneyse]

I was able to get closer to the functionality I am looking for by first creating an array of 100 gravity entries but with all values of 0 {time: '0', x: 0, y:0, z:0}
This prevents the chart from changing its spacing as more items get added and so it looks just like streaming data.

What I ultimately want to be able to do however is show only those 100 entries at a time, but be able to scroll to the left to see earlier entries. Essentially having a viewport of 100 entries but be able to slide around left and right to different points in history.

[carbonrobot]

We haven't currently built any window or brushing features into Victory Native XL, but its on the future roadmap. If you want to help out, we would be happy to review any community contributions to our open source.