Skip to content

CartesianChart touch/tooltips pick wrong point when xScale range starts negative #644

@HenriVue

Description

@HenriVue

Prerequisites

  • I have searched the open issues to make sure I'm not opening a duplicate issue
  • I have read through the docs before asking a question
  • I am using the latest version of victory-native-xl

Describe Your Environment

What version of victory-native-xl are you using? 41.20.2
What version of React and React Native are you using? React 19.0.0, React Native 0.81.5 (Expo SDK 54)
What version of Reanimated and React Native Skia are you using? Reanimated 4.1.5, @shopify/react-native-skia 2.2.12
Are you using Expo or React Native CLI? Expo SDK 54 (dev client)
What platform are you on? iOS and Android

Describe the Problem

CartesianChart press/touch handling reports incorrect coordinates when the chart’s X range starts at a negative value (e.g., narrow viewports with padding). The gesture handler feeds raw touch.x into findClosestPoint, which assumes the chart’s output range starts at 0. When the X scale’s minimum is negative, the closest-point index and tooltip positions are offset, so tooltips jump to the wrong data point.

Expected behavior: Chart press/touch should normalize the gesture X coordinate to the chart’s output range before finding the closest point, so tooltips land on the touched data point regardless of padding or negative X ranges.

Actual behavior: With negative X ranges (common when padding pushes the chart left), findClosestPoint receives an unadjusted X value and returns the wrong index. Tooltips render on a different point than the one touched. A local workaround is to add the X range minimum to the touch X before calling findClosestPoint and use that normalized value when updating press state.

Additional Information

Minimal repro:

  1. Render CartesianChart with left padding that yields xScale.range()[0] < 0 (e.g., add 40px left padding).
  2. Enable chartPressState and show a tooltip at matchedIndex.
  3. Tap near the left side of the chart: tooltip appears on the wrong data point. Normalizing X by x + Math.min(xScale.range()[0], 0) fixes it.
    A patched copy of CartesianChart with that normalization resolves the issue locally.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions