How can i set the label separately for two different lines?

[samkhan016]

I am trying to adjust the the labels for 2 separate lines as shown in the image below

Following is my code:

<View style={styles.chartCont}>
        <LineChart
          curved
          isAnimated
          data={lineData}
          data2={lineData2}
          initialSpacing={1}
          color1={Theme.FOG}
          color2={Theme.PURPLE}
          hideDataPoints
          xAxisColor={Theme.BORDER_PRIMARY}
          yAxisColor={Theme.BORDER_PRIMARY}
          noOfSections={5}
          maxValue={1000}
          yAxisThickness={0}
          rulesType="solid"
          rulesColor={Theme.BORDER_TERTIARY}
          xAxisLabelTextStyle={styles.xAxisLabelTextStyle}
          yAxisTextStyle={styles.yAxisTextStyle}
          scrollToEnd
          // disableScroll={false}
          pointerConfig={{
            pointerStripColor: Theme.BORDER_TERTIARY,
            pointerStripWidth: 2,
            hidePointers: true,
            // pointerStripHeight: 100,
            autoAdjustPointerLabelPosition: true,
            pointerLabelComponent: (items: any) => {
              return (
                <View style={styles.pointerCont}>
                  <ImageBackground
                    source={require('../../assets/Tooltip.png')}
                    style={styles.pointerImgCont}>
                    <Text style={styles.pointerTxt}>{items[0].value}</Text>
                  </ImageBackground>
                  <ImageBackground
                    source={require('../../assets/Tooltip1.png')}
                    style={styles.pointerImgCont}>
                    <Text style={styles.pointerTxt}>{items[1].value}</Text>
                  </ImageBackground>
                </View>
              );
            },
          }}
        />
</View>

But i am facing some difficulty adjusting it according to the requirement as you can see in the following SS

any help is appreciated. TYIA