react-native-livechart 4.15.1 → 4.17.0

package/src/components/LiveChartSeries.tsx

@@ -39,6 +39,7 @@ import {
   resolveMarkerCluster,
   resolveMetrics,
   resolveMultiSeriesDot,
+  resolveFling,
   resolveOverscroll,
   resolveReturnToLiveMs,
   resolveScrub,
@@ -139,6 +140,7 @@ function useLiveChartSeriesController({
   font: fontProp,
   insets,
   style,
+  seriesOpacity,
   canvasMode = "transparent",
   timeWindow = 30,
   paused = false,
@@ -190,6 +192,8 @@ function useLiveChartSeriesController({
   renderOffAxisReferenceLine,
   leftEdgeFade = true,
 }: LiveChartSeriesProps) {
+  const fullSeriesOpacity = useSharedValue(1);
+  const resolvedSeriesOpacity = seriesOpacity ?? fullSeriesOpacity;
   const emptyMarkers = useSharedValue<Marker[]>([]);
   const markersSV = markers ?? emptyMarkers;
   const markerClusterCfg = resolveMarkerCluster(markerCluster);
@@ -218,6 +222,8 @@ function useLiveChartSeriesController({
   const timeScrollOverscroll = timeScrollEnabled
     ? resolveOverscroll(timeScroll)
     : 0;
+  // Release inertia (fling) — `timeScroll.fling: false` stops the pan dead.
+  const timeScrollFling = resolveFling(timeScroll);
   const zoomCfg = resolveZoom(zoom);
   const zoomEnabled = zoomCfg !== null;
   const scrollGestureMode =
@@ -518,6 +524,7 @@ function useLiveChartSeriesController({
     enabled: timeScrollEnabled,
     mode: scrollGestureMode,
     overscroll: timeScrollOverscroll,
+    fling: timeScrollFling,
     scrollActive,
     // Once a scrub is engaged the chart is locked: scrolling goes inert so the
     // finger only moves the price indicator across a fixed window.
@@ -589,6 +596,7 @@ function useLiveChartSeriesController({
   return {
     // passthrough props the render needs
     series,
+    seriesOpacity: resolvedSeriesOpacity,
     style,
     canvasMode,
     accessibilityLabel,
@@ -700,6 +708,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     overlayScrubFade,
     renderMarker,
     series,
+    seriesOpacity,
     emptyText,
     loadingAxisLabels,
     metricsCfg,
@@ -750,30 +759,32 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         ))}
       </Group>
 
-      {dotCfg.valueLine && (
+      <Group opacity={seriesOpacity}>
+        {dotCfg.valueLine && (
+          <Group opacity={reveal.lineOpacity}>
+            <MultiSeriesValueLines
+              engine={engine}
+              padding={effectivePadding}
+              colors={lineColors}
+              config={dotCfg.valueLine}
+              seriesCount={activeSeriesCount}
+            />
+          </Group>
+        )}
+
         <Group opacity={reveal.lineOpacity}>
-          <MultiSeriesValueLines
-            engine={engine}
-            padding={effectivePadding}
-            colors={lineColors}
-            config={dotCfg.valueLine}
-            seriesCount={activeSeriesCount}
-          />
+          {Array.from({ length: activeSeriesCount }, (_, i) => (
+            <MultiSeriesStroke
+              key={i}
+              index={i}
+              paths={linePaths}
+              opacities={engine.seriesOpacities}
+              series={effectiveSeries}
+              strokeWidth={strokeWidth}
+              lineStyle={lineStyles[i]}
+            />
+          ))}
         </Group>
-      )}
-
-      <Group opacity={reveal.lineOpacity}>
-        {Array.from({ length: activeSeriesCount }, (_, i) => (
-          <MultiSeriesStroke
-            key={i}
-            index={i}
-            paths={linePaths}
-            opacities={engine.seriesOpacities}
-            series={effectiveSeries}
-            strokeWidth={strokeWidth}
-            lineStyle={lineStyles[i]}
-          />
-        ))}
       </Group>
 
       {xAxisCfg && (
@@ -787,19 +798,21 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
       )}
 
       {dotCfg.show && (
-        <Group opacity={reveal.dotOpacity}>
-          <MultiSeriesDots
-            engine={engine}
-            padding={effectivePadding}
-            colors={lineColors}
-            radius={dotCfg.radius}
-            ring={dotCfg.ring}
-            ringColor={palette.badgeOuterBg}
-            color={dotCfg.color}
-            pulse={dotCfg.pulse}
-            viewEnd={engine.viewEnd}
-            seriesCount={activeSeriesCount}
-          />
+        <Group opacity={seriesOpacity}>
+          <Group opacity={reveal.dotOpacity}>
+            <MultiSeriesDots
+              engine={engine}
+              padding={effectivePadding}
+              colors={lineColors}
+              radius={dotCfg.radius}
+              ring={dotCfg.ring}
+              ringColor={palette.badgeOuterBg}
+              color={dotCfg.color}
+              pulse={dotCfg.pulse}
+              viewEnd={engine.viewEnd}
+              seriesCount={activeSeriesCount}
+            />
+          </Group>
         </Group>
       )}
 
@@ -872,21 +885,24 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
     lineColors,
     skiaFont,
     reveal,
+    seriesOpacity,
     degenShakeTransform,
     activeSeriesCount,
   } = model;
   if (!dotCfg.valueLabel) return null;
   return (
     <Group transform={degenShakeTransform}>
-      <Group opacity={reveal.dotOpacity}>
-        <MultiSeriesValueLabels
-          engine={engine}
-          padding={effectivePadding}
-          colors={lineColors}
-          font={skiaFont}
-          dotRadius={dotOuterRadius}
-          seriesCount={activeSeriesCount}
-        />
+      <Group opacity={seriesOpacity}>
+        <Group opacity={reveal.dotOpacity}>
+          <MultiSeriesValueLabels
+            engine={engine}
+            padding={effectivePadding}
+            colors={lineColors}
+            font={skiaFont}
+            dotRadius={dotOuterRadius}
+            seriesCount={activeSeriesCount}
+          />
+        </Group>
       </Group>
     </Group>
   );

package/src/core/liveChartEngineTick.ts

@@ -371,7 +371,11 @@ export function tickLiveChartEngineFrame(
         : 1;
     if (yScale !== 1) {
       const scaledMid = (tMin + tMax) / 2;
-      const scaledHalf = ((tMax - tMin) / 2) * yScale;
+      let scaledHalf = ((tMax - tMin) / 2) * yScale;
+      // On non-negative charts, cap the zoom-out at the point where the floor
+      // reaches 0. Letting it grow and clamping min afterwards keeps only the
+      // top expanding, which pins the data to the bottom of the plot.
+      if (input.nonNegative && scaledHalf > scaledMid) scaledHalf = scaledMid;
       const scaledMin = scaledMid - scaledHalf;
       const scaledMax = scaledMid + scaledHalf;
       // Reject multiplication overflow and subnormal scales that round the two

package/src/core/liveChartSeriesEngineTick.ts

@@ -305,7 +305,11 @@ export function tickLiveChartSeriesEngineFrame(
         : 1;
     if (yScale !== 1) {
       const scaledMid = (tMin + tMax) / 2;
-      const scaledHalf = ((tMax - tMin) / 2) * yScale;
+      let scaledHalf = ((tMax - tMin) / 2) * yScale;
+      // On non-negative charts, cap the zoom-out at the point where the floor
+      // reaches 0. Letting it grow and clamping min afterwards keeps only the
+      // top expanding, which pins the data to the bottom of the plot.
+      if (input.nonNegative && scaledHalf > scaledMid) scaledHalf = scaledMid;
       const scaledMin = scaledMid - scaledHalf;
       const scaledMax = scaledMid + scaledHalf;
       if (

package/src/core/resolveConfig.ts

@@ -582,6 +582,18 @@ export function resolveOverscroll(
   return v < MAX_OVERSCROLL ? v : MAX_OVERSCROLL;
 }
 
+/**
+ * Resolves `timeScroll.fling`: `false` disables release inertia so the window
+ * stops dead where the finger lifts. Booleans / omitted keep the default (on).
+ * See {@link TimeScrollConfig}.
+ */
+export function resolveFling(
+  prop: boolean | TimeScrollConfig | undefined,
+): boolean {
+  if (prop == null || typeof prop === "boolean") return true;
+  return prop.fling ?? true;
+}
+
 /**
  * Resolved transition durations. `undefined` for a field means "use the
  * component's built-in default" (so we don't duplicate the default constants
@@ -875,6 +887,7 @@ export function resolveMarkerCluster(
       overlap: clamp01(prop.overlap ?? MARKER_CLUSTER_OVERLAP),
       gap: MARKER_CLUSTER_GAP,
       maxBeforeGroup: prop.maxBeforeGroup ?? MARKER_CLUSTER_MAX_BEFORE_GROUP,
+      maxVisible: prop.maxVisible ?? Number.MAX_SAFE_INTEGER,
       groupBadge: prop.groupBadge ?? "count",
       showGroupCount: prop.showGroupCount ?? false,
     };
@@ -885,6 +898,7 @@ export function resolveMarkerCluster(
     overlap: MARKER_CLUSTER_OVERLAP,
     gap: MARKER_CLUSTER_GAP,
     maxBeforeGroup: MARKER_CLUSTER_MAX_BEFORE_GROUP,
+    maxVisible: Number.MAX_SAFE_INTEGER,
     groupBadge: "count",
     showGroupCount: false,
   };

package/src/core/useLiveChartEngine.ts

@@ -5,7 +5,7 @@
  *
  * @see https://github.com/benjitaylor/liveline
  */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import {
   cancelAnimation,
   Easing,
@@ -497,7 +497,11 @@ export function useLiveChartEngine(
   // Compare against the previous key (not a "first render" flag) so React 18
   // StrictMode's double-invoked mount effect can't fire a spurious snap.
   const lastSnapKey = useRef(config.snapKey);
-  useEffect(() => {
+  // Layout effect, not passive: a passive effect runs after the commit has
+  // painted, so the frame between them draws the new data/candleWidth against
+  // the OLD framing (a one-frame squeeze on a timeframe switch). Flipping the
+  // flag before paint lets the first frame with the new props consume the snap.
+  useLayoutEffect(() => {
     if (config.snapKey === lastSnapKey.current) return;
     lastSnapKey.current = config.snapKey;
     snapSV.set(true);

package/src/core/useLiveChartSeriesEngine.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import {
   cancelAnimation,
   Easing,
@@ -343,7 +343,9 @@ export function useLiveChartSeriesEngine(
   // changes, consumed + cleared by the next frame (mirrors useLiveChartEngine).
   const snapSV = useSharedValue(false);
   const lastSnapKey = useRef(config.snapKey);
-  useEffect(() => {
+  // Layout effect so the snap flag lands before the commit paints — a passive
+  // effect leaves one frame of new data in the old framing (mirrors useLiveChartEngine).
+  useLayoutEffect(() => {
     if (config.snapKey === lastSnapKey.current) return;
     lastSnapKey.current = config.snapKey;
     snapSV.set(true);

package/src/hooks/useCandlePaths.ts

@@ -17,33 +17,25 @@ import { usePathBuilder } from "./usePathBuilder";
 const CANDLE_WIDTH_LERP_SPEED = 0.08;
 
 /**
- * Candle paths (up/down bodies + up/down wicks). Each is built into a reused
- * `Skia.PathBuilder` and finalized with `detach()` each frame — a fresh
- * immutable `SkPath`, so Skia repaints without a per-curve ping-pong and no
- * mutable `SkPath` is retained across frames.
+ * Bridges the `candleWidth` prop to the UI thread and eases the displayed
+ * width toward it each frame. Must be called from the chart's OUTER component
+ * (the controller), not from inside the Skia canvas: canvas children render
+ * through Skia's own reconciler one commit behind the outer tree, so a width
+ * bridged in there lands one frame after the engine's framing targets — a
+ * timeframe switch then draws one frame of new data at the old width. See #176.
  */
-export function useCandlePaths(
-  engine: SingleEngineState,
-  padding: ChartPadding,
-  candles: SharedValue<CandlePoint[]> | undefined,
-  liveCandle: SharedValue<CandlePoint | null> | undefined,
+export function useCandleWidthLerp(
   candleWidthSecs: number,
-  active: boolean,
-  candleMetrics: CandleMetrics = CANDLE_METRICS_DEFAULTS,
-  /** Reserved volume-band height (px). `0` = no volume bars. */
-  volumeBandHeight = 0,
-  /** Corner radius (px) of the volume bars. */
-  volumeRadius = 0,
-  /** Static charts run no loops: register without starting. Default `true`. */
-  autostart = true,
   /**
    * Per-frame lerp speed (0–1) for the candle-body width as it eases toward
    * `candleWidthSecs`. `1` snaps in one frame (no "fat → thin" slide on a
    * timeframe / bucket change); `undefined` uses {@link CANDLE_WIDTH_LERP_SPEED}.
    * Resolved from `transitions.candleLerpSpeed`. See #176.
    */
-  candleLerpSpeed?: number,
-) {
+  candleLerpSpeed: number | undefined,
+  /** Static charts run no loops: register without starting. */
+  autostart: boolean,
+): SharedValue<number> {
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
   // `transitions.candleLerpSpeed` overrides the built-in speed (0–1, already
@@ -54,16 +46,8 @@ export function useCandlePaths(
     () => candleLerpSpeed ?? CANDLE_WIDTH_LERP_SPEED,
   );
 
-  const upBodiesBuilder = usePathBuilder();
-  const downBodiesBuilder = usePathBuilder();
-  const upWicksBuilder = usePathBuilder();
-  const downWicksBuilder = usePathBuilder();
-  const upBarsBuilder = usePathBuilder();
-  const downBarsBuilder = usePathBuilder();
-
   useFrameCallback((frameInfo) => {
     "worklet";
-    if (!active) return;
     const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
     displayCandleWidth.set(
       lerp(
@@ -75,6 +59,36 @@ export function useCandlePaths(
     );
   }, autostart);
 
+  return displayCandleWidth;
+}
+
+/**
+ * Candle paths (up/down bodies + up/down wicks). Each is built into a reused
+ * `Skia.PathBuilder` and finalized with `detach()` each frame — a fresh
+ * immutable `SkPath`, so Skia repaints without a per-curve ping-pong and no
+ * mutable `SkPath` is retained across frames.
+ */
+export function useCandlePaths(
+  engine: SingleEngineState,
+  padding: ChartPadding,
+  candles: SharedValue<CandlePoint[]> | undefined,
+  liveCandle: SharedValue<CandlePoint | null> | undefined,
+  /** Displayed bucket width from {@link useCandleWidthLerp} (outer component). */
+  displayCandleWidth: SharedValue<number>,
+  active: boolean,
+  candleMetrics: CandleMetrics = CANDLE_METRICS_DEFAULTS,
+  /** Reserved volume-band height (px). `0` = no volume bars. */
+  volumeBandHeight = 0,
+  /** Corner radius (px) of the volume bars. */
+  volumeRadius = 0,
+) {
+  const upBodiesBuilder = usePathBuilder();
+  const downBodiesBuilder = usePathBuilder();
+  const upWicksBuilder = usePathBuilder();
+  const downWicksBuilder = usePathBuilder();
+  const upBarsBuilder = usePathBuilder();
+  const downBarsBuilder = usePathBuilder();
+
   /* istanbul ignore next -- worklet */
   const geometry = useDerivedValue(() => {
     if (!active || !candles) return { bodies: [], wicks: [] };

package/src/hooks/useChartReveal.ts

@@ -51,8 +51,9 @@ export interface ChartRevealState {
 /**
  * Drives loading / empty / live visibility.
  *
- * Chart is fully revealed only when `!loading && hasData`. `morphT` animates
- * between 0 and 1 when that condition changes. `isEmpty` is derived as
+ * Chart is fully revealed only when `!loading && hasData`. Data appearing
+ * grows `morphT` from 0 to 1; data disappearing snaps it to 0 so stale paths
+ * never visibly flatten over a loading or empty shell. `isEmpty` is derived as
  * `!loading && !hasData` for the empty overlay label.
  */
 export function useChartReveal(
@@ -87,11 +88,18 @@ export function useChartReveal(
         return;
       }
       if (prev !== chartVisible) {
+        // Collapse (live → loading/empty) snaps: the data is already gone, so
+        // animating would draw the stale line morphing flat over the loading
+        // shell.
+        if (!chartVisible) {
+          morphT.set(0);
+          return;
+        }
         // 0ms → withTiming resolves on the next frame (effectively a snap), so an
         // explicit `transitions={{ reveal: 0 }}` / `transitions={false}` removes
         // the grow-in without a special-case branch.
         morphT.set(
-          withTiming(chartVisible ? 1 : 0, {
+          withTiming(1, {
             duration: revealDuration,
             easing: Easing.out(Easing.cubic),
           }),

package/src/hooks/useMarkers.ts

@@ -28,6 +28,7 @@ const ANCHORED_CLUSTER: ResolvedMarkerCluster = {
   overlap: 0.75,
   gap: 2,
   maxBeforeGroup: 5,
+  maxVisible: Number.MAX_SAFE_INTEGER,
   groupBadge: "count",
   showGroupCount: false,
 };

package/src/hooks/usePanScroll.ts

@@ -81,6 +81,13 @@ export interface UsePanScrollOptions {
    * `timeScroll.overscroll` (see `resolveOverscroll`).
    */
   overscroll?: number;
+  /**
+   * Fling inertia on release: a fast drag keeps scrolling and decays to a stop.
+   * `false` stops the window dead where the finger lifts (a release near the
+   * live edge still re-attaches to live). Resolved from `timeScroll.fling`
+   * (see `resolveFling`). Default `true`.
+   */
+  fling?: boolean;
 }
 
 /**
@@ -218,6 +225,7 @@ export function usePanScroll({
   scrollActive,
   scrubActive,
   overscroll = 0,
+  fling = true,
 }: UsePanScrollOptions): ReturnType<typeof Gesture.Pan> {
   const { viewEnd, liveEdge, displayWindow, canvasWidth, canvasHeight } = engine;
   const padLeft = padding.left;
@@ -307,7 +315,10 @@ export function usePanScroll({
       // to FOLLOW_SNAP of the window around it — this release callback is the
       // ONLY place that re-attaches to live (never mid-drag, see nextViewEnd).
       const snapZone = overscroll > 0 ? win * FOLLOW_SNAP : 1e-3;
-      const velocity = flingVelocity(e.velocityX, chartW, win);
+      // `fling: false` → zero velocity: the decay resolves immediately where
+      // the finger lifted, and the completion callback below still re-attaches
+      // to live when the release lands inside the snap zone.
+      const velocity = fling ? flingVelocity(e.velocityX, chartW, win) : 0;
       cancelAnimation(viewEnd);
       viewEnd.set(
         withDecay({ velocity, clamp: [lo, hi] }, (finished) => {

package/src/index.ts

@@ -33,6 +33,7 @@ export { usePriceY, useTimeX } from "./hooks/useChartOverlayContext";
 
 export type {
   AreaDotsConfig,
+  AxisAutoHideConfig,
   AxisLabelConfig,
   BadgeConfig,
   BadgeMetrics,

package/src/math/markerCluster.ts

@@ -20,6 +20,9 @@ export interface ResolvedMarkerCluster {
   gap: number;
   /** Collapse a co-located run to a single count badge once it exceeds this many. */
   maxBeforeGroup: number;
+  /** Cap a `"vertical"` column at this many glyphs: the newest overflow is
+   *  hidden instead of the column growing unbounded. */
+  maxVisible: number;
   /** What a collapsed group draws: `"count"` = the round count badge (default);
    *  `"marker"` = the representative marker's own glyph; a {@link MarkerGroupBadge}
    *  = a dedicated badge (custom image/icon) independent of the members. */
@@ -131,9 +134,20 @@ function layoutBucket(
     // AWAY from the line in the side direction (above → up, below → down,
     // center → up from the line). `j` runs in time order, so the newest sits
     // furthest out — and, drawn last in array order, paints over the one below it.
+    //
+    // `maxVisible` caps the column: the oldest glyphs keep their slots and the
+    // newest overflow is simply hidden.
     const dir = side === "below" ? 1 : -1;
+    const cap = opts.config.maxVisible;
     for (let j = 0; j < count; j++) {
       const p = proj[idx[s + j]];
+      if (j >= cap) {
+        p.hidden = true;
+        p.isGrouped = false;
+        p.groupCount = 0;
+        p.groupRep = -1;
+        continue;
+      }
       p.x = anchorX;
       p.y = anchorY + sideDy + dir * j * step;
       p.hidden = false;

package/src/types.ts

@@ -737,6 +737,22 @@ export interface XAxisConfig {
   minGap?: number;
 }
 
+/**
+ * Auto-hide both axes while idle (see {@link LiveChartCoreProps.axisAutoHide}).
+ *
+ * @experimental
+ */
+export interface AxisAutoHideConfig {
+  /** Fade-in duration (ms) when interaction starts — near-instant. Default `60`. */
+  fadeInMs?: number;
+  /** Fade-out duration (ms) back to idle. Default `250`. */
+  fadeOutMs?: number;
+  /** Axis opacity while idle (0 = fully hidden). Default `0`. */
+  idleOpacity?: number;
+  /** Untouched time (ms) before the axes fade back out. Default `3000`. */
+  hideAfterMs?: number;
+}
+
 /**
  * Morfi-style on-canvas tooltip for {@link LiveChartSeries}: a time-range pill
  * above the guide plus one value pill at every visible series intersection.
@@ -1360,6 +1376,12 @@ export interface MarkerClusterConfig {
   /** Collapse a co-located run to a single count badge once it exceeds this many.
    *  Default `5`. */
   maxBeforeGroup?: number;
+  /**
+   * `"vertical"` only: cap the column at this many glyphs instead of letting it
+   * grow unbounded (and off the plot). The oldest `maxVisible` glyphs keep
+   * their stack; the newest overflow is hidden. Default unbounded.
+   */
+  maxVisible?: number;
   /**
    * What a collapsed cluster draws in place of its members:
    *  - `"count"` (default) — the built-in round count badge (a circle with the
@@ -1791,6 +1813,14 @@ export interface TimeScrollConfig {
    * clamped. Applies to the pinch-zoom (`zoom`) clamps too.
    */
   overscroll?: number;
+  /**
+   * Fling inertia on release: a fast drag keeps scrolling and decays to a
+   * stop (the classic momentum feel). Set `false` to stop the window dead
+   * where the finger lifts — a deliberate, TradingView-style hard stop. A
+   * release that lands within the snap zone of the live edge still
+   * re-attaches to live. Default `true`.
+   */
+  fling?: boolean;
 }
 
 /**
@@ -1925,6 +1955,14 @@ export interface LiveChartCoreProps {
   insets?: ChartInsets;
   /** Container View style. */
   style?: ViewStyle;
+  /**
+   * UI-thread opacity multiplier for the plotted data. Set a value from `0`
+   * (hidden) to `1` (fully visible), such as `0.5` while replacement data loads.
+   * Applies to every plotted series — line/fill/candles, live dots, value lines,
+   * and inline values — without affecting axes, reference lines, legends, or
+   * scrub UI. Default `1`.
+   */
+  seriesOpacity?: SharedValue<number>;
   /**
    * Canvas composition mode. `"transparent"` keeps Skia's default compositing
    * path (TextureView on Android) and can reveal content behind the chart.
@@ -1997,7 +2035,10 @@ export interface LiveChartCoreProps {
   exaggerate?: boolean;
   /**
    * Clamp the Y-axis lower bound at 0 (prices, market caps, volumes) so the axis
-   * never shows negative ticks when data collapses toward zero. Default `false`.
+   * never shows negative ticks when data collapses toward zero. With
+   * `yRangeScale` zoomed out, the expansion stops once the lower bound reaches
+   * 0 so the data stays centered instead of continuing to grow only upward.
+   * Default `false`.
    */
   nonNegative?: boolean;
   /**
@@ -2030,6 +2071,15 @@ export interface LiveChartCoreProps {
   yAxis?: boolean | YAxisConfig;
   /** X-axis time labels. `true` = defaults, `false` = hidden, or pass `XAxisConfig`. Default `true`. */
   xAxis?: boolean | XAxisConfig;
+  /**
+   * Auto-hide both axes while the chart is at rest: the X/Y axes (grid, ticks,
+   * labels) fade in on any interaction — scrubbing, time-scrolling, flinging,
+   * pinch-zooming — and fade back out once the chart goes untouched for
+   * `hideAfterMs`. `true` = defaults, or pass `AxisAutoHideConfig`. Default off.
+   *
+   * @experimental
+   */
+  axisAutoHide?: boolean | AxisAutoHideConfig;
   /**
    * Label floated at the top edge of the plot area. `true` = the built-in value
    * label showing the chart's current TOP Y-axis bound (updated each frame),