react-native-livechart 1.0.0 → 2.0.0

package/src/draw/line.ts

@@ -1,11 +1,5 @@
-import {
-  BADGE_DOT_GAP,
-  BADGE_MARGIN_RIGHT,
-  BADGE_PILL_PAD_X,
-  BADGE_PILL_PAD_Y,
-  BADGE_TAIL_LEN,
-} from "../constants";
-import type { ChartInsets, LiveChartPoint } from "../types";
+import { BADGE_METRICS_DEFAULTS } from "../constants";
+import type { BadgeMetrics, ChartInsets, LiveChartPoint } from "../types";
 export {
   BADGE_DOT_GAP,
   BADGE_MARGIN_RIGHT,
@@ -36,10 +30,14 @@ export const DEFAULT_PADDING: ChartPadding = {
  * When `showTail` is false the tail spike is omitted and only the round cap
  * radius is returned, letting callers shrink the right gutter.
  */
-export function badgeTailAndCap(fontSize: number, showTail = true): number {
+export function badgeTailAndCap(
+  fontSize: number,
+  showTail = true,
+  badge: BadgeMetrics = BADGE_METRICS_DEFAULTS,
+): number {
   "worklet";
-  const pillH = fontSize + BADGE_PILL_PAD_Y * 2;
-  return (showTail ? BADGE_TAIL_LEN : 0) + pillH / 2;
+  const pillH = fontSize + badge.padY * 2;
+  return (showTail ? badge.tailLength : 0) + pillH / 2;
 }
 
 /**
@@ -56,10 +54,11 @@ export function pillTextLeftX(
   paddingRight: number,
   tl: number,
   textWidth: number,
+  badge: BadgeMetrics = BADGE_METRICS_DEFAULTS,
 ): number {
   "worklet";
   const bodyLeft = canvasWidth - paddingRight + tl;
-  const bodyRight = canvasWidth - BADGE_MARGIN_RIGHT;
+  const bodyRight = canvasWidth - badge.marginEdge;
   return (bodyLeft + bodyRight - textWidth) / 2;
 }
 
@@ -98,10 +97,11 @@ export function minPaddingRightForBadgeYAxisAlign(
   fontSize: number,
   textWidth: number,
   showTail = true,
+  badge: BadgeMetrics = BADGE_METRICS_DEFAULTS,
 ): number {
-  const tl = badgeTailAndCap(fontSize, showTail);
+  const tl = badgeTailAndCap(fontSize, showTail, badge);
   return Math.ceil(
-    BADGE_DOT_GAP + tl + 2 * BADGE_PILL_PAD_X + textWidth + BADGE_MARGIN_RIGHT,
+    badge.dotGap + tl + 2 * badge.padX + textWidth + badge.marginEdge,
   );
 }
 
@@ -110,8 +110,9 @@ export function resolveAutoRight(
   yAxis: boolean,
   badge: boolean,
   showTail = true,
+  badgeMetrics: BadgeMetrics = BADGE_METRICS_DEFAULTS,
 ): number {
-  if (badge) return minPaddingRightForBadgeYAxisAlign(12, 49, showTail);
+  if (badge) return minPaddingRightForBadgeYAxisAlign(12, 49, showTail, badgeMetrics);
   if (yAxis) return 44;
   return DEFAULT_PADDING.right;
 }
@@ -120,15 +121,21 @@ export function resolveAutoRight(
  * Minimum `padding.left` for a badge pill drawn in the left chart margin (label width + horizontal padding + dot gap).
  * `resolveChartLayout` does not call this; it remains available for custom layouts or `resolvePadding(..., badgeOnLeft: true)`.
  */
-export function minPaddingLeftForBadge(textWidth: number): number {
+export function minPaddingLeftForBadge(
+  textWidth: number,
+  badge: BadgeMetrics = BADGE_METRICS_DEFAULTS,
+): number {
   return Math.ceil(
-    BADGE_MARGIN_RIGHT + 2 * BADGE_PILL_PAD_X + textWidth + BADGE_DOT_GAP,
+    badge.marginEdge + 2 * badge.padX + textWidth + badge.dotGap,
   );
 }
 
 /** Default left inset, or a wider inset when `badgeOnLeft` is true (see `minPaddingLeftForBadge`). */
-export function resolveAutoLeft(badgeOnLeft: boolean): number {
-  if (badgeOnLeft) return minPaddingLeftForBadge(49);
+export function resolveAutoLeft(
+  badgeOnLeft: boolean,
+  badgeMetrics: BadgeMetrics = BADGE_METRICS_DEFAULTS,
+): number {
+  if (badgeOnLeft) return minPaddingLeftForBadge(49, badgeMetrics);
   return DEFAULT_PADDING.left;
 }
 
@@ -171,9 +178,15 @@ export function resolvePadding(
   badgeOnLeft = false,
   xAxis = true,
   showTail = true,
+  badgeMetrics: BadgeMetrics = BADGE_METRICS_DEFAULTS,
 ): ChartPadding {
-  const autoRight = resolveAutoRight(yAxis, badge && !badgeOnLeft, showTail);
-  const autoLeft = resolveAutoLeft(badgeOnLeft);
+  const autoRight = resolveAutoRight(
+    yAxis,
+    badge && !badgeOnLeft,
+    showTail,
+    badgeMetrics,
+  );
+  const autoLeft = resolveAutoLeft(badgeOnLeft, badgeMetrics);
   const autoBottom = xAxis ? DEFAULT_PADDING.bottom : 8;
   if (!override) {
     return {
@@ -239,12 +252,80 @@ export function buildLinePoints(
   }
   const startIdx = Math.max(0, lo - 1);
 
-  for (let i = startIdx; i < data.length; i++) {
-    if (data[i].time > now) break;
+  // End of the visible range: first index strictly after `now` (upper bound).
+  let elo = startIdx;
+  let ehi = data.length;
+  while (elo < ehi) {
+    const emid = (elo + ehi) >> 1;
+    if (data[emid].time <= now) elo = emid + 1;
+    else ehi = emid;
+  }
+  const endIdx = elo;
+
+  const xScale = chartW / windowSecs;
+  const yScale = chartH / valRange;
+
+  // Decimate to ~2 points per horizontal pixel once the window is denser than
+  // that. Drawing more points than the canvas is wide is wasted per-frame work
+  // (array build + Skia stroke) that scales with sample count rather than
+  // pixels — the dominant cost on dense / wide-window charts, and the reason
+  // scrubbing a saturated window drops frames. Below the threshold we keep the
+  // exact per-sample path (and existing behaviour) untouched.
+  const maxPlainPoints = Math.ceil(chartW * 2);
+
+  if (endIdx - startIdx <= maxPlainPoints) {
+    for (let i = startIdx; i < endIdx; i++) {
+      pts.push(
+        padding.left + (data[i].time - winStart) * xScale,
+        padding.top + (displayMax - data[i].value) * yScale,
+      );
+    }
+  } else {
+    // Min/max-per-pixel-column decimation: within each pixel column keep the
+    // lowest- and highest-value samples (emitted in their original time order)
+    // so the line's envelope and any volatility spikes survive at full vertical
+    // fidelity while the point count stays bounded by the canvas width.
+    let curCol = -2147483648;
+    let minIdx = startIdx;
+    let maxIdx = startIdx;
+    for (let i = startIdx; i < endIdx; i++) {
+      const col = ((data[i].time - winStart) * xScale) | 0;
+      if (col !== curCol) {
+        if (curCol !== -2147483648) {
+          const a = minIdx <= maxIdx ? minIdx : maxIdx;
+          const b = minIdx <= maxIdx ? maxIdx : minIdx;
+          pts.push(
+            padding.left + (data[a].time - winStart) * xScale,
+            padding.top + (displayMax - data[a].value) * yScale,
+          );
+          if (b !== a) {
+            pts.push(
+              padding.left + (data[b].time - winStart) * xScale,
+              padding.top + (displayMax - data[b].value) * yScale,
+            );
+          }
+        }
+        curCol = col;
+        minIdx = i;
+        maxIdx = i;
+      } else {
+        if (data[i].value < data[minIdx].value) minIdx = i;
+        if (data[i].value > data[maxIdx].value) maxIdx = i;
+      }
+    }
+    // Flush the final column.
+    const a = minIdx <= maxIdx ? minIdx : maxIdx;
+    const b = minIdx <= maxIdx ? maxIdx : minIdx;
     pts.push(
-      padding.left + ((data[i].time - winStart) / windowSecs) * chartW,
-      padding.top + ((displayMax - data[i].value) / valRange) * chartH,
+      padding.left + (data[a].time - winStart) * xScale,
+      padding.top + (displayMax - data[a].value) * yScale,
     );
+    if (b !== a) {
+      pts.push(
+        padding.left + (data[b].time - winStart) * xScale,
+        padding.top + (displayMax - data[b].value) * yScale,
+      );
+    }
   }
 
   // Live tip at current time with smoothed value

package/src/draw/markerAtlas.ts

@@ -0,0 +1,304 @@
+import {
+  Skia,
+  PaintStyle,
+  StrokeCap,
+  StrokeJoin,
+  drawAsImageFromPicture,
+  type SkCanvas,
+  type SkFont,
+  type SkImage,
+  type SkPaint,
+  type SkRect,
+} from "@shopify/react-native-skia";
+import type { LiveChartPalette, Marker, MarkerKind } from "../types";
+
+/** Default icon box (px) when `marker.size` is unset. */
+export const DEFAULT_ICON_SIZE = 16;
+/** Circular badge padding around the icon glyph + background ring width. */
+const PILL_PAD = 2;
+const PILL_BORDER = 2;
+const PILL_TEXT_COLOR = "#ffffff";
+/** Anti-alias breathing room baked around every cell so sprites don't clip. */
+const CELL_MARGIN = 2;
+
+/** Default glyph color per kind when `marker.color` is unset. */
+export function defaultMarkerColor(
+  kind: MarkerKind,
+  palette: LiveChartPalette,
+): string {
+  switch (kind) {
+    case "trade":
+      return palette.line;
+    case "boost":
+      return palette.refLine;
+    case "graduation":
+      return palette.dotUp;
+    case "winner":
+      return palette.dotUp;
+    case "clawback":
+      return palette.refLabel;
+  }
+}
+
+/**
+ * Axis-anchored kinds whose geometry depends on the chart's baseline (a
+ * variable-length stem, or a box pinned to the axis) and therefore cannot be a
+ * fixed-size sprite. These fall back to a self-projecting glyph component.
+ *
+ * Only applies when the marker has no `icon`/`image` override — those take
+ * precedence and render as ordinary centered stamps via the atlas.
+ */
+export function isConnectorMarker(m: Marker): boolean {
+  "worklet";
+  return (
+    !m.image &&
+    !m.icon &&
+    (m.kind === "graduation" || m.kind === "clawback")
+  );
+}
+
+/**
+ * Stable key for a marker's *visual appearance* (excludes position/anchor).
+ * Two markers with the same signature share one atlas cell. Called both on the
+ * JS thread (to build the atlas) and inside the per-frame worklet (to look a
+ * marker's cell up), so it must stay worklet-safe and primitive-only.
+ */
+export function markerAppearanceSig(m: Marker): string {
+  "worklet";
+  if (m.image) return `img\x1f${m.id}\x1f${m.size ?? DEFAULT_ICON_SIZE}`;
+  const size = m.size ?? "";
+  if (m.icon)
+    return `ic\x1f${m.icon}\x1f${m.pill ? 1 : 0}\x1f${m.color ?? ""}\x1f${size}`;
+  return `k\x1f${m.kind}\x1f${m.color ?? ""}\x1f${size}`;
+}
+
+/** One packed glyph in the atlas image: its source rect + box size. */
+export interface AtlasCell {
+  rect: SkRect;
+  w: number;
+  h: number;
+}
+
+export interface MarkerAtlas {
+  /** Packed glyph texture, or null when there are no atlas-rendered markers. */
+  image: SkImage | null;
+  /** appearance-signature → cell. */
+  cells: Record<string, AtlasCell>;
+}
+
+const EMPTY_ATLAS: MarkerAtlas = { image: null, cells: {} };
+
+function fillPaint(color: string): SkPaint {
+  const p = Skia.Paint();
+  p.setAntiAlias(true);
+  p.setColor(Skia.Color(color));
+  p.setStyle(PaintStyle.Fill);
+  return p;
+}
+
+function strokePaint(color: string, width: number, round = false): SkPaint {
+  const p = Skia.Paint();
+  p.setAntiAlias(true);
+  p.setColor(Skia.Color(color));
+  p.setStyle(PaintStyle.Stroke);
+  p.setStrokeWidth(width);
+  if (round) {
+    p.setStrokeCap(StrokeCap.Round);
+    p.setStrokeJoin(StrokeJoin.Round);
+  }
+  return p;
+}
+
+interface CellSpec {
+  w: number;
+  h: number;
+  /** Draw the glyph centered at (cx, cy) in the recording canvas. */
+  draw: (canvas: SkCanvas, cx: number, cy: number) => void;
+}
+
+/**
+ * Geometry + draw routine for one marker appearance. Mirrors the per-glyph
+ * rendering the old `MarkerGlyph` did inline, so the atlas is pixel-equivalent.
+ */
+function cellSpec(m: Marker, palette: LiveChartPalette, font: SkFont): CellSpec {
+  const color = m.color ?? defaultMarkerColor(m.kind, palette);
+  const m2 = CELL_MARGIN * 2;
+
+  if (m.image) {
+    const img = m.image;
+    const size = m.size ?? DEFAULT_ICON_SIZE;
+    const imgPaint = Skia.Paint();
+    imgPaint.setAntiAlias(true);
+    return {
+      w: size + m2,
+      h: size + m2,
+      draw: (canvas, cx, cy) => {
+        const iw = img.width();
+        const ih = img.height();
+        // `contain` fit: scale to fit the box without distorting aspect.
+        const scale = iw > 0 && ih > 0 ? Math.min(size / iw, size / ih) : 1;
+        const dw = iw * scale;
+        const dh = ih * scale;
+        canvas.drawImageRect(
+          img,
+          Skia.XYWHRect(0, 0, iw, ih),
+          Skia.XYWHRect(cx - dw / 2, cy - dh / 2, dw, dh),
+          imgPaint,
+        );
+      },
+    };
+  }
+
+  if (m.icon) {
+    const icon = m.icon;
+    const b = font.measureText(icon);
+    // Center the glyph on its measured bounds (tighter than ascent/descent).
+    const iconDX = b.x + b.width / 2;
+    const iconDY = b.y + b.height / 2;
+
+    if (m.pill) {
+      const bgColor = `rgb(${palette.bgRgb[0]}, ${palette.bgRgb[1]}, ${palette.bgRgb[2]})`;
+      const pillR = Math.max(b.width, b.height) / 2 + PILL_PAD;
+      const ringR = pillR + PILL_BORDER;
+      const box = Math.ceil(2 * ringR) + m2;
+      return {
+        w: box,
+        h: box,
+        draw: (canvas, cx, cy) => {
+          canvas.drawCircle(cx, cy, ringR, fillPaint(bgColor));
+          canvas.drawCircle(cx, cy, pillR, fillPaint(color));
+          canvas.drawText(
+            icon,
+            cx - iconDX,
+            cy - iconDY,
+            fillPaint(PILL_TEXT_COLOR),
+            font,
+          );
+        },
+      };
+    }
+
+    return {
+      w: Math.ceil(Math.max(b.width, 1)) + m2,
+      h: Math.ceil(Math.max(b.height, 1)) + m2,
+      draw: (canvas, cx, cy) => {
+        canvas.drawText(icon, cx - iconDX, cy - iconDY, fillPaint(color), font);
+      },
+    };
+  }
+
+  if (m.kind === "trade") {
+    const box = 2 * (5 + 1) + m2; // ring r=5 stroked w=2
+    return {
+      w: box,
+      h: box,
+      draw: (canvas, cx, cy) => {
+        canvas.drawCircle(cx, cy, 5, strokePaint(color, 2));
+        canvas.drawCircle(cx, cy, 2, fillPaint(color));
+      },
+    };
+  }
+
+  if (m.kind === "winner") {
+    const outer = 7;
+    const inner = 3;
+    const box = 2 * outer + m2;
+    return {
+      w: box,
+      h: box,
+      draw: (canvas, cx, cy) => {
+        const p = Skia.Path.Make();
+        for (let k = 0; k < 10; k++) {
+          const ang = -Math.PI / 2 + (k * Math.PI) / 5;
+          const rad = k % 2 === 0 ? outer : inner;
+          const px = cx + rad * Math.cos(ang);
+          const py = cy + rad * Math.sin(ang);
+          if (k === 0) p.moveTo(px, py);
+          else p.lineTo(px, py);
+        }
+        p.close();
+        canvas.drawPath(p, fillPaint(color));
+      },
+    };
+  }
+
+  if (m.kind === "boost") {
+    const L = 6;
+    const box = 2 * L + m2;
+    return {
+      w: box,
+      h: box,
+      draw: (canvas, cx, cy) => {
+        const p = Skia.Path.Make();
+        for (let k = 0; k < 4; k++) {
+          const ang = (k * Math.PI) / 4;
+          const dx = L * Math.cos(ang);
+          const dy = L * Math.sin(ang);
+          p.moveTo(cx - dx, cy - dy);
+          p.lineTo(cx + dx, cy + dy);
+        }
+        canvas.drawPath(p, strokePaint(color, 1.5, true));
+      },
+    };
+  }
+
+  // Connector kinds are handled outside the atlas; this is a defensive dot.
+  const box = 6 + m2;
+  return {
+    w: box,
+    h: box,
+    draw: (canvas, cx, cy) => canvas.drawCircle(cx, cy, 3, fillPaint(color)),
+  };
+}
+
+/**
+ * Rasterize every distinct marker appearance into a single packed atlas image,
+ * once per appearance-set change (NOT per frame). The per-frame worklet then
+ * blits these cells via one `drawAtlas` call.
+ *
+ * Connector kinds (see `isConnectorMarker`) are skipped — they render via a
+ * self-projecting fallback component.
+ */
+export function buildMarkerAtlas(
+  markers: Marker[],
+  palette: LiveChartPalette,
+  font: SkFont,
+): MarkerAtlas {
+  const seen = new Set<string>();
+  const specs: { sig: string; spec: CellSpec }[] = [];
+  for (let i = 0; i < markers.length; i++) {
+    const m = markers[i];
+    if (isConnectorMarker(m)) continue;
+    const sig = markerAppearanceSig(m);
+    if (seen.has(sig)) continue;
+    seen.add(sig);
+    specs.push({ sig, spec: cellSpec(m, palette, font) });
+  }
+  if (specs.length === 0) return EMPTY_ATLAS;
+
+  let totalW = 0;
+  let maxH = 0;
+  for (let i = 0; i < specs.length; i++) {
+    totalW += specs[i].spec.w;
+    if (specs[i].spec.h > maxH) maxH = specs[i].spec.h;
+  }
+  const W = Math.max(1, Math.ceil(totalW));
+  const H = Math.max(1, Math.ceil(maxH));
+
+  const recorder = Skia.PictureRecorder();
+  const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, W, H));
+  const cells: Record<string, AtlasCell> = {};
+  let x = 0;
+  for (let i = 0; i < specs.length; i++) {
+    const { sig, spec } = specs[i];
+    canvas.save();
+    canvas.translate(x, 0);
+    spec.draw(canvas, spec.w / 2, H / 2);
+    canvas.restore();
+    cells[sig] = { rect: Skia.XYWHRect(x, 0, spec.w, H), w: spec.w, h: H };
+    x += spec.w;
+  }
+  const picture = recorder.finishRecordingAsPicture();
+  const image = drawAsImageFromPicture(picture, { width: W, height: H });
+  return { image, cells };
+}

package/src/hooks/crosshairShared.ts

@@ -109,6 +109,11 @@ export function computeTooltipLayout(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
+  /** Monospace advance width. When > 0, text width is `len * monoCharWidth`
+   *  instead of a per-frame Skia `measureText` — scrubbing re-runs this worklet
+   *  every frame, and `measureText` shapes text each call (a real cost,
+   *  especially in the simulator). Falls back to `measureText` when 0. */
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || scrubValue === null) return HIDDEN_TOOLTIP;
@@ -122,8 +127,14 @@ export function computeTooltipLayout(
   const lineH = -fm.ascent + fm.descent;
   const totalH = TOOLTIP_PAD_Y * 2 + lineH * 2 + TOOLTIP_LINE_GAP;
 
-  const valueW = measureFontTextWidth(font, valueStr);
-  const timeW = measureFontTextWidth(font, timeStr);
+  const valueW =
+    monoCharWidth > 0
+      ? valueStr.length * monoCharWidth
+      : measureFontTextWidth(font, valueStr);
+  const timeW =
+    monoCharWidth > 0
+      ? timeStr.length * monoCharWidth
+      : measureFontTextWidth(font, timeStr);
   const contentW = Math.max(valueW, timeW);
   const pillW = contentW + TOOLTIP_PAD_X * 2;
 
@@ -166,6 +177,9 @@ export function computeTooltipLayoutMulti(
   padding: ChartPadding,
   canvasWidth: number,
   font: SkFont,
+  /** Monospace advance width; when > 0, sizes text by length instead of a
+   *  per-frame Skia `measureText`. See {@link computeTooltipLayout}. */
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || lines.length === 0) return HIDDEN_TOOLTIP;
@@ -179,7 +193,10 @@ export function computeTooltipLayoutMulti(
   let contentW = 0;
   const lineWidths: number[] = [];
   for (let i = 0; i < n; i++) {
-    const w = measureFontTextWidth(font, lines[i].text);
+    const w =
+      monoCharWidth > 0
+        ? lines[i].text.length * monoCharWidth
+        : measureFontTextWidth(font, lines[i].text);
     lineWidths.push(w);
     if (w > contentW) contentW = w;
   }
@@ -237,6 +254,7 @@ export function computeCandleTooltipLayout(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || !candle) return HIDDEN_TOOLTIP;
@@ -254,6 +272,7 @@ export function computeCandleTooltipLayout(
     padding,
     canvasWidth,
     font,
+    monoCharWidth,
   );
 }
 
@@ -279,6 +298,7 @@ export function deriveCrosshairTooltipSingle(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || scrubTime < 0) return HIDDEN_TOOLTIP;
@@ -292,5 +312,6 @@ export function deriveCrosshairTooltipSingle(
     formatValue,
     formatTime,
     font,
+    monoCharWidth,
   );
 }

package/src/hooks/resolveChartLayout.ts

@@ -9,7 +9,7 @@ import {
   resolvePadding,
   type ChartPadding,
 } from "../draw/line";
-import type { ChartInsets, LiveChartPalette } from "../types";
+import type { BadgeMetrics, ChartInsets, LiveChartPalette } from "../types";
 
 export interface ChartLayoutConfig {
   palette: LiveChartPalette;
@@ -17,6 +17,8 @@ export interface ChartLayoutConfig {
   insetsOverride?: ChartInsets;
   yAxis: boolean;
   badge: boolean;
+  /** Badge pill geometry tokens. Omit for built-in defaults. */
+  badgeMetrics?: BadgeMetrics;
   /**
    * When true (default if omitted and `badge` is true), reserve the wide right gutter for the badge.
    * Set false when the badge is anchored left of the live dot (`position: "left"`).
@@ -79,6 +81,7 @@ export function resolveChartLayout(
           config.font.getSize(),
           measuredYAxisLabelWidth,
           showTail,
+          config.badgeMetrics,
         )
       : config.multiSeriesValueLabel && config.yAxis
         ? Math.max(
@@ -91,7 +94,12 @@ export function resolveChartLayout(
             ? Math.max(measuredYAxisLabelWidth + 16 + dotR * 2, 44)
             : resolveAutoRight(false, false);
   } else {
-    rightPad = resolveAutoRight(config.yAxis, badgeUsesRightGutter, showTail);
+    rightPad = resolveAutoRight(
+      config.yAxis,
+      badgeUsesRightGutter,
+      showTail,
+      config.badgeMetrics,
+    );
   }
 
   if (config.pulse && config.yAxis && config.insetsOverride?.right == null) {
@@ -121,6 +129,7 @@ export function resolveChartLayout(
     false,
     xAxis,
     showTail,
+    config.badgeMetrics,
   );
 
   let padding: ChartPadding = { ...base, right: rightPad, left: leftPad };