Data line is being rendered a little below the x-axis

[khunshan85]

Hi can anybody help me this. When a data point is zero, it is being rendered below the x-axis line when it should be on top of it and when the data is a lot, the small values are very close to zero and it seems like they are zero

[Abhinandan-Kushwaha]

Hi @khunshan85
Thanks for reporting this issue. Please also mention the version of the library you are using.
I will fix it soon.

For now I can give you a workaround. You can use overflowBottom = {1} to shift the line a little upwards.

[khunshan85]

Thanks @Abhinandan-Kushwaha and I am using 1.4.32

[khunshan85]

Using overflowBottom is giving me this error though

[Abhinandan-Kushwaha]

Can you share your code @khunshan85

[khunshan85]

@Abhinandan-Kushwaha please check. Thanks

const renderDataPoint = useCallback(
    (item: any, _: any, isFocused: boolean) =>
      item.value ? (
        <View
          style={[
            {
              backgroundColor: contentPrimaryInverse,
              borderColor: isFocused
                ? primary
                : graphColors[performanceTabs[activePerformanceTab].key].dataPointColor,
            },
            styles.dataPoint,
          ]}
        />
      ) : undefined,
    [contentPrimaryInverse, primary, graphColors, performanceTabs, activePerformanceTab],
  );

  const graphData: lineDataItem[] = useMemo(
    () =>
      listingPerformanceByDate
        ? Array.from({ length: daysRange }).map((_, i) => {
            const date = dayjs()
              .subtract(daysRange - (i + 1), 'days')
              .toDate();
            const count = listingPerformanceByDate.find(
              bucket => new Date(bucket.key_as_string).toDateString() === date.toDateString(),
            )?.[performanceTabs[activePerformanceTab].key].value;

            return {
              label: dayjs(date).format('DDddd'),
              value: count || 0,
              customDataPoint: renderDataPoint,
              pointerShiftX: 1,
            } as lineDataItem;
          })
        : [],
    [daysRange, listingPerformanceByDate, performanceTabs, activePerformanceTab, renderDataPoint],
  );

const renderPointer = useCallback(
    () => (
      <View
        style={[
          {
            backgroundColor: contentPrimaryInverse,
            borderColor: primary,
          },
          styles.pointer,
        ]}
      />
    ),
    [contentPrimaryInverse, primary],
  );

  const renderPointerLabel = useCallback(
    (items: any) =>
      items[0].value >= 0 && (
        <View
          style={[
            {
              backgroundColor: backgroundPrimaryInverse,
            },
            styles.pointerLabel,
          ]}
        >
          <View style={styles.flexDirectionRow}>
            <Text
              style={{
                color:
                  graphColors[performanceTabs[activePerformanceTab].key].dataPointLabelTextColor,
              }}
            >
              {items[0].value}
            </Text>
            <Text style={{ color: contentPrimaryInverse }}>{` - ${items[0].label}`}</Text>
          </View>
        </View>
      ),
    [
      backgroundPrimaryInverse,
      graphColors,
      performanceTabs,
      activePerformanceTab,
      contentPrimaryInverse,
    ],
  );

const renderGraph = useCallback(() => {
    const { lineGraphColor, areaGraphGradientColor1, areaGraphGradientColor2 } =
      graphColors[performanceTabs[activePerformanceTab].key];

    const maxValue = (Math.floor((Math.max(...graphData.map(d => d.value)) ?? 10) / 10) + 1) * 10;

    return (
      <LineChart
        data={graphData}
        maxValue={maxValue}
        stepValue={maxValue / 5}
        width={Dimensions.get('screen').width * 0.69}
        height={Dimensions.get('screen').height * 0.25}
        areaChart
        color={lineGraphColor}
        startFillColor={areaGraphGradientColor1}
        startOpacity={0.1}
        endFillColor={areaGraphGradientColor2}
        endOpacity={0.01}
        curved
        curveType={1}
        focusEnabled
        hideRules
        overflowBottom={1}
        xAxisLabelsVerticalShift={Spacing[4]}
        xAxisColor={contentSecondary}
        xAxisLabelTextStyle={
          { color: contentSecondary, ...GlobalStyle.paragraphS, fontSize: 10 } as TextStyle
        }
        yAxisColor={contentSecondary}
        yAxisThickness={0.5}
        yAxisTextStyle={
          { color: contentSecondary, ...GlobalStyle.paragraphS, fontSize: 10 } as TextStyle
        }
        xAxisLength={Dimensions.get('screen').width * 0.7}
        pointerConfig={{
          pointerStripUptoDataPoint: true,
          pointerStripColor: primary,
          pointerStripWidth: 2,
          pointerComponent: renderPointer,
          activatePointersOnLongPress: true,
          activatePointersDelay: 10,
          autoAdjustPointerLabelPosition: true,
          pointerLabelComponent: renderPointerLabel,
          pointerLabelWidth: 50,
          pointerLabelHeight: 50,
        }}
        getPointerProps={(item: any) => setParentViewScroll(item.pointerIndex === -1)}
      />
    );
  }, [
    graphData,
    graphColors,
    performanceTabs,
    activePerformanceTab,
    contentSecondary,
    setParentViewScroll,
    primary,
    renderPointer,
    renderPointerLabel,
  ]);

[khunshan85]

These were last 10 elements on the component stack. The issue occured in BarAndLineChartsWrapper

[khunshan85]

This is much verbose error but a same one where top is <<NaN>>

[Abhinandan-Kushwaha]

Hi @khunshan85 Thanks for reporting this bug. It has been fixed from versions 1.4.34 onwards. Setting overflowBottom is not needed anymore.
Please use the latest version of the library.

[khunshan85]

Thanks @Abhinandan-Kushwaha