Gradient line and area blinking with pointerConfig

[CavalcanteLeo]

Description

Screen.Recording.2024-09-20.at.17.31.25.mov

Steps to reproduce

const spacing = Dimensions.get('window').width / (chartData.length ?? 1);


<LineChart
          scrollRef={chartScrollRef}
          rulesColor="#333333"
          showDataPointOnFocus
          curved
          data={chartData}
          disableScroll
          noOfSections={4}
          lineGradientStartColor="#14B4E3"
          lineGradientEndColor="#04252F"
          gradientDirection="toBottom"
          maxValue={100}
          dashWidth={1}
          isAnimated
          lineGradient
          spacing={spacing}
          thickness={3}
          height={250}
          yAxisSide={1}
          pointerConfig={{
            pointerColor: '#14B4E300',
            stripBehindBars: true,

            pointerStripUptoDataPoint: false,
            pointerStripColor: 'lightgray',
            pointerStripWidth: 2,
            strokeDashArray: [2, 5],
            autoAdjustPointerLabelPosition: true,
            radius: 4,
            pointerLabelWidth: 140,
            shiftPointerLabelY: 60,
            stripOverPointer: false,

            //
            // pointerStripHeight: 210,
            pointerLabelComponent: (items: any[]) => (
              <PopularTimesTooltip
                hour={items[0].label}
                percentage={items[0].value}
              />
            ),
          }}
          hideYAxisText
          showXAxisIndices
          xAxisIndicesHeight={6}
          xAxisIndicesWidth={1}
          xAxisIndicesColor="#303030"
          curveType={0}
          xAxisLabelsVerticalShift={12}
          animateOnDataChange
          animationDuration={1000}
          onDataChangeAnimationDuration={250}
          areaChart
          areaGradientId="bgGradientColor"
          areaGradientComponent={() => {
            return (
              <LinearGradient id="bgGradientColor" x1="1" y1="0" x2="1" y2="1">
                <Stop offset="0" stopOpacity={0.3} stopColor={'#14B4E3'} />
                <Stop offset="1" stopOpacity={0.1} stopColor={'#04252F'} />
              </LinearGradient>
            );
          }}
        />

ps, even if I remove the pointerLabelComponent, it still happens

it seems it was generated by these:

lineGradient
lineGradientStartColor="#14B4E3"
lineGradientEndColor="#04252F"

[Abhinandan-Kushwaha]

@CavalcanteLeo The blink is due to the animateOnDataChange prop. You can remove it if it is not needed. Meanwhile, I am trying to fix it.

[CavalcanteLeo]

thanks for the heads up, I'm quite busy here, but I will try to debug ur code and see if I can find a solution too

[Abhinandan-Kushwaha]

Hi @CavalcanteLeo
I have fixed this issue in the latest release. Now the chart won't blink even when using the animateOnDataChange prop,
It has been fixed from versions 1.4.42 onwards. 🎉

Please use the latest version of the library.