Encountered a crash in iOS when trying to zoom along the axis of the graph or there is a data change

[Shivangigupta01]

Expected Behavior

when user tries to zoom along the axis of the graph, the app crashes. This issue is not encountered frequently, but in some cases, I have encountered this issue in iPhone 12.
I found a similar issue: #950. #476

Actual Behavior

app should not crash when user tries to zoom or when there is a change in the data.

Debug Build
getting index out of range error in Xcode, when trying to switch the data being rendered in the Line chart component.

Release Build
Brief error description extracted from Firebase Crashlytics:

0x10a164 LineChartRenderer.drawHighlighted(context:indices:) + 800 (LineChartRenderer.swift:800)
0x10a238 @objc LineChartRenderer.drawHighlighted(context:indices:) + 629044 (:629044)
0xad298 BarLineChartViewBase.draw(:) + 251 (BarLineChartViewBase.swift:251)
0xad69c @objc BarLineChartViewBase.draw(:) + 249240 (:249240)
0x1aa848 -[UIView(CALayerDelegate) drawLayer:inContext:] + 508
0x1e810 CABackingStoreUpdate_ + 204
0x95d00 invocation function for block in CA::Layer::display_() + 64
0x1de98 -[CALayer _display] + 1720
0x1d6f8 CA::Layer::layout_and_display_if_needed(CA::Transaction*) + 412
0x2ea1c CA::Context::commit_transaction(CA::Transaction*, double, double*) + 444
0x5dff4 CA::Transaction::commit() + 648
0x47f3c CA::Transaction::flush_as_runloop_observer(bool) + 88
0x4fdc04 _UIApplicationFlushCATransaction + 52
0x64e4b0 _UIUpdateSequenceRun + 84
0xcb2c8c schedulerStepScheduledMainSection + 144
0xcb21e8 runloopSourceCallback + 92
0xd3128 CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION + 28

Data and config

this is how I have configured my Line chart component

<LineChart
ref={chartRef}
style={styles.chart}
legend={{enabled: true, form: 'NONE'}}
data={chartData}
chartDescription={{text: ''}}
marker={markerConfig}
xAxis={{
...xAxisConfig,
position: 'BOTTOM',
valueFormatter: data?.labels,
}}
yAxis={yAxisConfig}
/>

I have the following configurations added for chart, x and y axis

export const markerConfig = {
enabled: true,
digits: 2,
markerColor: processColor('grey'),
textColor: processColor(colors.white),
textAlign: 'center',
flexWrap: 'wrap',
};

export const dataConfig = {
lineWidth: 2,
drawFilled: false,
fillAlpha: 35,
drawValues: false,
circleRadius: 2,
drawCircleHole: false,
};

export const xAxisConfig = {
granularityEnabled: true,
granularity: 1,
textSize: 13,
drawGridLines: true,
gridLineWidth: 1,
gridColor: processColor(colors.border),
axisLineColor: processColor(colors.border),
textColor: processColor(colors.black),
fontFamily: fonts.regular,
drawLabels: true,
labelRotationAngle: -90,
avoidFirstLastClipping: false,
};

export const yAxisConfig = {
left: {
granularityEnabled: true,
granularity: 0.1,
textSize: 13,
textColor: processColor(colors.black),
fontFamily: fonts.regular,
drawLabels: true,
drawGridLines: true,
gridColor: processColor(colors.border),
drawAxisLines: false,
},
right: {
granularityEnabled: true,
granularity: 0.1,
textSize: 13,
textColor: processColor(colors.black),
fontFamily: fonts.regular,
drawLabels: true,
drawGridLines: true,
gridColor: processColor(colors.border),
drawAxisLines: false,
},
};

Steps to Reproduce the Problem

when I am trying to zoom along the x axis, the app gets crashed and I have faced this issue in iOS as of now.(Device: iPhone 12)

Specifications

• Version: react-native-charts-wrapper : 0.5.5
• Platform: iOS