react-native-livechart 3.11.0 → 4.0.0

package/src/components/ReferenceLineGroupOverlay.tsx

@@ -0,0 +1,207 @@
+import {
+  Group,
+  RoundedRect,
+  Text as SkiaText,
+  type SkFont,
+} from "@shopify/react-native-skia";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+
+import type { ChartPadding } from "../draw/line";
+import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import type { ReferenceGrouping } from "../math/referenceGroup";
+import type { ResolvedReferenceGroupBadge } from "../math/referenceLines";
+import type { LiveChartPalette } from "../types";
+
+/** Max simultaneous group handles (a fixed Skia slot pool — the per-frame group
+ *  count varies, so we draw a fixed set of slots and hide the unused ones). */
+const MAX_GROUP_PILLS = 12;
+/** Horizontal padding inside the count pill, in px. */
+const PILL_PAD_X = 6;
+/** Vertical padding inside the count pill, in px. */
+const PILL_PAD_Y = 3;
+/** Pill inset from the anchored plot edge, in px. */
+const EDGE_INSET = 2;
+
+interface PillLayout {
+  visible: boolean;
+  x: number;
+  top: number;
+  w: number;
+  text: string;
+  textX: number;
+  textY: number;
+}
+
+const HIDDEN_PILL: PillLayout = {
+  visible: false,
+  x: 0,
+  top: -1,
+  w: 0,
+  text: "",
+  textX: 0,
+  textY: -1,
+};
+
+/** One collapsed-group count pill (slot `index` of the fixed pool). Reads the
+ *  cluster at `grouping.groups[index]`; hidden when fewer groups exist this frame. */
+function GroupCountPill({
+  grouping,
+  index,
+  padding,
+  canvasWidth,
+  font,
+  position,
+  icon,
+  showText,
+  format,
+  baselineOffset,
+  pillH,
+  radius,
+  borderWidth,
+  color,
+  background,
+  textColor,
+}: {
+  grouping: SharedValue<ReferenceGrouping>;
+  index: number;
+  padding: ChartPadding;
+  canvasWidth: SharedValue<number>;
+  font: SkFont;
+  position: "left" | "center" | "right";
+  icon: string;
+  showText: boolean;
+  format?: (count: number) => string;
+  baselineOffset: number;
+  pillH: number;
+  radius: number;
+  borderWidth: number;
+  color: string;
+  background: string;
+  textColor: string;
+}) {
+  const layout = useDerivedValue<PillLayout>(() => {
+    const gs = grouping.get().groups;
+    if (index >= gs.length) return HIDDEN_PILL;
+    const g = gs[index];
+    const count = showText ? (format ? format(g.count) : String(g.count)) : "";
+    const text = icon ? (count ? `${icon} ${count}` : icon) : count;
+    const w = measureFontTextWidth(font, text) + PILL_PAD_X * 2;
+    // Anchor the pill horizontally to the chosen plot edge (or center).
+    const x1 = padding.left;
+    const x2 = canvasWidth.get() - padding.right;
+    let x: number;
+    if (position === "right") x = x2 - EDGE_INSET - w;
+    else if (position === "center") x = (x1 + x2) / 2 - w / 2;
+    else x = x1 + EDGE_INSET;
+    return {
+      visible: true,
+      x,
+      top: g.cy - pillH / 2,
+      w,
+      text,
+      textX: x + PILL_PAD_X,
+      textY: g.cy - baselineOffset,
+    };
+  });
+
+  const opacity = useDerivedValue(() => (layout.get().visible ? 1 : 0));
+  const x = useDerivedValue(() => layout.get().x);
+  const top = useDerivedValue(() => layout.get().top);
+  const w = useDerivedValue(() => layout.get().w);
+  const text = useDerivedValue(() => layout.get().text);
+  const textX = useDerivedValue(() => layout.get().textX);
+  const textY = useDerivedValue(() => layout.get().textY);
+
+  return (
+    <Group opacity={opacity}>
+      <RoundedRect
+        x={x}
+        y={top}
+        width={w}
+        height={pillH}
+        r={radius}
+        color={background}
+      />
+      <RoundedRect
+        x={x}
+        y={top}
+        width={w}
+        height={pillH}
+        r={radius}
+        color={color}
+        style="stroke"
+        strokeWidth={borderWidth}
+      />
+      <SkiaText x={textX} y={textY} text={text} font={font} color={textColor} />
+    </Group>
+  );
+}
+
+/**
+ * Draws the collapsed-group count handles (e.g. a "×3" pill) for reference-line
+ * grouping — one pill per multi-line cluster, pinned to the plot at the cluster
+ * centroid. The individual tags of clustered lines are suppressed upstream (via
+ * `groupHidden`), so a stack of nearby orders reads as one handle. The pill uses the
+ * same style/shape config as a per-line badge (`badge`): `position`, `icon`,
+ * `text` (showText), `background` / `borderColor` / `borderWidth`, `radius` (corner),
+ * `textColor`, per-badge `font`, and `offsetX` / `offsetY`; the `format` fn maps the
+ * count to the label. A fixed slot pool keeps the Skia tree stable while the
+ * per-frame group count varies.
+ */
+export function ReferenceLineGroupOverlay({
+  grouping,
+  padding,
+  canvasWidth,
+  palette,
+  font,
+  badge,
+  format,
+}: {
+  grouping: SharedValue<ReferenceGrouping>;
+  padding: ChartPadding;
+  canvasWidth: SharedValue<number>;
+  palette: LiveChartPalette;
+  font: SkFont;
+  badge: ResolvedReferenceGroupBadge;
+  format?: (count: number) => string;
+}) {
+  const fm = font.getMetrics();
+  const baselineOffset = (fm.ascent + fm.descent) / 2;
+  const pillH = fm.descent - fm.ascent + PILL_PAD_Y * 2;
+
+  // Theme defaults for the unset colors (mirrors the per-line badge resolution).
+  const background = badge.background ?? palette.tooltipBg;
+  const borderColor = badge.borderColor ?? palette.refLine;
+  const textColor = badge.textColor ?? palette.refLabel;
+
+  const transform =
+    badge.offsetX !== 0 || badge.offsetY !== 0
+      ? [{ translateX: badge.offsetX }, { translateY: badge.offsetY }]
+      : undefined;
+
+  const slots: React.ReactElement[] = [];
+  for (let i = 0; i < MAX_GROUP_PILLS; i++) {
+    slots.push(
+      <GroupCountPill
+        key={i}
+        grouping={grouping}
+        index={i}
+        padding={padding}
+        canvasWidth={canvasWidth}
+        font={font}
+        position={badge.position}
+        icon={badge.icon}
+        showText={badge.showText}
+        format={format}
+        baselineOffset={baselineOffset}
+        pillH={pillH}
+        radius={badge.radius}
+        borderWidth={badge.borderWidth}
+        color={borderColor}
+        background={background}
+        textColor={textColor}
+      />,
+    );
+  }
+  return <Group transform={transform}>{slots}</Group>;
+}

package/src/components/ReferenceLineOverlay.tsx

@@ -6,14 +6,16 @@ import {
   Text as SkiaText,
   type SkFont,
 } from "@shopify/react-native-skia";
-import { useDerivedValue } from "react-native-reanimated";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
+import { useChartSkiaFont } from "../hooks/useChartSkiaFont";
 import { usePathBuilder } from "../hooks/usePathBuilder";
 import { useReferenceLine } from "../hooks/useReferenceLine";
+import { MONO_FONT_FAMILY } from "../lib/monoFontFamily";
 import { referenceLineForm, resolveReferenceBadge } from "../math/referenceLines";
-import type { LiveChartPalette, ReferenceLine } from "../types";
+import type { FontConfig, LiveChartPalette, ReferenceLine } from "../types";
 
 /** Translucent fill alpha for value / time bands. */
 const BAND_FILL_OPACITY = 0.16;
@@ -35,7 +37,12 @@ export function ReferenceLineOverlay({
   palette,
   formatValue,
   font,
+  fontProp,
   badgeLayer = false,
+  suppressTag = false,
+  groupHidden,
+  dragValues,
+  index = 0,
 }: {
   engine: ChartEngineLayout;
   padding: ChartPadding;
@@ -43,6 +50,12 @@ export function ReferenceLineOverlay({
   palette: LiveChartPalette;
   formatValue: (v: number) => string;
   font: SkFont;
+  /**
+   * The chart's raw font config — used to build a per-badge font when the line's
+   * {@link ReferenceLineBadgeConfig} sets `fontSize` / `fontFamily` / `fontWeight`.
+   * When no badge font knob is set, the resolved `font` is used as-is.
+   */
+  fontProp?: FontConfig;
   /**
    * Render only the badge + label (`true`) or only the lines / bands (`false`,
    * default). The caller draws the base pass behind the chart content and the
@@ -50,13 +63,65 @@ export function ReferenceLineOverlay({
    * of being erased by the fade's `dstOut` blend.
    */
   badgeLayer?: boolean;
+  /**
+   * Suppress the built-in tag (badge pill + connector + chevron + icon + gutter
+   * label) for this line — used when a custom `renderReferenceLine` element owns
+   * the tag. The line / band stroke still draws. No effect on the base pass.
+   */
+  suppressTag?: boolean;
+  /**
+   * Per-frame grouping flags (index-aligned): when this line's slot is `true` it's
+   * collapsed into a group count handle, so its tag is suppressed (the line / band
+   * stroke still draws).
+   */
+  groupHidden?: SharedValue<boolean[]>;
+  /** Per-line live value overrides (dragged values), index-aligned with `referenceLines`. */
+  dragValues?: SharedValue<number[]>;
+  /** This line's index into {@link dragValues}. */
+  index?: number;
 }) {
   const form = referenceLineForm(line);
   const isBand = form === "value-band" || form === "time-band";
-  const layout = useReferenceLine(engine, padding, line, formatValue, font);
 
   const color = line.color ?? palette.refLine;
-  const labelColor = line.labelColor ?? line.color ?? palette.refLabel;
+
+  // Resolved badge appearance (badge config → fallback flat fields → theme).
+  const badge = resolveReferenceBadge(line);
+
+  // Per-badge font (size/family/weight) override; reuses the chart `font` when no
+  // badge font knob is set, so plain lines and gutter labels are unchanged. The
+  // built font drives pill measurement (via useReferenceLine) and the badge text.
+  const badgeHasFontOverride =
+    badge != null &&
+    (badge.fontSize != null ||
+      badge.fontFamily != null ||
+      badge.fontWeight != null);
+  const badgeFontOverride = useChartSkiaFont(
+    badgeHasFontOverride
+      ? {
+          ...fontProp,
+          fontFamily: badge?.fontFamily ?? fontProp?.fontFamily,
+          fontSize: badge?.fontSize ?? fontProp?.fontSize,
+          fontWeight: badge?.fontWeight ?? fontProp?.fontWeight,
+        }
+      : fontProp,
+    MONO_FONT_FAMILY,
+    palette.labelFontSize,
+  );
+  const badgeFont = badgeHasFontOverride ? badgeFontOverride : font;
+
+  const layout = useReferenceLine(
+    engine,
+    padding,
+    line,
+    formatValue,
+    badgeFont,
+    dragValues,
+    index,
+  );
+
+  const labelColor =
+    badge?.textColor ?? line.labelColor ?? line.color ?? palette.refLabel;
   const strokeWidth = line.strokeWidth ?? 1;
   const intervals = line.intervals ?? [4, 4];
 
@@ -64,11 +129,17 @@ export function ReferenceLineOverlay({
   const bandFillOpacity = line.fillOpacity ?? BAND_FILL_OPACITY;
   const hasBandBorder = isBand && line.strokeWidth !== undefined;
 
-  // Resolved badge appearance (badge config → fallback flat fields → theme).
-  const badge = resolveReferenceBadge(line);
   const badgeBackground = badge?.background ?? palette.tooltipBg;
   const badgeBorderColor = badge?.borderColor ?? color;
+  const badgeBorderWidth = badge?.borderWidth ?? 1;
   const badgeRadius = badge?.radius ?? BADGE_PILL_RADIUS;
+  // Nudge the whole badge (connector + pill + chevron + icon + label) off its anchor.
+  const badgeOffsetX = badge?.offsetX ?? 0;
+  const badgeOffsetY = badge?.offsetY ?? 0;
+  const badgeTransform =
+    badgeOffsetX !== 0 || badgeOffsetY !== 0
+      ? [{ translateX: badgeOffsetX }, { translateY: badgeOffsetY }]
+      : undefined;
 
   const lineBuilder = usePathBuilder();
   const bandBuilder = usePathBuilder();
@@ -79,11 +150,11 @@ export function ReferenceLineOverlay({
   const linePath = useDerivedValue(() => {
     const b = lineBuilder.value;
     const l = layout.get();
-    // A plain full-width line. A badge instead draws a pill + a connector to the
-    // opposite edge, below.
-    if (l.visible && !l.badge && !isBand) {
-      b.moveTo(l.x1, l.y);
-      b.lineTo(l.x2, l.y);
+    // A plain horizontal line, drawn at the line extent (full-width when opted in).
+    // A non-full-width badge instead draws a pill + connector to the edge, below.
+    if (l.visible && l.drawLine && !isBand) {
+      b.moveTo(l.lineX1, l.y);
+      b.lineTo(l.lineX2, l.y);
     }
     return b.detach();
   });
@@ -92,10 +163,10 @@ export function ReferenceLineOverlay({
     const b = bandBuilder.value;
     const l = layout.get();
     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.moveTo(l.lineX1, l.y);
+      b.lineTo(l.lineX2, l.y);
+      b.lineTo(l.lineX2, l.yBottom);
+      b.lineTo(l.lineX1, l.yBottom);
       b.close();
     }
     return b.detach();
@@ -107,16 +178,16 @@ export function ReferenceLineOverlay({
     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);
+        b.moveTo(l.lineX1, l.y);
+        b.lineTo(l.lineX1, l.yBottom);
+        b.moveTo(l.lineX2, l.y);
+        b.lineTo(l.lineX2, 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);
+        b.moveTo(l.lineX1, l.y);
+        b.lineTo(l.lineX2, l.y);
+        b.moveTo(l.lineX1, l.yBottom);
+        b.lineTo(l.lineX2, l.yBottom);
       }
     }
     return b.detach();
@@ -155,7 +226,7 @@ export function ReferenceLineOverlay({
 
   const lineOpacity = useDerivedValue(() => {
     const l = layout.get();
-    return l.visible && !l.badge && !isBand ? 1 : 0;
+    return l.visible && l.drawLine && !isBand ? 1 : 0;
   });
   const bandOpacity = useDerivedValue(() =>
     layout.get().visible && isBand ? bandFillOpacity : 0,
@@ -165,12 +236,14 @@ export function ReferenceLineOverlay({
   );
   const badgeOpacity = useDerivedValue(() => {
     const l = layout.get();
-    return l.visible && l.badge ? 1 : 0;
+    const grouped = groupHidden ? groupHidden.get()[index] === true : false;
+    return !suppressTag && !grouped && l.visible && l.badge ? 1 : 0;
   });
   // Text + icon ride in the badge pass too, so they stay crisp above the fade.
   const labelOpacity = useDerivedValue(() => {
     const l = layout.get();
-    return l.visible && l.label.length > 0 ? 1 : 0;
+    const grouped = groupHidden ? groupHidden.get()[index] === true : false;
+    return !suppressTag && !grouped && l.visible && l.label.length > 0 ? 1 : 0;
   });
   const iconOpacity = useDerivedValue(() => {
     const l = layout.get();
@@ -186,7 +259,7 @@ export function ReferenceLineOverlay({
   // Font metrics depend only on the (stable) font, so read them once instead of
   // on every frame inside the pill worklet (`getMetrics` allocates + crosses JSI).
   const { ascent: fontAscent, height: pillH } = (() => {
-    const fm = font.getMetrics();
+    const fm = badgeFont.getMetrics();
     return {
       ascent: fm.ascent,
       height: fm.descent - fm.ascent + BADGE_PILL_PAD_Y * 2,
@@ -238,7 +311,7 @@ export function ReferenceLineOverlay({
 
       {/* Badge pass — connector + pill + chevron + icon, above the left-edge fade. */}
       {badgeLayer && (
-        <Group opacity={badgeOpacity}>
+        <Group opacity={badgeOpacity} transform={badgeTransform}>
           <Path
             path={connPath}
             style="stroke"
@@ -263,7 +336,7 @@ export function ReferenceLineOverlay({
             r={badgeRadius}
             color={badgeBorderColor}
             style="stroke"
-            strokeWidth={1}
+            strokeWidth={badgeBorderWidth}
           />
           <Path
             path={chevronPath}
@@ -278,7 +351,7 @@ export function ReferenceLineOverlay({
               x={iconX}
               y={labelY}
               text={iconText}
-              font={font}
+              font={badgeFont}
               color={labelColor}
             />
           </Group>
@@ -287,12 +360,12 @@ export function ReferenceLineOverlay({
 
       {/* Labels ride in the badge pass too, so they stay crisp above the fade. */}
       {badgeLayer && (
-        <Group opacity={labelOpacity}>
+        <Group opacity={labelOpacity} transform={badgeTransform}>
           <SkiaText
             x={labelX}
             y={labelY}
             text={labelText}
-            font={font}
+            font={badgeFont}
             color={labelColor}
           />
         </Group>

package/src/components/XAxisOverlay.tsx

@@ -19,12 +19,19 @@ export function XAxisOverlay({
   padding,
   palette,
   font,
+  volumeBandHeight = 0,
 }: {
   entries: SharedValue<XAxisEntry[]>;
   engine: ChartEngineLayout;
   padding: ChartPadding;
   palette: LiveChartPalette;
   font: SkFont;
+  /**
+   * Reserved volume-band height (px) folded into `padding.bottom`. The axis line
+   * + labels shift back down by this so they stay at the very bottom, below the
+   * band, while the price plot above shrinks. `0` = no band (default).
+   */
+  volumeBandHeight?: number;
 }) {
   const axisBuilder = usePathBuilder();
 
@@ -33,7 +40,7 @@ export function XAxisOverlay({
     const b = axisBuilder.value;
     const w = engine.canvasWidth.get();
     const h = engine.canvasHeight.get();
-    const lineY = h - padding.bottom;
+    const lineY = h - padding.bottom + volumeBandHeight;
 
     // Bottom axis line
     b.moveTo(padding.left, lineY);
@@ -53,7 +60,7 @@ export function XAxisOverlay({
     "worklet";
     const items = entries.get();
     const h = engine.canvasHeight.get();
-    const y = h - padding.bottom + LABEL_OFFSET_Y;
+    const y = h - padding.bottom + volumeBandHeight + LABEL_OFFSET_Y;
     const n = items.length;
     const out: { x: number; y: number; label: string; alpha: number }[] = [];
     for (let i = 0; i < n; i++) {

package/src/components/YAxisOverlay.tsx

@@ -22,6 +22,8 @@ import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import { AnimatedLabel } from "./AnimatedLabel";
 
 const MAX_Y_LABELS = 15;
+/** Right margin (px) for floating labels — keeps them just off the canvas edge. */
+const FLOAT_LABEL_RIGHT_MARGIN = 6;
 
 export function YAxisOverlay({
   entries,
@@ -34,6 +36,8 @@ export function YAxisOverlay({
   badgeMetrics = BADGE_METRICS_DEFAULTS,
   seriesLabelInset = 0,
   gridStyle,
+  variant = "all",
+  float = false,
 }: {
   entries: SharedValue<YAxisEntry[]>;
   engine: ChartEngineLayout;
@@ -50,6 +54,17 @@ export function YAxisOverlay({
   seriesLabelInset?: number;
   /** Grid-line styling overrides. Omit for the legacy solid 1px line. */
   gridStyle?: ResolvedGridStyleConfig;
+  /**
+   * Which parts to draw. `"all"` (default) renders grid lines + labels together.
+   * `"grid"` / `"labels"` split them so a chart can draw the grid behind the data
+   * and the labels (over a soft fade) on top — see {@link YAxisEdgeFade}.
+   */
+  variant?: "all" | "grid" | "labels";
+  /**
+   * Floating-axis mode: right-align labels at the canvas edge (over a full-width
+   * plot) instead of centering them in a reserved gutter. See {@link YAxisConfig.float}.
+   */
+  float?: boolean;
 }) {
   const gridColor = gridStyle?.color ?? palette.gridLine;
   const gridWidth = gridStyle?.strokeWidth ?? 1;
@@ -59,6 +74,7 @@ export function YAxisOverlay({
 
   const gridLinesPath = useDerivedValue(() => {
     const b = gridBuilder.value;
+    if (variant === "labels") return b.detach();
     const items = entries.get();
     const w = engine.canvasWidth.get();
     for (let i = 0; i < items.length; i++) {
@@ -72,6 +88,7 @@ export function YAxisOverlay({
     badgeMetrics.dotGap + badgeTailAndCap(font.getSize(), badgeTail, badgeMetrics);
 
   const labelEntries = useDerivedValue(() => {
+    if (variant === "grid") return [];
     const items = entries.get();
     const w = engine.canvasWidth.get();
     const fm = font.getMetrics();
@@ -80,11 +97,13 @@ export function YAxisOverlay({
     for (let i = 0; i < items.length; i++) {
       const e = items[i];
       const textW = measureFontTextWidth(font, e.label);
-      const x = badge
-        ? pillTextLeftX(w, padding.right, leftInset, textW, badgeMetrics)
-        : seriesLabelInset > 0
-          ? gutterRightAlignedTextLeftX(w, textW)
-          : gutterCenteredTextLeftX(w, padding.right, textW);
+      const x = float
+        ? gutterRightAlignedTextLeftX(w, textW, FLOAT_LABEL_RIGHT_MARGIN)
+        : badge
+          ? pillTextLeftX(w, padding.right, leftInset, textW, badgeMetrics)
+          : seriesLabelInset > 0
+            ? gutterRightAlignedTextLeftX(w, textW)
+            : gutterCenteredTextLeftX(w, padding.right, textW);
       result.push({
         x,
         y: e.y - baselineOffset,
@@ -97,27 +116,30 @@ export function YAxisOverlay({
 
   return (
     <Group>
-      <Group opacity={gridOpacity}>
-        <Path
-          path={gridLinesPath}
-          style="stroke"
-          strokeWidth={gridWidth}
-          color={gridColor}
-        >
-          {gridIntervals.length > 0 && (
-            <DashPathEffect intervals={gridIntervals} />
-          )}
-        </Path>
-      </Group>
-      {Array.from({ length: MAX_Y_LABELS }, (_, i) => (
-        <AnimatedLabel
-          key={i}
-          entries={labelEntries}
-          index={i}
-          font={font}
-          color={palette.gridLabel}
-        />
-      ))}
+      {variant !== "labels" && (
+        <Group opacity={gridOpacity}>
+          <Path
+            path={gridLinesPath}
+            style="stroke"
+            strokeWidth={gridWidth}
+            color={gridColor}
+          >
+            {gridIntervals.length > 0 && (
+              <DashPathEffect intervals={gridIntervals} />
+            )}
+          </Path>
+        </Group>
+      )}
+      {variant !== "grid" &&
+        Array.from({ length: MAX_Y_LABELS }, (_, i) => (
+          <AnimatedLabel
+            key={i}
+            entries={labelEntries}
+            index={i}
+            font={font}
+            color={palette.gridLabel}
+          />
+        ))}
     </Group>
   );
 }

package/src/constants.ts

@@ -9,6 +9,14 @@ import type {
 /** Milliseconds per frame at 60 fps — baseline for frame-rate-independent lerp. */
 export const MS_PER_FRAME_60FPS = 16.67;
 
+/**
+ * Default press-and-hold (ms) before scrub engages in the `holdToScrub`
+ * time-scroll mode, so a quick one-finger drag scrolls instead. Overridden by
+ * `timeScroll.scrubHoldMs`, then `scrub.panGestureDelay`. Shared by `LiveChart`
+ * and `LiveChartSeries`.
+ */
+export const HOLD_TO_SCRUB_MS = 500;
+
 // ─── Metric default tokens (single source of truth for LiveChartMetrics) ─────
 // The resolved `metrics` config (see resolveMetrics) is assembled from these
 // objects. Draw/worklet helpers default their metric params to the matching
@@ -29,6 +37,8 @@ export const CANDLE_METRICS_DEFAULTS: CandleMetrics = {
   minBodyPx: 1,
   maxBodyPx: 40,
   bodyWidthRatio: 0.8,
+  bodyRadius: 0,
+  wickWidth: 1,
 };
 
 /** Default grid + axis-label fade speeds. */