if we user pointerConfig, it becomes unscrollable horizontally

[AkshayBodakhe-Thinkitive]

import {
SafeAreaView,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import React from 'react';
import {LineChart, ruleTypes, yAxisSides} from 'react-native-gifted-charts';
import {colors} from '../../../constants/Colors';
import CustomText from '../../../components/Text/CustomText';
import {responsiveWidth} from 'react-native-responsive-dimensions';
import {FontType} from '../../../constants/FontType';

const ChartScreen = () => {
const data = [
{value: 30, label: '9 AM'},
{
value: 90,
label: '11 AM',
// hideDataPoint:true,
customDataPoint: () => (
<View
style={{
borderWidth: 0,
height: 50,
width: 80,
marginTop: 60,
borderRadius: 8,
backgroundColor: colors.primary,
paddingLeft: 10,
justifyContent: 'center',
shadowOpacity: 0.3,
shadowOffset: {
height: 0,
width: 0,
},
}}>

Heart Rate

88 Bpm

),
},
{value: 40, label: '1 PM'},
{value: 60, label: '3 PM'},
{value: 50, label: '6 PM'},
{value: 100, label: '8 PM'},
{value: 80, label: '9 PM'},
{value: 70, label: '10 PM'},
];

const customDataPoint = () => {
return (
<View
style={{
width: 10,
height: 10,
backgroundColor: 'white',
borderWidth: 1,
borderRadius: 5,
borderColor: colors.primary,
}}
/>
);
};

return (

<LineChart
isAnimated
data={data}
spacing={responsiveWidth(14.3)}
maxValue={150}
stepValue={30}
stepHeight={50}
animationDuration={2000}
xAxisColor={'#ACACAC'}
yAxisTextStyle={{color: '#ACACAC', fontFamily: FontType.Roboto_Regular}}
xAxisLabelTextStyle={{
color: '#ACACAC',
fontFamily: FontType.Roboto_Regular,
}}
dataPointsHeight={0}
rulesType={ruleTypes.SOLID}
yAxisTextNumberOfLines={0}
yAxisThickness={0}
width={responsiveWidth(80)}
startOpacity={0.3}
endOpacity={0.3}
endFillColor={'#0097F01A'}
startFillColor={'#0097F01A'}
dataPointsRadius={4}
customDataPoint={customDataPoint}
dataPointsColor={colors.primary}
color={colors.primary}
areaChart
curved
showDataPointOnFocus
initialSpacing={9}
endSpacing={0}
// if we use this we can touch datapoint it shows box , but it becomes unscrollable

    // pointerConfig={{
    //   pointerStripUptoDataPoint: true,
    //   pointerStripColor: 'lightgray',
    //   pointerStripWidth: 2,
    //   strokeDashArray: [2, 5],
    //   pointerColor: 'lightgray',
    //   radius: 4,
    //   pointerLabelWidth: 100,
    //   pointerLabelHeight: 120,
    //   pointerLabelComponent: (items: any) => {
    //     return (
    //       <View
    //         style={{
    //           borderWidth: 0,
    //           height: 50,
    //           width: 80,
    //           borderRadius: 8,
    //           backgroundColor: colors.primary,
    //           paddingLeft: 10,
    //           justifyContent: 'center',
    //           shadowOpacity: 0.3,
    //           shadowOffset: {
    //             height: 0,
    //             width: 0,
    //           },
    //         }}>
    //         {/* <Text style={{color: 'lightgray', fontSize: 12}}>
    //           Heart Rate
    //         </Text>
    //         <Text style={{color: 'white', fontWeight: 'bold'}}>
    //           {items[0].value}
    //         </Text> */}
    //         <CustomText color="white" fontFamily={FontType.Roboto_Medium}>
    //           Heart Rate
    //         </CustomText>
    //         <CustomText color="white"> {items[0].value} Bpm</CustomText>
    //       </View>
    //     );
    //   },
    // }}
  />
</SafeAreaView>

);
};

export default ChartScreen;

[Abhinandan-Kushwaha]

Hi @AkshayBodakhe-Thinkitive
You can add activatePointersOnLongPress:true inside the pointerConfig prop.

See pointerConfig in Line chart props
and pointerConfig docs

[AkshayBodakhe-Thinkitive]

Thank you so much sir...!!!