Improve rendering speed of Victory Native / VictoryChart

Question

I am rendering a VictoryChart within swipe cards, and swiping is slow. I suspect that the reason is slow rendering of the charts (when replaced with static images, swiping is fast).

Reading various discussions about Victory and Victory Native performance, it seems that one of the reasons for slow rendering are animations.

I am not doing any animations in my charts.

Do I have to explicitly disable animations in addition to what I have done in the code below?

Any other suggestion how to improve rendering performance of this chart? (I understand that pre-sorting of values may help. Anything else?)

<VictoryChart scale={{ x: 'time' }}>
  <VictoryAxis tickFormat={(t) => `${t.getHours()}:${t.getMinutes()}`}/>
  <VictoryAxis dependentAxis/>

  <VictoryCandlestick data={candleStickData} />

  <VictoryLine labels={['']}
    animate={{ duration: 0, onLoad: { duration: 0 } }}
    data={[
      { x: dateStartX, y: dateStartY },
      { x: dateStartX, y: dateStartY }
    ]}
  />

  <VictoryLine
    labels={['']}
    animate={{ duration: 0, onLoad: { duration: 0 } }}
    data={[
      { x: secondDateStartX, y: secondDateStartY },
      { x: secondDateStartX, y: secondDateStartY }
    ]}
  />

</VictoryChart>

Hatti

I'm having the same issue, have you found a solution? – Brueghel

No, unfortuantely – Hatti

@ThiagoNascimento BTW, I tried another charts package in another project. I haven't tested its performance (and I am not planning to do it anytime soon), but I liked its functionality and interface. It is github.com/wuxudong/react-native-charts-wrapper – Hatti

1) Lazy load swipe cards, 2) lazy load chart in the card, and 3) disable pointer events (touch interaction on a chart) in a card – Horehound