Visual glitch with `LineChart.Dot` using `hasOuterDot` at end of chart (v2.7.1)

[p-shapov]

🐛 Visual glitch with LineChart.Dot using hasOuterDot at end of chart (v2.7.1)

Hey team — first of all, thanks for your work on this amazing library. It’s been a pleasure to use!

While integrating <LineChart.Dot hasOuterDot /> in a production app, we ran into a subtle but visually jarring rendering issue when placing a dot at the end of the chart (at={points.length - 1}).

---

🧩 Problem Summary

When using hasOuterDot, the dot appears visually split in half — the left side is crisp and saturated, while the right side is faint, clipped, or missing entirely.

This only occurs when the dot is placed at the end of the chart and is caused by internal SVG layout behavior.

---

📸 Visual Reference

Screen.Recording.2025-07-03.at.23.03.51.mov

---

📦 Tested With

"react-native-wagmi-charts": "^2.7.1",
"react-native": "0.79.3",
"react-native-svg": "15.11.2",
"react-native-reanimated": "~3.17.4"

---

🧪 Repro Code Sample

const safeAreaInsets = useSafeAreaInsets();
const screenWidth = Dimensions.get('window').width;
const chartWidth = screenWidth - 40 - safeAreaInsets.left - safeAreaInsets.right;

return (
  <LineChart.Provider data={points}>
    <LineChart width={chartWidth} height={212}>
      <LineChart.Path color={trendColor} width={2}>
        <LineChart.Dot
          color={trendColor}
          at={points.length - 1}
          hasOuterDot
          hasPulse
        />
      </LineChart.Path>
    </LineChart>
  </LineChart.Provider>
);

[p-shapov]

🔍 Root Cause (likely)

The issue is related to how LineChartPathWrapper organizes rendering into two layers:

• A background <Svg> — which is clipped by its container
• A foreground <AnimatedSVG> — which is not clipped

The problem is that LineChart.Dot is included in both layers by default, based on displayName logic:

const BACKGROUND_COMPONENTS = ['LineChartDot', ...];
const FOREGROUND_COMPONENTS = ['LineChartDot', ...];