Line Chart Pointer Strip config issue with negative values and multiple lines chart

[gorkemHK]

Description

Hi there,
I have a chart with multiple datasets and also with negative values.
My current implementation is like this for the linechart:
<LineChart
backgroundColor={colors.white}
dataSet={processLineData}
maxValue={maxCalculatedValue}
mostNegativeValue={overAllMinPointValue}
isAnimated
formatYLabel={formatYLabel}
width={calc(260)}
height={126}
spacing={calc(260) / maxLengthOfCharts}
endSpacing={8}
curved
yAxisLabelPrefix="%"
curveType={CurveType.QUADRATIC}
yAxisSide={yAxisSides.LEFT}
yAxisThickness={0}
yAxisLabelWidth={45}
xAxisColor={colors.neutral300}
initialSpacing={8}
yAxisLabelContainerStyle={styles.labelContainer}
yAxisTextStyle={styles.yAxisText}
hideRules
adjustToWidth
xAxisType="dotted"
focusEnabled
pointerConfig={{
showPointerStrip: true,
pointerStripColor: 'magenta',
hidePointers: true,
}}
noOfSections={3}
noOfSectionsBelowXAxis={3}
stepHeight={42}
stripWidth={1}
/>

Its not visible in the negative area. Like in the below image:

Would rather have a constant position in y-axis and constant height. Is that somehow possible?

Steps to reproduce

<LineChart
backgroundColor={colors.white}
dataSet={processLineData}
maxValue={maxCalculatedValue}
mostNegativeValue={overAllMinPointValue}
isAnimated
formatYLabel={formatYLabel}
width={calc(260)}
height={126}
spacing={calc(260) / maxLengthOfCharts}
endSpacing={8}
curved
yAxisLabelPrefix="%"
curveType={CurveType.QUADRATIC}
yAxisSide={yAxisSides.LEFT}
yAxisThickness={0}
yAxisLabelWidth={45}
xAxisColor={colors.neutral300}
initialSpacing={8}
yAxisLabelContainerStyle={styles.labelContainer}
yAxisTextStyle={styles.yAxisText}
hideRules
adjustToWidth
xAxisType="dotted"
focusEnabled
pointerConfig={{
showPointerStrip: true,
pointerStripColor: 'magenta',
hidePointers: true,
}}
noOfSections={3}
noOfSectionsBelowXAxis={3}
stepHeight={42}
stripWidth={1}
/>

Give a multiline dataset.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.58

React Native version

0.74.3

Platforms

iOS

Workflow

React Native

[gorkemHK]

@Abhinandan-Kushwaha would love to see your take on this challenging case.

[Abhinandan-Kushwaha]

sure @gorkemHK I will take a look by this weekend

[gorkemHK]

Currently its going to the negative side like this:

But its only following the first data in the multiline dataset. As I said I need to make a const height paralel to yAxis strip following my finger along the xAxis and collecting items that intersecting with the datasets.
And also if you dont mind is there a way to display a pointerLabelComponent on a fixed position rather than having it follow the strip. I want to eliminate the issue with the borders of chart cutting of the label, also when data changes is there a way to reset the state of pointer config cuz the pointer and labelComponent seems to be sticking around still.
@Abhinandan-Kushwaha

[gorkemHK]

Any updates on this? @Abhinandan-Kushwaha