Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LineChart - Strip not showing after certain x datapoints, using data prop. #952

Closed
lucasBruma opened this issue Jan 2, 2025 · 0 comments · Fixed by #954
Closed

LineChart - Strip not showing after certain x datapoints, using data prop. #952

lucasBruma opened this issue Jan 2, 2025 · 0 comments · Fixed by #954

Comments

@lucasBruma
Copy link
Contributor

Description

It's the same issue as this comment from LineChart - Strip and Points not showing beyond x index 0 for DataSet. I still have the issue despite using the 1.4.50 version.

LineChart component

      <LineChart
            data={data}
            lineSegments={dashedLineSegments}
            width={data.length < 7 ? 600 : undefined}
            noOfSections={6}
            startOpacity={0.9}
            endOpacity={0.2}
            trimYAxisAtTop={true}
            overflowTop={200}
            dataPointsHeight={12}
            dataPointsWidth={12}
            dataPointsColor="#DBEAFE"
            dataPointsShape="circular"
            // x and y axis
            thickness={3}
            xAxisLabelTextStyle={{ color: "#64748B", width: 46, textAlign: "right", position: "absolute", right: -2 }}
            xAxisThickness={0}
            yAxisSide={yAxisSides.LEFT}
            yAxisLabelWidth={30}
            yAxisTextStyle={{ color: "#64748B" }}
            yAxisThickness={0}
            yAxisOffset={minWeight - 5}
            color="#4A90E2"
            spacing={50}
            initialSpacing={60}
            endSpacing={20}
            showVerticalLines
            verticalLinesColor="rgba(0,0,0,0.1)"
            rulesColor="rgba(0,0,0,0.1)"
            rulesType="solid"
            showValuesAsDataPointsText={false}
            customDataPoint={() => {
              return <View className="relative h-3 w-3 rounded-full border-[2px] border-blue-600 bg-white" />;
            }}
            interpolateMissingValues={true}
            focusEnabled
            pointerConfig={{
              hidePointerForMissingValues: true,
              pointerStripHeight: 200,
              pointerStripColor: "#92a3b8",
              pointerStripWidth: 4,
              pointerColor: "#2563EB",
              radius: 6,
              pointerLabelWidth: 100,
              pointerLabelHeight: 90,
              activatePointersDelay: 2500,
              activatePointersOnLongPress: true,
              initialPointerIndex: data.length < 4 ? undefined : data.length - 1,
              pointerComponent: () => {
                return (
                  <View className="relative -top-[2px] right-[2px] h-4 w-4 rounded-full border-[3px] border-white bg-blue-600" />
                );
              },
              pointerLabelComponent: (items: any) => {
                const item = items[0];

                return (
                  <View
                    className={cn(
                      "absolute top-6 z-50 -ml-[40px] w-[100px] justify-center rounded-lg bg-slate-100 px-3 py-2",
                    )}
                  >
                    <Text className="text-center text-xs text-slate-700">{dayjs(item.date).format("D MMM YYYY")}</Text>
                    <Text className="text-center text-lg font-bold">{item.value} kg</Text>
                  </View>
                );
              },
            }}
            // Scroll
            scrollRef={chartScrollRef}
            scrollAnimation={true}
            scrollToEnd={true}
            disableScroll={false}
            scrollEventThrottle={16}
            onScroll={(event: NativeSyntheticEvent<NativeScrollEvent>) => {
              if (hasArrowsBeenPressed) {
                setLastNativeEvent(event);
                return;
              }
              updateVisibleDataPoints(event.nativeEvent);
            }}
            onMomentumScrollEnd={() => {
              if (lastNativeEvent) updateVisibleDataPoints(lastNativeEvent.nativeEvent);
              if (hasArrowsBeenPressed) setHasArrowsBeenPressed(false);
            }}
            onStartReached={() => {
              if (setSelectedIndex) setSelectedIndex(0);
            }}
            onEndReached={() => {
              if (setSelectedIndex) setSelectedIndex(data.length - 1);
            }}
          />

data example

  const data = [
    { date: new Date("2024-03-20"), value: 75 },
    { date: new Date("2024-03-21"), value: 75 },
    { date: new Date("2024-03-22"), value: 75 },
    { date: new Date("2024-03-23"), value: 75 },
    { date: new Date("2024-03-24"), value: 74 },
    { date: new Date("2024-03-25"), value: 74 },
    { date: new Date("2024-03-26"), value: 74 },
    { date: new Date("2024-03-27"), value: 74 },
    { date: new Date("2024-03-28"), value: 74 },
    { date: new Date("2024-03-29"), value: 74 },
    { date: new Date("2024-03-30"), value: 74 },
    { date: new Date("2024-03-31"), value: 74 },
  ];

Images

Image 02-01-2025 at 10 52 AM

Image 02-01-2025 at 10 51 AM

Steps to reproduce

  1. Add a LineChart with data passed to data
  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.50

React Native version

0.76.5

Platforms

iOS

Workflow

Expo Dev Client

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant