react-native-livechart 4.10.0 → 4.11.0

package/src/components/LiveChart.tsx

@@ -1,10 +1,4 @@
-import {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
@@ -27,6 +21,7 @@ import {
   Group,
   LinearGradient,
   Path,
+  Rect,
   vec,
 } from "@shopify/react-native-skia";
 
@@ -253,6 +248,7 @@ function useLiveChartController({
   font: fontProp,
   insets,
   style,
+  canvasMode = "transparent",
 
   // ── Candlestick ─────────────────────────────────────────────────────────
   mode = "line",
@@ -1204,6 +1200,7 @@ function useLiveChartController({
   return {
     // passthrough props the render needs
     style,
+    canvasMode,
     accessibilityLabel,
     accessibilityRole,
     emptyText,
@@ -1362,9 +1359,7 @@ function ChartWithDegen({
     onDegenShake,
     isStatic,
   );
-  return (
-    <ChartView model={model} yAxisEntries={yAxisEntries} degen={state} />
-  );
+  return <ChartView model={model} yAxisEntries={yAxisEntries} degen={state} />;
 }
 
 /**
@@ -1721,6 +1716,7 @@ function ChartStack({
     loadingStrokeWidth,
     loadingAmplitude,
     loadingSpeed,
+    canvasMode,
   } = model;
   return (
     <Group transform={degen?.shakeTransform}>
@@ -1939,6 +1935,7 @@ function ChartStack({
         lineStrokeWidth={loadingStrokeWidth}
         waveAmplitude={loadingAmplitude}
         waveSpeed={loadingSpeed}
+        opaqueCanvas={canvasMode === "opaque"}
       />
     </Group>
   );
@@ -2003,6 +2000,7 @@ function ChartScrubLayer({
     selectionDot,
     selectionColor,
     renderTooltip,
+    canvasMode,
   } = model;
   // A custom tooltip is an RN overlay (sibling of <Canvas>), so the built-in
   // Skia tooltip is suppressed here while it's active — the line pill in line
@@ -2047,6 +2045,7 @@ function ChartScrubLayer({
           tooltipBorderRadius={scrubCfg.tooltipBorderRadius}
           tooltipShowValue={scrubCfg.tooltipShowValue}
           tooltipShowTime={scrubCfg.tooltipShowTime}
+          opaqueCanvas={canvasMode === "opaque"}
         >
           {/* Candle charts render a multi-line OHLC tooltip; the line
               chart falls back to CrosshairOverlay's default value/time
@@ -2364,6 +2363,7 @@ function ChartView({
     extremaTimeOffset,
     topConnector,
     bottomConnector,
+    canvasMode,
   } = model;
 
   return (
@@ -2375,7 +2375,21 @@ function ChartView({
         accessibilityLabel={accessibilityLabel}
         accessibilityRole={accessibilityRole}
       >
-        <Canvas style={{ flex: 1 }}>
+        {/* Skia chooses TextureView vs SurfaceView when the native Canvas mounts. */}
+        <Canvas
+          key={canvasMode}
+          style={{ flex: 1 }}
+          opaque={canvasMode === "opaque"}
+        >
+          {canvasMode === "opaque" && (
+            <Rect
+              x={0}
+              y={0}
+              width={engine.canvasWidth}
+              height={engine.canvasHeight}
+              color={backgroundColor}
+            />
+          )}
           {/* Background fills first, then the left-edge fade (a canvas-space sibling
               so dstOut blends correctly), then the line stack on top — so the fade
               softens only the fills and the line stays crisp at the left edge. */}
@@ -2392,15 +2406,14 @@ function ChartView({
               startColor={leftEdgeFadeCfg.startColor}
               endColor={leftEdgeFadeCfg.endColor}
               engine={engine}
+              opaqueBackgroundRgb={
+                canvasMode === "opaque" ? palette.bgRgb : undefined
+              }
             />
           )}
 
           {/* Line stack above the fade so the line stays crisp at the left edge. */}
-          <ChartStack
-            model={model}
-            yAxisEntries={yAxisEntries}
-            degen={degen}
-          />
+          <ChartStack model={model} yAxisEntries={yAxisEntries} degen={degen} />
 
           {/* "extrema-edge" connector lines (dot → edge readout), above the chart
               content so the dashed guide reads over the line / candles. */}

package/src/components/LiveChartSeries.tsx

@@ -4,7 +4,7 @@
  *
  * @see https://github.com/benjitaylor/liveline
  */
-import { Canvas, Group } from "@shopify/react-native-skia";
+import { Canvas, Group, Rect } from "@shopify/react-native-skia";
 import { useLayoutEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
@@ -83,6 +83,10 @@ import {
   labelConnector,
 } from "./ExtremaConnectorOverlay";
 import { CustomMarkerOverlay } from "./CustomMarkerOverlay";
+import {
+  CustomReferenceLineOverlay,
+  customReferenceLineFlags,
+} from "./CustomReferenceLineOverlay";
 import { CrosshairLine } from "./CrosshairLine";
 import { DegenParticlesOverlay } from "./DegenParticlesOverlay";
 import { LeftEdgeFade } from "./LeftEdgeFade";
@@ -128,6 +132,7 @@ function useLiveChartSeriesController({
   font: fontProp,
   insets,
   style,
+  canvasMode = "transparent",
   timeWindow = 30,
   paused = false,
   loading = false,
@@ -172,6 +177,7 @@ function useLiveChartSeriesController({
   markerHitRadius = 16,
   markerCluster,
   renderMarker,
+  renderReferenceLine,
   leftEdgeFade = true,
 }: LiveChartSeriesProps) {
   const emptyMarkers = useSharedValue<Marker[]>([]);
@@ -224,6 +230,13 @@ function useLiveChartSeriesController({
 
   const allRefLines = referenceLines ?? [];
   const refValues = collectReferenceValues(allRefLines);
+  // Form-A lines a custom renderer owns keep their line stroke but suppress the
+  // built-in Skia tag. The callback is probed per line on the JS thread, matching
+  // LiveChart and CustomMarkerOverlay's per-item fallback model.
+  const refLineCustom = customReferenceLineFlags(
+    allRefLines,
+    renderReferenceLine,
+  );
 
   const palette = applyPaletteOverride(
     resolveTheme(accentColor, theme),
@@ -256,6 +269,11 @@ function useLiveChartSeriesController({
     setSeriesSnapshot(series.get().slice());
   }, [series]);
 
+  // Mount per-series drawing worklets only for real series. The previous fixed
+  // 12-slot render kept 144 derived-value mappers alive for the default stroke,
+  // dot, and value-label layers even when a chart contained only one line.
+  const activeSeriesCount = Math.min(seriesSnapshot.length, MAX_MULTI_SERIES);
+
   const maxSeriesLabelWidth = dotCfg.valueLabel
     ? Math.max(
         0,
@@ -336,7 +354,11 @@ function useLiveChartSeriesController({
     nowOverride,
   });
   const { layoutHeight, onLayout } = useCanvasLayout(engine);
-  const linePaths = useMultiSeriesLinePaths(engine, effectivePadding);
+  const linePaths = useMultiSeriesLinePaths(
+    engine,
+    effectivePadding,
+    activeSeriesCount,
+  );
 
   // Per-series colors and stroke styles, derived from the off-render snapshot
   // (React state — so no Reanimated read-during-render). The reaction below
@@ -503,6 +525,7 @@ function useLiveChartSeriesController({
     // passthrough props the render needs
     series,
     style,
+    canvasMode,
     accessibilityLabel,
     accessibilityRole,
     emptyText,
@@ -519,6 +542,7 @@ function useLiveChartSeriesController({
     degenCfg,
     metricsCfg,
     allRefLines,
+    refLineCustom,
     leftEdgeFadeCfg,
     // theme / layout / fonts
     palette,
@@ -540,6 +564,7 @@ function useLiveChartSeriesController({
     layoutHeight,
     onLayout,
     linePaths,
+    activeSeriesCount,
     lineColors,
     lineStyles,
     degenPack,
@@ -555,6 +580,7 @@ function useLiveChartSeriesController({
     markerGroupOpacity,
     overlayScrubFade,
     renderMarker,
+    renderReferenceLine,
     // selection dot: resolved config + fallback color (the leading series' color)
     selectionDot: selectionDotCfg,
     selectionColor: lineColors[0],
@@ -610,6 +636,8 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     loadingStrokeWidth,
     loadingAmplitude,
     loadingSpeed,
+    canvasMode,
+    activeSeriesCount,
   } = model;
 
   return (
@@ -629,12 +657,13 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         </Group>
       )}
 
-      {/* Index keys: reference lines are a positional array and two may share
-          value + label (e.g. duplicate working orders at the same price), which a
-          content-derived key would collapse to one. Fade group lets
-          `scrub.hideOverlaysOnScrub` ease the lines out while scrubbing. */}
+      {/* Reference lines are index-addressed throughout the drag/press API, and
+          duplicate working orders may share all visible content. Positional keys
+          keep both orders mounted without collapsing them to one React child.
+          Fade group lets `scrub.hideOverlaysOnScrub` ease the lines out. */}
       <Group opacity={overlayScrubFade}>
         {allRefLines.map((rl, i) => (
+          /* react-doctor-disable-next-line react-doctor/no-array-index-as-key */
           <ReferenceLineOverlay
             key={i}
             engine={engine}
@@ -654,12 +683,13 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
             padding={effectivePadding}
             colors={lineColors}
             config={dotCfg.valueLine}
+            seriesCount={activeSeriesCount}
           />
         </Group>
       )}
 
       <Group opacity={reveal.lineOpacity}>
-        {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+        {Array.from({ length: activeSeriesCount }, (_, i) => (
           <MultiSeriesStroke
             key={i}
             index={i}
@@ -694,6 +724,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
             color={dotCfg.color}
             pulse={dotCfg.pulse}
             viewEnd={engine.viewEnd}
+            seriesCount={activeSeriesCount}
           />
         </Group>
       )}
@@ -749,6 +780,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         lineStrokeWidth={loadingStrokeWidth}
         waveAmplitude={loadingAmplitude}
         waveSpeed={loadingSpeed}
+        opaqueCanvas={canvasMode === "opaque"}
       />
     </Group>
   );
@@ -767,6 +799,7 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
     skiaFont,
     reveal,
     degenShakeTransform,
+    activeSeriesCount,
   } = model;
   if (!dotCfg.valueLabel) return null;
   return (
@@ -778,6 +811,7 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
           colors={lineColors}
           font={skiaFont}
           dotRadius={dotOuterRadius}
+          seriesCount={activeSeriesCount}
         />
       </Group>
     </Group>
@@ -789,6 +823,7 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
 function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
   const {
     allRefLines,
+    refLineCustom,
     engine,
     effectivePadding,
     palette,
@@ -796,11 +831,13 @@ function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
     skiaFont,
     degenShakeTransform,
     overlayScrubFade,
+    canvasMode,
   } = model;
   if (allRefLines.length === 0) return null;
   return (
     <Group transform={degenShakeTransform} opacity={overlayScrubFade}>
       {allRefLines.map((rl, i) => (
+        /* react-doctor-disable-next-line react-doctor/no-array-index-as-key */
         <ReferenceLineOverlay
           key={i}
           engine={engine}
@@ -810,6 +847,7 @@ function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
           formatValue={formatValue}
           font={skiaFont}
           badgeLayer
+          suppressTag={refLineCustom[i]}
         />
       ))}
     </Group>
@@ -848,7 +886,11 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     markersSV,
     markerClusterCfg,
     renderMarker,
+    renderReferenceLine,
+    allRefLines,
+    refLineCustom,
     overlayScrubFade,
+    canvasMode,
   } = model;
 
   // Mirror the Skia overlay fade onto the RN custom-marker sibling so
@@ -891,7 +933,21 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
           else points map into a taller area and the x-axis draws past the edge. */}
       <GestureDetector gesture={rootGesture}>
         <View style={{ flex: 1 }} onLayout={onLayout}>
-          <Canvas style={{ flex: 1, minHeight: layoutHeight || 1 }}>
+          {/* Skia chooses TextureView vs SurfaceView when the native Canvas mounts. */}
+          <Canvas
+            key={canvasMode}
+            style={{ flex: 1, minHeight: layoutHeight || 1 }}
+            opaque={canvasMode === "opaque"}
+          >
+            {canvasMode === "opaque" && (
+              <Rect
+                x={0}
+                y={0}
+                width={engine.canvasWidth}
+                height={engine.canvasHeight}
+                color={backgroundColor}
+              />
+            )}
             <SeriesChartStack model={model} />
 
             {/* "extrema-edge" connector lines (dot → edge readout). Outside the
@@ -910,6 +966,9 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 startColor={leftEdgeFadeCfg.startColor}
                 endColor={leftEdgeFadeCfg.endColor}
                 engine={engine}
+                opaqueBackgroundRgb={
+                  canvasMode === "opaque" ? palette.bgRgb : undefined
+                }
               />
             )}
 
@@ -932,6 +991,7 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 crosshairLineColor={scrubCfg.crosshairLineColor}
                 crosshairDash={scrubCfg.crosshairDash}
                 crosshairDimColor={scrubCfg.crosshairDimColor}
+                opaqueCanvas={canvasMode === "opaque"}
               />
             )}
 
@@ -952,23 +1012,36 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
             padding={effectivePadding}
           />
 
-          {/* Custom-rendered markers — RN views floated over the canvas
-              (non-Skia), pinned to each marker's live position. Box-none fade
-              wrapper so `scrub.hideOverlaysOnScrub` hides them with the Skia
-              markers (full-bleed; children keep their own absolute positions). */}
-          {markersActive && renderMarker && (
+          {/* Custom annotations — RN views floated over the canvas (non-Skia),
+              pinned to their live positions. As a post-Canvas sibling they render
+              above the left-edge fade and scrub overlay. The box-none fade wrapper
+              keeps `scrub.hideOverlaysOnScrub` behavior aligned with Skia. */}
+          {((markersActive && renderMarker) ||
+            (renderReferenceLine && allRefLines.length > 0)) && (
             <Animated.View
               pointerEvents="box-none"
               style={[StyleSheet.absoluteFill, overlayFadeStyle]}
             >
-              <CustomMarkerOverlay
-                markers={markersSV}
-                renderMarker={renderMarker}
-                engine={engine}
-                padding={effectivePadding}
-                series={series}
-                cluster={markerClusterCfg}
-              />
+              {markersActive && renderMarker && (
+                <CustomMarkerOverlay
+                  markers={markersSV}
+                  renderMarker={renderMarker}
+                  engine={engine}
+                  padding={effectivePadding}
+                  series={series}
+                  cluster={markerClusterCfg}
+                />
+              )}
+              {renderReferenceLine && allRefLines.length > 0 && (
+                <CustomReferenceLineOverlay
+                  lines={allRefLines}
+                  renderReferenceLine={renderReferenceLine}
+                  custom={refLineCustom}
+                  engine={engine}
+                  padding={effectivePadding}
+                  formatValue={formatValue}
+                />
+              )}
             </Animated.View>
           )}
         </View>

package/src/components/LoadingOverlay.tsx

@@ -8,6 +8,7 @@ import {
   vec,
   type SkFont,
 } from "@shopify/react-native-skia";
+import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import {
   BADGE_METRICS_DEFAULTS,
@@ -67,6 +68,7 @@ export function LoadingOverlay({
   lineStrokeWidth,
   waveAmplitude = 14,
   waveSpeed = 1,
+  opaqueCanvas = false,
 }: {
   engine: ChartEngineLayout;
   padding: ChartPadding;
@@ -86,6 +88,8 @@ export function LoadingOverlay({
   waveAmplitude?: number;
   /** Breathing-wave speed multiplier. */
   waveSpeed?: number;
+  /** Paint the owned background instead of erasing destination alpha. */
+  opaqueCanvas?: boolean;
   /** Mirror the badge prop so labels align with GridOverlay's label positions. */
   badge?: boolean;
   /** Whether the badge tail spike is shown; affects the left inset used for skeleton alignment. */
@@ -99,15 +103,26 @@ export function LoadingOverlay({
 }) {
   // Same left-inset formula as GridOverlay (only used when badge=true)
   const leftInset =
-    badgeMetrics.dotGap + badgeTailAndCap(font.getSize(), badgeTail, badgeMetrics);
+    badgeMetrics.dotGap +
+    badgeTailAndCap(font.getSize(), badgeTail, badgeMetrics);
 
   // Loading-shell color (squiggle + skeleton placeholders) and squiggle stroke,
   // both overridable via `loading={{ color, strokeWidth }}`.
   const loadingColor = lineColor ?? palette.gridLine;
   const loadingStroke = lineStrokeWidth ?? strokeWidth;
+  const [bgR, bgG, bgB] = palette.bgRgb;
+  const gapMaskColors = opaqueCanvas
+    ? [
+        `rgba(${bgR},${bgG},${bgB},0)`,
+        `rgb(${bgR},${bgG},${bgB})`,
+        `rgb(${bgR},${bgG},${bgB})`,
+        `rgba(${bgR},${bgG},${bgB},0)`,
+      ]
+    : ["rgba(0,0,0,0)", "rgba(0,0,0,1)", "rgba(0,0,0,1)", "rgba(0,0,0,0)"];
 
   // Squiggly path — built into a reused PathBuilder and detach()-ed each frame.
   const squigglyBuilder = usePathBuilder();
+  const squigglyPtsRef = useRef<number[]>([]);
 
   // Squiggly path — animated each frame via timestamp
   const squigglyPath = useDerivedValue(() => {
@@ -122,6 +137,7 @@ export function LoadingOverlay({
       engine.timestamp.get(),
       waveAmplitude,
       waveSpeed,
+      squigglyPtsRef.current,
     );
     return buildSplineDetached(b, pts);
   });
@@ -254,17 +270,15 @@ export function LoadingOverlay({
       />
 
       {/* Erase a soft horizontal band through the squiggle for the label (dstOut) */}
-      <Group opacity={showGapGroup} blendMode="dstOut">
+      <Group
+        opacity={showGapGroup}
+        blendMode={opaqueCanvas ? undefined : "dstOut"}
+      >
         <Rect x={gapLeft} y={gapTop} width={gapWidth} height={gapHeight}>
           <LinearGradient
             start={vec(0, 0)}
             end={gapGradEnd}
-            colors={[
-              "rgba(0,0,0,0)",
-              "rgba(0,0,0,1)",
-              "rgba(0,0,0,1)",
-              "rgba(0,0,0,0)",
-            ]}
+            colors={gapMaskColors}
             positions={gapGradientPositions}
           />
         </Rect>
@@ -279,7 +293,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
           <RoundedRect
             x={lx}
@@ -287,7 +301,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
           <RoundedRect
             x={lx}
@@ -295,7 +309,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
           <RoundedRect
             x={lx}
@@ -303,7 +317,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
         </>
       ) : null}

package/src/components/MarkerOverlay.tsx

@@ -351,6 +351,18 @@ export function MarkerOverlay({
   if (projRef.current === null) {
     projRef.current = { a: [], b: [], tick: false };
   }
+  const atlasFrameRef = useRef<{
+    a: { transforms: SkRSXform[]; sprites: SkRect[] };
+    b: { transforms: SkRSXform[]; sprites: SkRect[] };
+    tick: boolean;
+  } | null>(null);
+  if (atlasFrameRef.current === null) {
+    atlasFrameRef.current = {
+      a: { transforms: [], sprites: [] },
+      b: { transforms: [], sprites: [] },
+      tick: false,
+    };
+  }
 
   // Single per-frame worklet: project all markers, then emit a transform +
   // source rect for each visible atlas marker. Three mappers total regardless
@@ -377,8 +389,13 @@ export function MarkerOverlay({
         lineLinear,
       });
       clusterMarkers(ms, buf, { config: cluster });
-      const transforms: SkRSXform[] = [];
-      const sprites: SkRect[] = [];
+      const atlasFrames = atlasFrameRef.current!;
+      atlasFrames.tick = !atlasFrames.tick;
+      const frame = atlasFrames.tick ? atlasFrames.a : atlasFrames.b;
+      const transforms = frame.transforms;
+      const sprites = frame.sprites;
+      transforms.length = 0;
+      sprites.length = 0;
       for (let i = 0; i < ms.length; i++) {
         const pt = buf[i];
         // Collapsed-cluster members fold into their representative's badge.
@@ -455,7 +472,7 @@ export function MarkerOverlay({
         );
         sprites.push(cell.rect);
       }
-      return { transforms, sprites };
+      return frame;
     },
     [
       cells,

package/src/components/MultiSeriesDots.tsx

@@ -1,7 +1,6 @@
 import { Circle, Group } from "@shopify/react-native-skia";
 
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type {
   ResolvedDotRingConfig,
@@ -118,6 +117,7 @@ export function MultiSeriesDots({
   color,
   pulse,
   viewEnd,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
@@ -132,10 +132,12 @@ export function MultiSeriesDots({
   pulse: ResolvedPulseConfig | null;
   /** Pan/zoom right-edge override — pulse is frozen-out while scrolled back. */
   viewEnd?: SharedValue<number | null>;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesDotAtIndex
           key={i}
           index={i}

package/src/components/MultiSeriesTooltipStack.tsx

@@ -4,11 +4,13 @@ import {
   type SkFont,
 } from "@shopify/react-native-skia";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { TooltipLayout } from "../hooks/crosshairShared";
 import type { LiveChartPalette } from "../types";
 
-const TOOLTIP_STACK_SLOTS = MAX_MULTI_SERIES + 1;
+// Candle tooltips have exactly O/H/L/C + time. This component is only mounted
+// for candle mode, so reserving the multi-series capacity registered 40 unused
+// derived-value mappers (8 empty rows × 5 mappers).
+const TOOLTIP_STACK_SLOTS = 5;
 
 function TooltipStackLine({
   index,

package/src/components/MultiSeriesValueLabels.tsx

@@ -5,7 +5,6 @@ import {
 } from "@shopify/react-native-skia";
 import { useDerivedValue } from "react-native-reanimated";
 
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
 
@@ -78,16 +77,19 @@ export function MultiSeriesValueLabels({
   colors,
   font,
   dotRadius,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
   colors: string[];
   font: SkFont;
   dotRadius: number;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesValueLabelAtIndex
           key={i}
           index={i}