react-native-livechart 2.0.1 → 3.1.0

package/src/components/LiveChartSeries.tsx

@@ -24,6 +24,7 @@ import {
   type SeriesLineStyle,
 } from "../core/multiSeriesLayout";
 import {
+  resolveAxisLabel,
   resolveDegen,
   resolveGridStyle,
   resolveLeftEdgeFade,
@@ -31,6 +32,7 @@ import {
   resolveMetrics,
   resolveMultiSeriesDot,
   resolveScrub,
+  resolveSelectionDot,
   resolveXAxis,
   resolveYAxis,
 } from "../core/resolveConfig";
@@ -60,6 +62,7 @@ import {
   resolveTheme,
 } from "../theme";
 import type { LiveChartSeriesProps, Marker, SeriesConfig } from "../types";
+import { AxisLabelOverlay } from "./AxisLabelOverlay";
 import { CrosshairLine } from "./CrosshairLine";
 import { DegenParticlesOverlay } from "./DegenParticlesOverlay";
 import { LeftEdgeFade } from "./LeftEdgeFade";
@@ -121,12 +124,17 @@ function useLiveChartSeriesController({
   formatTime = defaultFormatTime,
   yAxis = true,
   xAxis = true,
+  topLabel,
+  bottomLabel,
   referenceLines,
   gridStyle,
   palette: paletteOverride,
   metrics,
   scrub = true,
+  selectionDot,
   onScrub,
+  onGestureStart,
+  onGestureEnd,
   onSeriesToggle,
   dot: dotProp,
   legend: legendProp,
@@ -142,8 +150,11 @@ function useLiveChartSeriesController({
   const markersActive = markers != null;
   const yAxisCfg = resolveYAxis(yAxis);
   const xAxisCfg = resolveXAxis(xAxis);
+  const topLabelCfg = resolveAxisLabel(topLabel);
+  const bottomLabelCfg = resolveAxisLabel(bottomLabel);
   const scrubCfg = resolveScrub(scrub);
   const scrubEnabled = scrubCfg !== null;
+  const selectionDotCfg = resolveSelectionDot(selectionDot);
   const gridStyleCfg = resolveGridStyle(gridStyle);
   const dotCfg = resolveMultiSeriesDot(dotProp);
   // Outer footprint of a dot (the color-filled radius plus the halo ring).
@@ -307,6 +318,8 @@ function useLiveChartSeriesController({
     scrubEnabled,
     onScrub,
     scrubCfg?.panGestureDelay ?? 0,
+    onGestureStart,
+    onGestureEnd,
   );
 
   // `projected` is used internally by the hit-test gesture; the overlay
@@ -373,6 +386,12 @@ function useLiveChartSeriesController({
     rootGesture,
     markersActive,
     markersSV,
+    // selection dot: resolved config + fallback color (the leading series' color)
+    selectionDot: selectionDotCfg,
+    selectionColor: lineColors[0],
+    // RN axis edge labels (floated over the canvas as a sibling layer)
+    topLabelCfg,
+    bottomLabelCfg,
   };
 }
 
@@ -591,6 +610,11 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     palette,
     dotCfg,
     dotOuterRadius,
+    selectionDot,
+    selectionColor,
+    formatValue,
+    topLabelCfg,
+    bottomLabelCfg,
   } = model;
 
   // Extend the scrub dim past the plot's right edge to fully cover the series
@@ -647,6 +671,10 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 engine={engine}
                 padding={effectivePadding}
                 palette={palette}
+                selectionDot={selectionDot}
+                selectionY={crosshair.scrubDotY}
+                scrubActive={crosshair.scrubActive}
+                selectionColor={selectionColor}
                 dimOpacity={scrubCfg.dimOpacity}
                 liveDotExtent={liveDotExtent}
                 crosshairLineColor={scrubCfg.crosshairLineColor}
@@ -658,6 +686,18 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 clips them (they track each series' live value, not the scrub). */}
             <SeriesValueLabelLayer model={model} />
           </Canvas>
+
+          {/* RN labels floated over the canvas (sibling of <Canvas>, an RN
+              view). Inside the canvas wrapper so its top/bottom edges align
+              with the plot area, not the legend row. */}
+          <AxisLabelOverlay
+            topLabel={topLabelCfg}
+            bottomLabel={bottomLabelCfg}
+            engine={engine}
+            formatValue={formatValue}
+            defaultColor={palette.gridLabel}
+            padding={effectivePadding}
+          />
         </View>
       </GestureDetector>
       {legendCfg.position === "bottom" ? legend : null}

package/src/components/LoadingOverlay.tsx

@@ -4,13 +4,10 @@ import {
   Path,
   Rect,
   RoundedRect,
-  Skia,
   Text as SkiaText,
   vec,
   type SkFont,
-  type SkPath,
 } from "@shopify/react-native-skia";
-import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import {
   BADGE_METRICS_DEFAULTS,
@@ -22,6 +19,10 @@ import {
   pillTextLeftX,
   type ChartPadding,
 } from "../draw/line";
+import {
+  usePathBuilder,
+  type ReanimatedPathBuilder,
+} from "../hooks/usePathBuilder";
 import { drawSpline } from "../math/spline";
 import { buildSquigglyPts } from "../math/squiggly";
 import type {
@@ -37,14 +38,14 @@ const RECT_H = 4;
 const RECT_R = 4;
 const RECT_SPACING = 32;
 
-function buildSplineInto(path: ReturnType<typeof Skia.Path.Make>, pts: number[]) {
+function buildSplineDetached(b: ReanimatedPathBuilder, pts: number[]) {
   "worklet";
-  path.reset();
   const n = pts.length >> 1;
-  if (n < 2) return path;
-  path.moveTo(pts[0], pts[1]);
-  drawSpline(path, pts);
-  return path;
+  if (n >= 2) {
+    b.moveTo(pts[0], pts[1]);
+    drawSpline(b, pts);
+  }
+  return b.detach();
 }
 
 export function LoadingOverlay({
@@ -85,29 +86,14 @@ export function LoadingOverlay({
   const leftInset =
     badgeMetrics.dotGap + badgeTailAndCap(font.getSize(), badgeTail, badgeMetrics);
 
-  // Ping-pong persistent paths — avoid allocating a JSI-backed SkPath per frame
-  // while the squiggly loading/empty-state animation is running.
-  const squigglyCacheRef = useRef<{
-    a: SkPath;
-    b: SkPath;
-    tick: boolean;
-  } | null>(null);
-  if (squigglyCacheRef.current === null) {
-    squigglyCacheRef.current = {
-      a: Skia.Path.Make(),
-      b: Skia.Path.Make(),
-      tick: false,
-    };
-  }
+  // Squiggly path — built into a reused PathBuilder and detach()-ed each frame.
+  const squigglyBuilder = usePathBuilder();
 
   // Squiggly path — animated each frame via timestamp
   const squigglyPath = useDerivedValue(() => {
-    const squigglyCache = squigglyCacheRef.current!;
-    squigglyCache.tick = !squigglyCache.tick;
-    const path = squigglyCache.tick ? squigglyCache.a : squigglyCache.b;
+    const b = squigglyBuilder.value;
     if (!isLoading.get() && !isEmpty.value && morphT.get() >= 1) {
-      path.reset();
-      return path;
+      return b.detach();
     }
     const pts = buildSquigglyPts(
       engine.canvasWidth.get(),
@@ -115,7 +101,7 @@ export function LoadingOverlay({
       padding,
       engine.timestamp.get(),
     );
-    return buildSplineInto(path, pts);
+    return buildSplineDetached(b, pts);
   });
 
   // Fades out quickly as the reveal animation begins (first 33% of morphT)

package/src/components/MarkerOverlay.tsx

@@ -4,7 +4,6 @@ import {
   Path,
   Skia,
   type SkFont,
-  type SkPath,
 } from "@shopify/react-native-skia";
 import { useMemo, useRef, useState } from "react";
 import {
@@ -15,6 +14,7 @@ import {
 import { scheduleOnRN } from "react-native-worklets";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
+import { usePathBuilder } from "../hooks/usePathBuilder";
 import {
   buildMarkerAtlas,
   defaultMarkerColor,
@@ -84,37 +84,32 @@ function ConnectorGlyph({
 
   const opacity = useDerivedValue(() => (layout.get().visible ? 1 : 0));
 
-  const cacheRef = useRef<{ a: SkPath; b: SkPath; tick: boolean } | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = { a: Skia.Path.Make(), b: Skia.Path.Make(), tick: false };
-  }
+  const glyphBuilder = usePathBuilder();
 
   const glyphPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.tick = !cache.tick;
-    const p: SkPath = cache.tick ? cache.a : cache.b;
-    p.reset();
+    const b = glyphBuilder.value;
     const l = layout.get();
-    if (!l.visible) return p;
-    const x = l.visible ? l.x : OFF;
-    const y = l.y;
-    if (kind === "graduation") {
-      p.moveTo(x, axisY.get());
-      p.lineTo(x, y);
-      p.moveTo(x, y - 7);
-      p.lineTo(x + 8, y - 4);
-      p.lineTo(x, y - 1);
-      p.close();
-    } else if (kind === "clawback") {
-      const s = 5;
-      const ay = axisY.get() - s;
-      p.moveTo(x - s, ay);
-      p.lineTo(x + s, ay);
-      p.lineTo(x + s, ay + s * 2);
-      p.lineTo(x - s, ay + s * 2);
-      p.close();
+    if (l.visible) {
+      const x = l.x;
+      const y = l.y;
+      if (kind === "graduation") {
+        b.moveTo(x, axisY.get());
+        b.lineTo(x, y);
+        b.moveTo(x, y - 7);
+        b.lineTo(x + 8, y - 4);
+        b.lineTo(x, y - 1);
+        b.close();
+      } else if (kind === "clawback") {
+        const s = 5;
+        const ay = axisY.get() - s;
+        b.moveTo(x - s, ay);
+        b.lineTo(x + s, ay);
+        b.lineTo(x + s, ay + s * 2);
+        b.lineTo(x - s, ay + s * 2);
+        b.close();
+      }
     }
-    return p;
+    return b.detach();
   });
 
   const fill = kind === "clawback";

package/src/components/MultiSeriesValueLines.tsx

@@ -1,17 +1,11 @@
-import {
-  DashPathEffect,
-  Group,
-  Path,
-  Skia,
-  type SkPath,
-} from "@shopify/react-native-skia";
+import { DashPathEffect, Group, Path } from "@shopify/react-native-skia";
 
-import { useRef } from "react";
 import { useDerivedValue } from "react-native-reanimated";
 import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type { ResolvedValueLineConfig } from "../core/resolveConfig";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
+import { usePathBuilder } from "../hooks/usePathBuilder";
 
 function SeriesValueLineAtIndex({
   index,
@@ -26,44 +20,30 @@ function SeriesValueLineAtIndex({
   color: string;
   config: ResolvedValueLineConfig;
 }) {
-  const cacheRef = useRef<{
-    a: SkPath;
-    b: SkPath;
-    tick: boolean;
-  } | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = {
-      a: Skia.Path.Make(),
-      b: Skia.Path.Make(),
-      tick: false,
-    };
-  }
+  const builder = usePathBuilder();
 
   const path = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.tick = !cache.tick;
-    const p = cache.tick ? cache.a : cache.b;
-    p.reset();
+    const b = builder.value;
     const h = engine.canvasHeight.get();
-    if (h === 0) return p;
     const s = engine.series.get();
     const displays = engine.displaySeriesValues.get();
-    if (index >= s.length) return p;
+    if (h !== 0 && index < s.length) {
+      const chartH = h - padding.top - padding.bottom;
+      const dMin = engine.displayMin.get();
+      const dMax = engine.displayMax.get();
+      const valRange = dMax - dMin;
+      const v = displays[index] ?? s[index].value;
+      const y =
+        valRange === 0
+          ? padding.top + chartH / 2
+          : padding.top + ((dMax - v) / valRange) * chartH;
 
-    const chartH = h - padding.top - padding.bottom;
-    const dMin = engine.displayMin.get();
-    const dMax = engine.displayMax.get();
-    const valRange = dMax - dMin;
-    const v = displays[index] ?? s[index].value;
-    const y =
-      valRange === 0
-        ? padding.top + chartH / 2
-        : padding.top + ((dMax - v) / valRange) * chartH;
-
-    if (y < 0) return p;
-    p.moveTo(padding.left, y);
-    p.lineTo(engine.canvasWidth.get() - padding.right, y);
-    return p;
+      if (y >= 0) {
+        b.moveTo(padding.left, y);
+        b.lineTo(engine.canvasWidth.get() - padding.right, y);
+      }
+    }
+    return b.detach();
   });
 
   const opacity = useDerivedValue(() => {

package/src/components/ReferenceLineOverlay.tsx

@@ -3,16 +3,14 @@ import {
   Group,
   Path,
   RoundedRect,
-  Skia,
   Text as SkiaText,
   type SkFont,
-  type SkPath,
 } from "@shopify/react-native-skia";
-import { useRef } from "react";
 import { useDerivedValue } from "react-native-reanimated";
 
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
+import { usePathBuilder } from "../hooks/usePathBuilder";
 import { useReferenceLine } from "../hooks/useReferenceLine";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import { referenceLineForm } from "../math/referenceLines";
@@ -65,131 +63,91 @@ export function ReferenceLineOverlay({
   const badgeBorderColor = line.badgeBorderColor ?? color;
   const badgeRadius = line.badgeRadius ?? OFF_AXIS_PILL_RADIUS;
 
-  const cacheRef = useRef<{
-    lineA: SkPath;
-    lineB: SkPath;
-    lineT: boolean;
-    bandA: SkPath;
-    bandB: SkPath;
-    bandT: boolean;
-    borderA: SkPath;
-    borderB: SkPath;
-    borderT: boolean;
-    offA: SkPath;
-    offB: SkPath;
-    offT: boolean;
-    chevA: SkPath;
-    chevB: SkPath;
-    chevT: boolean;
-  } | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = {
-      lineA: Skia.Path.Make(),
-      lineB: Skia.Path.Make(),
-      lineT: false,
-      bandA: Skia.Path.Make(),
-      bandB: Skia.Path.Make(),
-      bandT: false,
-      borderA: Skia.Path.Make(),
-      borderB: Skia.Path.Make(),
-      borderT: false,
-      offA: Skia.Path.Make(),
-      offB: Skia.Path.Make(),
-      offT: false,
-      chevA: Skia.Path.Make(),
-      chevB: Skia.Path.Make(),
-      chevT: false,
-    };
-  }
+  const lineBuilder = usePathBuilder();
+  const bandBuilder = usePathBuilder();
+  const borderBuilder = usePathBuilder();
+  const offBuilder = usePathBuilder();
+  const chevBuilder = usePathBuilder();
 
   const linePath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.lineT = !cache.lineT;
-    const p = cache.lineT ? cache.lineA : cache.lineB;
-    p.reset();
+    const b = lineBuilder.value;
     const l = layout.get();
-    if (!l.visible || l.offAxis || isBand) return p;
-    p.moveTo(l.x1, l.y);
-    p.lineTo(l.x2, l.y);
-    return p;
+    if (l.visible && !l.offAxis && !isBand) {
+      b.moveTo(l.x1, l.y);
+      b.lineTo(l.x2, l.y);
+    }
+    return b.detach();
   });
 
   const bandPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.bandT = !cache.bandT;
-    const p = cache.bandT ? cache.bandA : cache.bandB;
-    p.reset();
+    const b = bandBuilder.value;
     const l = layout.get();
-    if (!l.visible || !isBand) return p;
-    p.moveTo(l.x1, l.y);
-    p.lineTo(l.x2, l.y);
-    p.lineTo(l.x2, l.yBottom);
-    p.lineTo(l.x1, l.yBottom);
-    p.close();
-    return p;
+    if (l.visible && isBand) {
+      b.moveTo(l.x1, l.y);
+      b.lineTo(l.x2, l.y);
+      b.lineTo(l.x2, l.yBottom);
+      b.lineTo(l.x1, l.yBottom);
+      b.close();
+    }
+    return b.detach();
   });
 
   const bandBorderPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.borderT = !cache.borderT;
-    const p = cache.borderT ? cache.borderA : cache.borderB;
-    p.reset();
+    const b = borderBuilder.value;
     const l = layout.get();
-    if (!l.visible || !hasBandBorder) return p;
-    if (form === "time-band") {
-      // Vertical edges at the band's left / right.
-      p.moveTo(l.x1, l.y);
-      p.lineTo(l.x1, l.yBottom);
-      p.moveTo(l.x2, l.y);
-      p.lineTo(l.x2, l.yBottom);
-    } else {
-      // Horizontal edges at the band's top / bottom.
-      p.moveTo(l.x1, l.y);
-      p.lineTo(l.x2, l.y);
-      p.moveTo(l.x1, l.yBottom);
-      p.lineTo(l.x2, l.yBottom);
+    if (l.visible && hasBandBorder) {
+      if (form === "time-band") {
+        // Vertical edges at the band's left / right.
+        b.moveTo(l.x1, l.y);
+        b.lineTo(l.x1, l.yBottom);
+        b.moveTo(l.x2, l.y);
+        b.lineTo(l.x2, l.yBottom);
+      } else {
+        // Horizontal edges at the band's top / bottom.
+        b.moveTo(l.x1, l.y);
+        b.lineTo(l.x2, l.y);
+        b.moveTo(l.x1, l.yBottom);
+        b.lineTo(l.x2, l.yBottom);
+      }
     }
-    return p;
+    return b.detach();
   });
 
   const offLinePath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.offT = !cache.offT;
-    const p = cache.offT ? cache.offA : cache.offB;
-    p.reset();
+    const b = offBuilder.value;
     const l = layout.get();
-    if (!l.visible || !l.offAxis) return p;
-    // Start the connector just past the badge pill's right edge so the dashed
-    // line runs out to the chart edge rather than behind the badge.
-    const pillRight =
-      l.labelX + measureFontTextWidth(font, l.label) + OFF_AXIS_PILL_PAD_X;
-    const start = pillRight + 4;
-    if (start >= l.x2) return p;
-    p.moveTo(start, l.y);
-    p.lineTo(l.x2, l.y);
-    return p;
+    if (l.visible && l.offAxis) {
+      // Start the connector just past the badge pill's right edge so the dashed
+      // line runs out to the chart edge rather than behind the badge.
+      const pillRight =
+        l.labelX + measureFontTextWidth(font, l.label) + OFF_AXIS_PILL_PAD_X;
+      const start = pillRight + 4;
+      if (start < l.x2) {
+        b.moveTo(start, l.y);
+        b.lineTo(l.x2, l.y);
+      }
+    }
+    return b.detach();
   });
 
   const chevronPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.chevT = !cache.chevT;
-    const p = cache.chevT ? cache.chevA : cache.chevB;
-    p.reset();
+    const b = chevBuilder.value;
     const l = layout.get();
-    if (!l.visible || !l.offAxis) return p;
-    const cx = l.x1 + 6;
-    const cy = l.y;
-    const s = 4;
-    if (l.chevronUp) {
-      p.moveTo(cx - s, cy + s);
-      p.lineTo(cx, cy - s);
-      p.lineTo(cx + s, cy + s);
-    } else {
-      p.moveTo(cx - s, cy - s);
-      p.lineTo(cx, cy + s);
-      p.lineTo(cx + s, cy - s);
+    if (l.visible && l.offAxis) {
+      const cx = l.x1 + 6;
+      const cy = l.y;
+      const s = 4;
+      if (l.chevronUp) {
+        b.moveTo(cx - s, cy + s);
+        b.lineTo(cx, cy - s);
+        b.lineTo(cx + s, cy + s);
+      } else {
+        b.moveTo(cx - s, cy - s);
+        b.lineTo(cx, cy + s);
+        b.lineTo(cx + s, cy - s);
+      }
     }
-    return p;
+    return b.detach();
   });
 
   const lineOpacity = useDerivedValue(() =>

package/src/components/SelectionDot.tsx

@@ -0,0 +1,92 @@
+import { Circle, Group } from "@shopify/react-native-skia";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+import type { ResolvedSelectionDotConfig } from "../core/resolveConfig";
+
+/**
+ * Built-in selection dot: a filled circle at the scrub intersection plus an
+ * optional subtle outer ring (the `ring` config). Drawn only when `y >= 0` (the
+ * sentinel for "no dot") — an off-screen Y hides it naturally.
+ */
+export function DefaultSelectionDot({
+  x,
+  y,
+  opacity,
+  color,
+  size,
+  ring,
+}: {
+  x: SharedValue<number>;
+  y: SharedValue<number>;
+  opacity: SharedValue<number>;
+  color: string;
+  size: number;
+  ring: ResolvedSelectionDotConfig["ring"];
+}) {
+  // Push the dot off-screen when there's no value to mark (y < 0), so the
+  // sentinel never paints a stray dot at the top of the plot.
+  const cy = useDerivedValue(() => (y.get() < 0 ? -size * 4 : y.get()));
+  return (
+    <Group opacity={opacity}>
+      {ring && (
+        <Circle
+          cx={x}
+          cy={cy}
+          r={size + ring.width}
+          color={ring.color ?? color}
+          opacity={0.25}
+        />
+      )}
+      <Circle cx={x} cy={cy} r={size} color={color} />
+    </Group>
+  );
+}
+
+/**
+ * Resolves the selection-dot slot inside a crosshair overlay: renders nothing
+ * when `config` is null or the position is unavailable, the consumer's custom
+ * `component` when one is given, and the built-in dot otherwise.
+ *
+ * `color` is the resolved fallback (line / leading-series color) used when the
+ * config's own `color` is unset.
+ */
+export function SelectionDotSlot({
+  config,
+  x,
+  y,
+  active,
+  opacity,
+  color,
+}: {
+  config?: ResolvedSelectionDotConfig | null;
+  x: SharedValue<number>;
+  y?: SharedValue<number>;
+  active?: SharedValue<number> | SharedValue<boolean>;
+  opacity: SharedValue<number>;
+  color: string;
+}) {
+  if (!config || y === undefined || !active) return null;
+  const dotColor = config.color ?? color;
+  if (config.component) {
+    const Custom = config.component;
+    return (
+      <Custom
+        x={x}
+        y={y}
+        active={active as SharedValue<boolean>}
+        opacity={opacity}
+        color={dotColor}
+        size={config.size}
+      />
+    );
+  }
+  return (
+    <DefaultSelectionDot
+      x={x}
+      y={y}
+      opacity={opacity}
+      color={dotColor}
+      size={config.size}
+      ring={config.ring}
+    />
+  );
+}