onPress usage with LineChart

[izniburak]

Hi,
I use v1.4.3 of the package. I have a question about the onPress functionality in LineChart.

I think it doesn't have an useful experience, because to press dot in the chart is very hard. I tried to use customDataPoint prop and prepared a custom component with Pressable component in order to use onPress. But onPress still didn't work.

Apart from that, I also couldn't use onPress functionality with the chart texts in the X axis. Normally, when I use BarChart and press the any text in X axis, onPress is triggered. Why we don't use similar functionality with LineChart?

Also, I know that, LineChart has some props such as focusEnabled, onFocus, onPress to handle 'press' actions. But, as I said, I think the experience of the LineChart onPress events not good. I would be good if it has similar behaviour with BarChart.

Do you have any suggestion for that?

[ahsan-abrar]

facing a similar issue, when I inspect I noticed that there is Svg that overly the whole graph lines area,

[ahsan-abrar]

              import React, {useEffect, useState} from 'react';
              import {
                View,
                Text,
                useWindowDimensions,
                TouchableOpacity,
                Alert,
              } from 'react-native';
              import tw from '../../../lib/tailwind';
              import {useDeviceContext} from 'twrnc';
              import {LineChart} from 'react-native-gifted-charts';
              import colors from '../../theme/colors';
              import {ProductType} from '../../types';
              import {dateFormat} from '../../utils';
              import {useTranslation} from 'react-i18next';
              import {DATE_FORMAT_2} from '../../constant/indext';

              type ProductGraphProps = {
                data: any;
                averagePrice: number;
              };

              function ProductGraph(props: ProductGraphProps) {
                const {data, averagePrice} = props;

                const [graphData, setGraphData] = useState<ProductType[]>();
                const [selectIndex, setSelectIndex] = useState<number>();

                useDeviceContext(tw);

                const customDataPoint = (index: number) => {
                  return (
                    <View
                      style={{
                        zIndex: 1,
                        position: 'relative',
                      }}>
                      <TouchableOpacity
                        onPress={() => {
                          Alert.alert('Sd');
                        }}
                        style={{
                          width: 40,
                          height: 40,
                          backgroundColor: colors.white,
                          borderWidth: 4,
                          borderRadius: 10,
                          borderColor: colors.primary,
                          zIndex: 999,
                        }}>
                        <Text>asd</Text>
                      </TouchableOpacity>
                    </View>
                  );
                };
                const customLabel = (val: string) => {
                  return (
                    <View style={{width: 70, marginLeft: 7}}>
                      <Text
                        style={{
                          color: 'black',
                          fontSize: 9,
                          marginLeft: 12,
                        }}>
                        {dateFormat(val, DATE_FORMAT_2)}
                      </Text>
                    </View>
                  );
                };

                const handleArrangeFilterData = () => {
                  let arr = data?.map((item: ProductType, index: number) => ({
                    value: item?.price,
                    labelComponent: () => customLabel(item?.purchaseDate),
                    customDataPoint: () => customDataPoint(index),
                  }));

                  return arr;
                };

                const {height, width} = useWindowDimensions();
                const {t} = useTranslation();

                return (
                  <View style={tw`flex-1 pb-6 w-full`}>
                    <View style={tw`w-full py-7 flex justify-center items-center`}>
                      <Text style={tw`text-xl text-black`}>{t('Average')}</Text>
                      {/* <Text style={tw`text-xs text-black font-medium`}>Febs, 12 2024 </Text> */}
                      <View style={tw`flex-row`}>
                        <Text style={tw`text-2xl text-green pt-3`}>
                          {averagePrice.toFixed(2)}
                        </Text>
                      </View>
                    </View>
                    <View style={tw`mt-auto`}>
                      <LineChart
                        onPress={() => {
                          Alert.alert('er');
                        }}
                        height={height - 440}
                        thickness={3}
                        width={width - 80}
                        color={'black'}
                        // maxValue={600}
                        areaChart
                        yAxisTextStyle={{color: 'black'}}
                        data={handleArrangeFilterData(data)}
                        curved
                        startFillColor={colors.primary}
                        endFillColor={colors.primary}
                        startOpacity={0.7}
                        endOpacity={0.4}
                        // spacing={38}
                        rulesColor={colors.alto}
                        rulesType="solid"
                        // initialSpacing={10}
                        yAxisColor={colors.alto}
                        xAxisColor={colors.alto}
                      />
                    </View>
                  </View>
                );
              }

              export default ProductGraph;

[ahsan-abrar]

Hi, I use v1.4.3 of the package. I have a question about the onPress functionality in LineChart.

I think it doesn't have an useful experience, because to press dot in the chart is very hard. I tried to use customDataPoint prop and prepared a custom component with Pressable component in order to use onPress. But onPress still didn't work.

Apart from that, I also couldn't use onPress functionality with the chart texts in the X axis. Normally, when I use BarChart and press the any text in X axis, onPress is triggered. Why we don't use similar functionality with LineChart?

Also, I know that, LineChart has some props such as focusEnabled, onFocus, onPress to handle 'press' actions. But, as I said, I think the experience of the LineChart onPress events not good. I would be good if it has similar behaviour with BarChart.

Do you have any suggestion for that?

Did you figure it out?

[wkchoong]

Can try to use this function when use the custom component from "LineChart"

delayBeforeUnFocus={0}
 focusedCustomDataPoint={() => {
              console.log('hi');
            }}
   customDataPoint={(item: any, i: number) => {
              return (
                <Box
                  key={i}
                  ml={2}
                  mb={4}
                  h={12}
                  w={12}
                  borderWidth={3}
                  rounded="$full"
                  borderColor="#FF9F0A"
                />
              );
            }}

[Abhinandan-Kushwaha]

Hi @izniburak @wkchoong @ahsan-abrar
I have fixed the onPress related issue in multi-line charts. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/docs/dev/LineChart/MultiLine.md#onpress-for-data-points-in-multi-line-charts