Tooltip remains displayed after changing time range in the chart

[idanlevi1]

When interacting with the chart, the tooltip correctly displays upon pressing it. However, when transitioning between different time ranges, the previous tooltip persists, leading to multiple tooltips being displayed simultaneously. (when the time changes is means the data points are changed but "isActive" is still true with the old values) video:

https://github.com/FormidableLabs/victory-native-xl/assets/21155847/55390f8a-f637-4fd5-9ac6-6bd55b801408

code of tooltip trigger:

{isActive && (
  <>
    {chartDataType === 'amount' ?
      <ActiveTooltipAmount
        xPoint={state.x}
        bottom={chartBounds.bottom}
        activeValue={state.y.gains.value}
        chartBounds={chartBounds}
      />
      : <React.Fragment />}

[zibs]

Hey thanks @idanlevi1 -- I've also noticed this while playing around but haven't had a chance to investigate.

[idanlevi1]

Hey thanks @idanlevi1 -- I've also noticed this while playing around but haven't had a chance to investigate.

Ok, if there is an update I will be happy to know, Is it possible to cancel the possibility that the tooltip appears without an active click at that moment?

[peterjskaltsis]

@zibs thank you for the great package.

I've fixed this locally by adding a .onEnd callback to the bottom of panGesture in CartesianChart.tsx, it seems onTouchUp is not enough.

Would you be open to a PR to fix this, if you don't already have a solution?

The change:

export function CartesianChart() {
   // ...
  const panGesture = Gesture.Pan()
     // ...
     .onEnd(() => {
        const vals = activePressSharedValues || [];
        // Set active state to false for all vals
        for (const val of vals) {
          if (val) {
            val.isActive.value = false;
          }
        }
      })
     // ...

[zibs]

Hey @peterjskaltsis -- happy to review a PR if you open it!

[peterjskaltsis]

Hey @peterjskaltsis -- happy to review a PR if you open it!

Great thank you! I've just opened #230 above as a start^

[Acarvajal904]

@idanlevi1 I'm struggling with the skia elements, do you mind sharing the custom tooltip ?

[idanlevi1]

@idanlevi1 I'm struggling with the skia elements, do you mind sharing the custom tooltip ?

@Acarvajal904 Sure, I have to say, it was not easy to get the "perfect pixel" for my custom tooltip, I attached the Skia component (each variant is a function or value that I calculate):

      <Group>
        <SkiaLine strokeCap={'round'} dither={true} p1={startIndicatorLine} p2={endIndicatorLine} color={'#BF5FD754'} strokeWidth={1}>
          <DashPathEffect intervals={[5, 5]} />
        </SkiaLine>
        <RoundedRect
          x={activeValueX}
          y={activeValueY}
          width={tooltipWidth}
          height={tooltipHeight}
          r={8}
          color={Color.NEUTRAL_0} >
          <Shadow dx={3} dy={3} blur={5} color="rgba(45, 64, 202, 0.14)" />
          <Shadow dx={-3} dy={-3} blur={5} color="rgba(45, 64, 202, 0.14)" />
        </RoundedRect>
        <SkiaText
          color={Color.PRIMARY_60}
          font={amountFont}
          text={activeAmountValueDisplay}
          x={activeAmountValueXContent}
          y={activeValueYAmountContent}
        />
        <SkiaLine strokeCap={'round'} dither={true} p1={startMiddleLine} p2={endMiddleLine} color={Color.PRIMARY_96} strokeWidth={1} />
        <SkiaText
          color={Color.NEUTRAL_40}
          font={dateFont}
          text={activeDateValueDisplay}
          x={activeDateValueXContent}
          y={activeValueYDateContent}
        />
        <Vertices vertices={verticesBorder} colors={[Color.PRIMARY_90, Color.PRIMARY_90, Color.PRIMARY_90]} />
        <Vertices vertices={vertices} colors={[Color.NEUTRAL_0, Color.NEUTRAL_0, Color.NEUTRAL_0]} />
      </Group>