LineChart - Strip and Points not showing beyond x index 0 for DataSet

[sondreluc]

Description

When trying to show a strip and datapoint when pressing a LineChart that uses the dataSet property, the points and strip disappears when pressing anything other than the beginning of the graph (x = 0).

I've found what I believe is the cause of the issue, which lies here:

react-native-gifted-charts/src/LineChart/index.tsx

Lines 1362 to 1373 in 20a98cf

	const activatePointers = (x: number) => {
	let factor = (x - initialSpacing) / spacing; // getClosestValueFromSpacingArray(cumulativeSpacing1,x-initialSpacing)
	factor = Math.round(factor);
	factor = Math.min(factor, (data0 ?? data).length - 1);
	factor = Math.max(factor, 0);
	let z =
	getX(cumulativeSpacing1, factor) -
	(pointerRadius || pointerWidth / 2) -
	1;
	setPointerX(z);
	setPointerIndex(factor);
	let item, y;

Where the active X point is set. The calculation for finding the x value uses the cumulativeSpacing1 list, which is empty when the component uses dataSet instead of data, data2 etc.
I suppose this should be using cumulativeSpacingForSet instead?

Steps to reproduce

1. Add a LineChart with data passed to dataSet
2. Add a pointerConfig to enable pointers and strip to appear.
3. See how the pointers and strip only appear when pressing right in the beginning (left side) of the chart area.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.47

React Native version

0.75

Platforms

Android, iOS

Workflow

React Native

[adityaranjan006]

Vertical Strip is not visible after some index point on the data, used using data prop. Circular pointer is visible but the strip is hidden. Do you have any Idea how this could be fixed?
`
pointerConfig={{
pointerStripHeight: 200,
pointerStripColor: '#454545',
pointerStripWidth: 1,
pointerColor: '#FFFFFF',
radius: 8,
pointerLabelWidth: 120,
pointerLabelHeight:0,
pointerVanishDelay:20000,
strokeDashArray:[5,5],
pointerStripUptoDataPoint: true,
activatePointersOnLongPress: true,
autoAdjustPointerLabelPosition: true,
persistPointer:true,

`

this is the pointerConfig.

[adityaranjan006]

@Abhinandan-Kushwaha , poniterConfig is not showing the pointerStrip after certain X data points. I used data prop of the LineGraph using one of the examples shown.
Data object: {
value: 8, // PM2.5 level in µg/m³
date: '07:00 AM',
label: '07:00 AM',
labelTextStyle: { color: '#FEFEFE', width: 60, fontSize: 8, fontWeight: "bold" },
},
{ value: 5, date: '07:05 AM' },

Graph COmponent:

export const GraphComponent = ({data,minValue,maxValue,stepValue,title}:GraphComponentProps) => {
    return (
        <View style={{ paddingVertical: 40, paddingLeft: 0, overflow:"visible"}}>
             <Text style={styles.yAxisTitle}>{title}</Text>
            <LineChart
                areaChart
                curved
                data={data}
                width={useWindowDimensions().width}
                hideDataPoints
                spacing={8}
                color="#A9FBA6"
                thickness={2}
                startFillColor="rgba(169, 251, 166, 0.2)"
                endFillColor="rgba(20,85,81,0.2)"
                startOpacity={0.2}
                endOpacity={0.1}
                stepValue={stepValue}
                maxValue={maxValue}
                yAxisColor="white"
                yAxisThickness={0}
                rulesLength={0}
                yAxisTextStyle={{ color: 'gray',fontSize:10 }}
                xAxisColor="black"
                xAxisLabelTextStyle={{ color: 'gray',fontSize:20 }}
                pointerConfig={{
                    pointerStripHeight: 200,
                    pointerStripColor: '#454545',
                    pointerStripWidth: 1,
                    pointerColor: '#FFFFFF',
                    radius: 8,
                    pointerLabelWidth: 120,
                    pointerLabelHeight:0,
                    pointerVanishDelay:20000,
                    strokeDashArray:[5,5],
                    activatePointersOnLongPress: true,
                    autoAdjustPointerLabelPosition: true,
                    persistPointer:true,
                    pointerLabelComponent: (items: any) => {
                        return (
                            <View
                                style={{
                                    height: 30,
                                    width: "100%",
                                    justifyContent: 'center',
                                    marginTop: -30,
                                    marginLeft: -10,
                                    backgroundColor: 'rgba(52, 52, 52, 0.8)',
                                    borderRadius:10
                                }}>
                                <View style={{flexDirection:"row",justifyContent:"center",columnGap:5}}>
                                <Text style={{ color: 'white', fontSize: 12, textAlign: 'center',fontWeight:"bold" }}>
                                    {items[0].date}
                                </Text>
                                <Text style={{ color:'white',fontSize: 12, textAlign: "center",fontWeight:"bold"}}>
                                    .
                                </Text>
                                <Text style={{ color:'white',fontSize: 12, textAlign: "center",fontWeight:"bold"}}>
                                        {'$' + items[0].value + '.0'}
                                </Text>
                                </View>
                            </View>
                        );
                    },
                }}
            />
        </View>
    );
}

Parent Component:

export function Environment() {
  const [activeButton, setActiveButton] = useState<ActiveButton>(ActiveButton.eCo2);
  const handleButtonPress = (button: ActiveButton) => {
    if (activeButton !== button) {
        setActiveButton(button);
    }
};

const showGraph = () =>{
  switch(activeButton){
    case ActiveButton.eCo2:
      return <GraphComponent data={ECO2_DATA} minValue={0} maxValue={2000} stepValue={400} yAxisSection={10} title="eCo2"/>
    case ActiveButton.TVOC:
      return <GraphComponent data={TVOC_DATA} minValue={0} maxValue={1000} stepValue={200} yAxisSection={10} title="TVOC"/>
    case ActiveButton.PM25:
      return <GraphComponent data={PPM_DATA} minValue={0} maxValue={55} stepValue={10} yAxisSection={10} title="PM2.5"/>
    case ActiveButton.Temp:
      return <GraphComponent data={TEMPERATURE_DATA} minValue={0} maxValue={50} stepValue={10} yAxisSection={10} title="Temp"/>
  }
}
  return (
    <SafeAreaView style={styles.container}>
       <BG style={{ position: "absolute" }} color1="#092309" color2="#010103" />
         <ScrollView bounces={false} >
            
          <View style={{flex:1, height:"50%",marginTop:-40}}>
              {showGraph()}
              <View style={{justifyContent:"center",alignItems:"center",width:useWindowDimensions().width,paddingTop:2}}>
                <View style={styles.tabContainer}>
                <TouchableOpacity style={[styles.button, activeButton === ActiveButton.eCo2 && styles.activeButton]} onPress={() => handleButtonPress(ActiveButton.eCo2)}>
                    <Text style={styles.tabText}>
                    eCO2
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={[styles.button, activeButton === ActiveButton.TVOC && styles.activeButton]} onPress={()=>handleButtonPress(ActiveButton.TVOC)}>
                    <Text style={styles.tabText}>
                    TVOC
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={[styles.button, activeButton === ActiveButton.PM25 && styles.activeButton]} onPress={()=>handleButtonPress(ActiveButton.PM25)}>
                    <Text style={styles.tabText}>
                    PM2.5
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={[styles.button, activeButton === ActiveButton.Temp && styles.activeButton]} onPress={()=>handleButtonPress(ActiveButton.Temp)}>
                    <Text style={styles.tabText}>
                    Temp
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
              <EnvironmentSensing />
          </View>
        </ScrollView>
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    width:"100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: constants["bg-primary"],
  },
  roomTextContainer:{
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
    transform: [{ rotate: "30deg" }]
  },
  tabContainer:{
    flex:1,
    alignItems:"center",
    flexDirection: "row",
    justifyContent: "space-around",
    paddingHorizontal: 4,
    paddingVertical:4,
    backgroundColor: "#1A1A1A",
    width:"95%",
    height:35,
    borderRadius:20,
    marginBottom:50,
  },
  tabText:{
    color:"#FFFFFF",
    fontSize:14,
  },
  button:{
    flex:1,
    padding: 4,
    backgroundColor:"#1A1A1A",
    borderRadius: 20,
    marginHorizontal:1,
    justifyContent: "center",
    alignItems: "center", 
    minWidth: 80,
  },
  activeButton: {
    backgroundColor: constants["btn-primary-active-color"],
    color: constants["text-primary-active-color"],
    fontWeight: "800",
  }
});