@wick-charts/react 0.3.6 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/react",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "High-performance canvas timeseries charts for React — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "git+https://github.com/mo4islona/wick-charts.git",
     "directory": "packages/react"
   },
-  "homepage": "https://mo4islona.github.io/wick-charts/",
+  "homepage": "https://wick-charts.eeff.io/",
   "bugs": "https://github.com/mo4islona/wick-charts/issues",
   "keywords": [
     "charts",
@@ -49,7 +49,7 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.3.6"
+    "@wick-charts/core": "^0.4.0"
   },
   "scripts": {
     "build": "vite build"

package/src/BarSeries.tsx

@@ -1,6 +1,12 @@
 import { useEffect, useLayoutEffect, useRef } from 'react';
 
-import { type BarSeriesOptions, type TimePoint, normalizeTime } from '@wick-charts/core';
+import {
+  type BarSeriesOptions,
+  EMPTY_SYNC_STATE,
+  type SeriesSyncState,
+  type TimePoint,
+  syncSeriesLayer,
+} from '@wick-charts/core';
 
 import { useChartInstance } from './context';
 
@@ -13,30 +19,19 @@ export interface BarSeriesProps {
   id?: string;
 }
 
-/** Only fall back to a full `setSeriesData` replace when more than this many new
- * points appear in a single tick — otherwise streamed updates would always look
- * like bulk loads and the renderer would clear its entrance-animation entries. */
-const BULK_THRESHOLD = 20;
-
 export function BarSeries({ data, options, id: idProp }: BarSeriesProps) {
   const chart = useChartInstance();
   const seriesRef = useRef<string | null>(null);
-  const prevLensRef = useRef<number[]>([]);
-  const prevFirstTimesRef = useRef<(number | null)[]>([]);
-  const prevLastTimesRef = useRef<(number | null)[]>([]);
+  const prevSyncRef = useRef<SeriesSyncState[]>([]);
 
   useLayoutEffect(() => {
-    const id = chart.addBarSeries({ ...options, layers: data.length, id: idProp });
+    const id = chart.addSeries('bar', { ...options, layers: data.length, id: idProp });
     seriesRef.current = id;
-    prevLensRef.current = new Array(data.length).fill(0);
-    prevFirstTimesRef.current = new Array(data.length).fill(null);
-    prevLastTimesRef.current = new Array(data.length).fill(null);
+    prevSyncRef.current = new Array(data.length).fill(EMPTY_SYNC_STATE);
     return () => {
       chart.removeSeries(id);
       seriesRef.current = null;
-      prevLensRef.current = [];
-      prevFirstTimesRef.current = [];
-      prevLastTimesRef.current = [];
+      prevSyncRef.current = [];
     };
   }, [chart, data.length, idProp]);
 
@@ -46,44 +41,13 @@ export function BarSeries({ data, options, id: idProp }: BarSeriesProps) {
 
     chart.batch(() => {
       for (let i = 0; i < data.length; i++) {
-        const layer = data[i];
-        const prevLen = prevLensRef.current[i] ?? 0;
-        const prevFirst = prevFirstTimesRef.current[i] ?? null;
-
-        if (layer.length === 0) {
-          chart.setSeriesData(id, [], i);
-          prevLensRef.current[i] = 0;
-          prevFirstTimesRef.current[i] = null;
-          prevLastTimesRef.current[i] = null;
-          continue;
-        }
-
-        const firstTime = normalizeTime(layer[0].time);
-        const lastTime = normalizeTime(layer[layer.length - 1].time);
-        const prevLast = prevLastTimesRef.current[i] ?? null;
-        const shifted = prevFirst !== null && prevFirst !== firstTime;
-        const added = layer.length - prevLen;
-        const hasNewLast = prevLast !== null && prevLast !== lastTime;
-
-        // Rolling-window slide (maxPoints cap): drop oldest, append newest,
-        // length unchanged. Sync prefix then appendData the new tail so the
-        // entrance animation fires instead of getting wiped by setSeriesData.
-        if (shifted && added === 0 && hasNewLast) {
-          chart.setSeriesData(id, layer.slice(0, -1), i);
-          chart.appendData(id, layer[layer.length - 1], i);
-        } else if (prevLen === 0 || layer.length < prevLen || added > BULK_THRESHOLD || shifted) {
-          chart.setSeriesData(id, layer, i);
-        } else if (layer.length === prevLen) {
-          chart.updateData(id, layer[layer.length - 1], i);
-        } else {
-          for (let j = prevLen; j < layer.length; j++) {
-            chart.appendData(id, layer[j], i);
-          }
-        }
-
-        prevLensRef.current[i] = layer.length;
-        prevFirstTimesRef.current[i] = firstTime;
-        prevLastTimesRef.current[i] = lastTime;
+        prevSyncRef.current[i] = syncSeriesLayer({
+          chart,
+          id,
+          data: data[i],
+          prev: prevSyncRef.current[i] ?? EMPTY_SYNC_STATE,
+          layerIndex: i,
+        });
       }
     });
   }, [chart, data]);
@@ -98,9 +62,7 @@ export function BarSeries({ data, options, id: idProp }: BarSeriesProps) {
     options?.barWidthRatio,
     options?.stacking,
     options?.entryAnimation,
-    options?.enterAnimation,
     options?.entryMs,
-    options?.enterMs,
     options?.smoothMs,
   ]);
 

package/src/CandlestickSeries.tsx

@@ -1,16 +1,15 @@
 import { useEffect, useLayoutEffect, useRef } from 'react';
 
-import type { CandlestickSeriesOptions, OHLCInput } from '@wick-charts/core';
-import { normalizeTime } from '@wick-charts/core';
+import {
+  type CandlestickSeriesOptions,
+  EMPTY_SYNC_STATE,
+  type OHLCInput,
+  type SeriesSyncState,
+  syncSeriesLayer,
+} from '@wick-charts/core';
 
 import { useChartInstance } from './context';
 
-/** Only fall back to a full `setSeriesData` replace when more than this many new
- * candles appear in a single tick. Streamed bursts (OHLCStream emits up to ~8
- * per 500ms) must stay under this so their appendData path still fires entrance
- * animations; history loads (50/batch) deliberately exceed it. */
-const BULK_THRESHOLD = 20;
-
 export interface CandlestickSeriesProps {
   /** OHLC candles to render. Each element carries `time/open/high/low/close` and an optional `volume`. */
   data: OHLCInput[];
@@ -23,19 +22,15 @@ export interface CandlestickSeriesProps {
 export function CandlestickSeries({ data, options, id: idProp }: CandlestickSeriesProps) {
   const chart = useChartInstance();
   const seriesRef = useRef<string | null>(null);
-  const prevLenRef = useRef(0);
-  const prevFirstTimeRef = useRef<number | null>(null);
-  const prevLastTimeRef = useRef<number | null>(null);
+  const prevSyncRef = useRef<SeriesSyncState>(EMPTY_SYNC_STATE);
 
   useLayoutEffect(() => {
-    const id = chart.addCandlestickSeries({ ...options, id: idProp });
+    const id = chart.addSeries('candlestick', { ...options, id: idProp });
     seriesRef.current = id;
     return () => {
       chart.removeSeries(id);
       seriesRef.current = null;
-      prevLenRef.current = 0;
-      prevFirstTimeRef.current = null;
-      prevLastTimeRef.current = null;
+      prevSyncRef.current = EMPTY_SYNC_STATE;
     };
   }, [chart, idProp]);
 
@@ -43,46 +38,7 @@ export function CandlestickSeries({ data, options, id: idProp }: CandlestickSeri
     const id = seriesRef.current;
     if (!id) return;
 
-    if (data.length === 0) {
-      // Explicit clear
-      chart.setSeriesData(id, []);
-      prevLenRef.current = 0;
-      prevFirstTimeRef.current = null;
-      prevLastTimeRef.current = null;
-      return;
-    }
-
-    const prevLen = prevLenRef.current;
-    const prevFirst = prevFirstTimeRef.current;
-    const prevLast = prevLastTimeRef.current;
-    const firstTime = normalizeTime(data[0].time);
-    const lastTime = normalizeTime(data[data.length - 1].time);
-    const shifted = prevFirst !== null && prevFirst !== firstTime;
-    const added = data.length - prevLen;
-    const hasNewLast = prevLast !== null && prevLast !== lastTime;
-
-    // Rolling-window slide: same array length but first AND last timestamps
-    // advanced (old point dropped, new point appended). Must NOT fall through
-    // to a full `setSeriesData` — that would wipe the entrance-animation
-    // entries. Sync the stable prefix, then appendData the fresh tail so the
-    // renderer registers an entry for just the new point.
-    if (shifted && added === 0 && hasNewLast) {
-      chart.setSeriesData(id, data.slice(0, -1));
-      chart.appendData(id, data[data.length - 1]);
-    } else if (prevLen === 0 || data.length < prevLen || added > BULK_THRESHOLD || shifted) {
-      chart.setSeriesData(id, data);
-    } else if (data.length === prevLen) {
-      // Same length, same timestamps — last candle updated in place.
-      chart.updateData(id, data[data.length - 1]);
-    } else {
-      for (let i = prevLen; i < data.length; i++) {
-        chart.appendData(id, data[i]);
-      }
-    }
-
-    prevLenRef.current = data.length;
-    prevFirstTimeRef.current = firstTime;
-    prevLastTimeRef.current = lastTime;
+    prevSyncRef.current = syncSeriesLayer({ chart, id, data, prev: prevSyncRef.current });
   }, [chart, data]);
 
   useEffect(() => {
@@ -100,9 +56,7 @@ export function CandlestickSeries({ data, options, id: idProp }: CandlestickSeri
     options?.down?.wick,
     options?.bodyWidthRatio,
     options?.entryAnimation,
-    options?.enterAnimation,
     options?.entryMs,
-    options?.enterMs,
     options?.smoothMs,
   ]);
 

package/src/ChartContainer.tsx

@@ -18,6 +18,7 @@ import {
   type ChartOptions,
   type ChartTheme,
   type EdgeReachedInfo,
+  type VisibleRangeSpec,
 } from '@wick-charts/core';
 
 type PerfOption = NonNullable<ChartOptions['perf']>;
@@ -63,6 +64,30 @@ export interface ChartContainerProps {
      */
     left?: number | { intervals: number };
   };
+  /**
+   * Viewport-level streaming behavior. Captured at mount only — changing this
+   * prop after the chart is created is ignored.
+   */
+  viewport?: {
+    /**
+     * Width of the visible window in data bars, set on the first data load
+     * to `maxVisibleBars * dataInterval`. While the dataset is smaller than
+     * this width, streaming ticks render into the empty right-side gap and
+     * the viewport stays put; once the data reaches the right edge, the
+     * viewport pans forward to keep the latest bar pinned (tail-scroll).
+     * Default: 200.
+     */
+    maxVisibleBars?: number;
+    /**
+     * Initial visible range applied before the first paint with data. Same
+     * shape as the imperative `chart.setVisibleRange` — pass a bar count
+     * (e.g. `35`), an explicit `{from, to}` window, or `{from, bars}` for
+     * a warm-up pair. The standard alternative is calling
+     * `setVisibleRange` from a `useEffect`, but that runs post-paint and
+     * makes the chart visibly re-zoom on the next RAF. Captured at mount.
+     */
+    initialRange?: VisibleRangeSpec;
+  };
   /** Show the chart background gradient. Defaults to true. */
   gradient?: boolean;
   /** Enable zoom, pan, and crosshair interactions. Defaults to true. */
@@ -82,33 +107,16 @@ export interface ChartContainerProps {
    */
   headerLayout?: 'overlay' | 'inline';
   /**
-   * Chart-level animation configuration. See {@link AnimationsConfig} for the
-   * full shape.
-   *
-   * Two layers — remember which is which:
-   *
-   * - **Chart-level (this prop)** — `animations.points.{enterMs, smoothMs,
-   *   pulseMs}` and `animations.viewport.{reboundMs, yAxisMs,
-   *   inputResponseMs}`. Acts as the default for every series.
-   * - **Per-series** — `<LineSeries options={{ entryMs, smoothMs, pulseMs }}>`
-   *   (and the analogous CandlestickSeries / BarSeries options). Overrides
-   *   the chart-level default for that one series. Note the spelling:
-   *   `entryMs` per-series, `enterMs` chart-level — historical artefact,
-   *   both refer to the same animation.
-   *
-   * Resolution: per-series option wins over chart-level numeric value.
-   * Chart-level wins only when its category is explicitly `false` — that's
-   * a hard disable that overrides per-series too.
+   * Animation control. `true` / omitted uses built-in defaults; `false`
+   * disables every category. Per-series options on `<LineSeries>` /
+   * `<CandlestickSeries>` / `<BarSeries>` override these chart-level
+   * defaults unless the category here is explicitly `false`.
    *
-   * Shorthands:
-   * - `true` / omitted — built-in defaults (every settling animation 250 ms,
-   *   pulse cycle 600 ms, input ease 0 / off).
-   * - `false` — disables every animation category.
-   * - `{ points: false }` / `{ viewport: false }` — disables a category.
-   *
-   * Runtime updates: changing this prop after mount calls
-   * `chart.setAnimations(...)` so the new durations take effect on the next
-   * animation / render.
+   * **Init-only by reference identity.** A new `animations` object
+   * recreates the underlying `ChartInstance` (and its canvas). Wrap the
+   * value in `useMemo(() => ({...}), [deps])` so an unstable parent
+   * render doesn't tear down the chart every commit. In dev mode the
+   * container emits a console warning when it detects >3 recreates / s.
    */
   animations?: boolean | AnimationsConfig;
   /**
@@ -227,6 +235,7 @@ export function ChartContainer({
   theme,
   axis,
   padding,
+  viewport,
   gradient = true,
   interactive,
   grid,
@@ -249,15 +258,33 @@ export function ChartContainer({
   const chartRef = useRef<ChartInstance | null>(null);
   const [_, setRevision] = useState(0);
 
-  // useLayoutEffect — synchronous, runs before paint.
+  // Dev-only: warn when `animations` reference identity changes more than
+  // three times per second. The most common cause is a parent re-rendering
+  // with a fresh inline object; ChartInstance is no longer reconfigurable
+  // post-construction, so each new reference is a full canvas teardown.
+  const recreateStampsRef = useRef<number[]>([]);
+
+  // useLayoutEffect — synchronous, runs before paint. Re-runs when
+  // `animations` changes by reference: chart-level animation timings, the
+  // Y transition factory and per-series timings are init-only contracts
+  // in Phase 2, so a new `animations` object is a full rebuild.
+  //
+  // TODO(api): this identity-based init-only contract is fragile — any
+  // streaming caller that forgets to wrap `animations` in useMemo gets
+  // a destroy+recreate on every tick (see docs/pages/stress/streaming.tsx
+  // for the worked example: ~30 rebuilds/sec at 32ms intervals). Either
+  // diff structurally here, or split the init-only sub-fields (the Y
+  // transition factory and per-series timings) into a separate prop with
+  // a name that signals "stable identity required", so the common
+  // chart-level timings can stay live-updatable.
   useLayoutEffect(() => {
     if (!containerRef.current) return;
-    if (chartRef.current) return;
 
     const options: ChartOptions = {};
     if (axis) options.axis = axis;
     if (resolvedTheme) options.theme = resolvedTheme;
     if (padding) options.padding = padding;
+    if (viewport) options.viewport = viewport;
     if (interactive !== undefined) options.interactive = interactive;
     if (grid !== undefined) options.grid = grid;
     if (perfRef.current !== undefined) options.perf = perfRef.current;
@@ -265,24 +292,31 @@ export function ChartContainer({
     if (onEdgeReachedRef.current) options.onEdgeReached = onEdgeReachedRef.current;
     chartRef.current = new ChartInstance(containerRef.current, options);
 
-    // Note: the init path above already propagated `grid` into the chart. The
-    // effect below handles live updates, but also needs to run on the same
-    // commit so an initial `grid={{visible:false}}` isn't silently reset.
+    if (process.env.NODE_ENV !== 'production') {
+      const now = performance.now();
+      const stamps = recreateStampsRef.current;
+      stamps.push(now);
+      while (stamps.length > 0 && now - stamps[0] > 1000) stamps.shift();
+      if (stamps.length > 3) {
+        console.warn(
+          '[wick-charts] <ChartContainer> recreated the chart >3 times in the last second. ' +
+            'The `animations` prop is init-only — wrap it in useMemo(() => ({...}), [deps]) ' +
+            'so a stable reference identity prevents tear-down on every render.',
+        );
+      }
+    }
+
+    // The init path above already propagated `grid` into the chart. The
+    // effect below also writes it for live updates, but it needs to fire
+    // on the same commit so an initial `grid={{visible:false}}` isn't
+    // silently reset.
     setRevision((r) => r + 1);
 
     return () => {
-      // Destroy synchronously. A previous revision deferred this through
-      // `setTimeout(..., 0)` to "tolerate StrictMode" but the guard was
-      // broken: in the StrictMode remount sequence (cleanup → second mount →
-      // timeout), the check `if (!chartRef.current) instance.destroy()`
-      // always saw the second instance and skipped the destroy — leaking
-      // the first ChartInstance's canvases (hence 4 canvases per chart in
-      // dev). StrictMode exists precisely to exercise cleanup; a correct
-      // `destroy` is cheap enough to run on every cycle.
       chartRef.current?.destroy();
       chartRef.current = null;
     };
-  }, []);
+  }, [animations]);
 
   useEffect(() => {
     if (chartRef.current && resolvedTheme) {
@@ -296,16 +330,6 @@ export function ChartContainer({
     }
   }, [axis?.y?.width, axis?.y?.min, axis?.y?.max, axis?.y?.visible, axis?.x?.height, axis?.x?.visible]);
 
-  useEffect(() => {
-    if (chartRef.current && animations !== undefined) {
-      chartRef.current.setAnimations(animations);
-    }
-    // Dep array is the JSON shape of the config — covers both the boolean
-    // shorthand and the full object. Cheap to stringify (the object is tiny)
-    // and lets callers pass a fresh reference each render without thrashing
-    // animator state when nothing has actually changed.
-  }, [JSON.stringify(animations)]);
-
   // Top-overlay height (title + info bar) — measured below. Declared here so
   // the padding effect can fold it into `padding.top`.
   const topOverlayRef = useRef<HTMLDivElement>(null);
@@ -318,7 +342,12 @@ export function ChartContainer({
   // fire redundant `chart.setPadding(...)` calls (headerExtra stays 0).
   const headerExtra = headerLayout === 'overlay' ? topOverlayHeight : 0;
 
-  useEffect(() => {
+  // useLayoutEffect (not useEffect) so the header-height fold-in lands
+  // before the browser paints the chart for the first time. With
+  // `useEffect` the padding update would fire AFTER paint, causing a
+  // visible "chart drawn, then everything shifts down by the header
+  // height on the next frame" jump on initial mount.
+  useLayoutEffect(() => {
     const current = chartRef.current;
     if (!current) return;
     const userTop = padding?.top ?? 20;

package/src/LineSeries.tsx

@@ -1,6 +1,12 @@
 import { useEffect, useLayoutEffect, useRef } from 'react';
 
-import { type LineSeriesOptions, type TimePoint, normalizeTime } from '@wick-charts/core';
+import {
+  EMPTY_SYNC_STATE,
+  type LineSeriesOptions,
+  type SeriesSyncState,
+  type TimePoint,
+  syncSeriesLayer,
+} from '@wick-charts/core';
 
 import { useChartInstance } from './context';
 
@@ -13,30 +19,19 @@ export interface LineSeriesProps {
   id?: string;
 }
 
-/** Only fall back to a full `setSeriesData` replace when more than this many new
- * points appear in a single tick — otherwise streamed updates would always look
- * like bulk loads and the renderer would clear its entrance-animation entries. */
-const BULK_THRESHOLD = 20;
-
 export function LineSeries({ data, options, id: idProp }: LineSeriesProps) {
   const chart = useChartInstance();
   const seriesRef = useRef<string | null>(null);
-  const prevLensRef = useRef<number[]>([]);
-  const prevFirstTimesRef = useRef<(number | null)[]>([]);
-  const prevLastTimesRef = useRef<(number | null)[]>([]);
+  const prevSyncRef = useRef<SeriesSyncState[]>([]);
 
   useLayoutEffect(() => {
-    const id = chart.addLineSeries({ ...options, layers: data.length, id: idProp });
+    const id = chart.addSeries('line', { ...options, layers: data.length, id: idProp });
     seriesRef.current = id;
-    prevLensRef.current = new Array(data.length).fill(0);
-    prevFirstTimesRef.current = new Array(data.length).fill(null);
-    prevLastTimesRef.current = new Array(data.length).fill(null);
+    prevSyncRef.current = new Array(data.length).fill(EMPTY_SYNC_STATE);
     return () => {
       chart.removeSeries(id);
       seriesRef.current = null;
-      prevLensRef.current = [];
-      prevFirstTimesRef.current = [];
-      prevLastTimesRef.current = [];
+      prevSyncRef.current = [];
     };
   }, [chart, data.length, idProp]);
 
@@ -46,44 +41,13 @@ export function LineSeries({ data, options, id: idProp }: LineSeriesProps) {
 
     chart.batch(() => {
       for (let i = 0; i < data.length; i++) {
-        const layer = data[i];
-        const prevLen = prevLensRef.current[i] ?? 0;
-        const prevFirst = prevFirstTimesRef.current[i] ?? null;
-
-        if (layer.length === 0) {
-          chart.setSeriesData(id, [], i);
-          prevLensRef.current[i] = 0;
-          prevFirstTimesRef.current[i] = null;
-          prevLastTimesRef.current[i] = null;
-          continue;
-        }
-
-        const firstTime = normalizeTime(layer[0].time);
-        const lastTime = normalizeTime(layer[layer.length - 1].time);
-        const prevLast = prevLastTimesRef.current[i] ?? null;
-        const shifted = prevFirst !== null && prevFirst !== firstTime;
-        const added = layer.length - prevLen;
-        const hasNewLast = prevLast !== null && prevLast !== lastTime;
-
-        // Rolling-window slide (maxPoints cap): drop oldest, append newest,
-        // length unchanged. Sync prefix then appendData the new tail so the
-        // entrance animation fires instead of getting wiped by setSeriesData.
-        if (shifted && added === 0 && hasNewLast) {
-          chart.setSeriesData(id, layer.slice(0, -1), i);
-          chart.appendData(id, layer[layer.length - 1], i);
-        } else if (prevLen === 0 || layer.length < prevLen || added > BULK_THRESHOLD || shifted) {
-          chart.setSeriesData(id, layer, i);
-        } else if (layer.length === prevLen) {
-          chart.updateData(id, layer[layer.length - 1], i);
-        } else {
-          for (let j = prevLen; j < layer.length; j++) {
-            chart.appendData(id, layer[j], i);
-          }
-        }
-
-        prevLensRef.current[i] = layer.length;
-        prevFirstTimesRef.current[i] = firstTime;
-        prevLastTimesRef.current[i] = lastTime;
+        prevSyncRef.current[i] = syncSeriesLayer({
+          chart,
+          id,
+          data: data[i],
+          prev: prevSyncRef.current[i] ?? EMPTY_SYNC_STATE,
+          layerIndex: i,
+        });
       }
     });
   }, [chart, data]);
@@ -101,9 +65,7 @@ export function LineSeries({ data, options, id: idProp }: LineSeriesProps) {
     options?.pulse,
     options?.stacking,
     options?.entryAnimation,
-    options?.enterAnimation,
     options?.entryMs,
-    options?.enterMs,
     options?.smoothMs,
   ]);
 

package/src/PieSeries.tsx

@@ -19,7 +19,7 @@ export function PieSeries({ data, options, id: idProp }: PieSeriesProps) {
   const seriesRef = useRef<string | null>(null);
 
   useLayoutEffect(() => {
-    const id = chart.addPieSeries({ ...options, id: idProp });
+    const id = chart.addSeries('pie', { ...options, id: idProp });
     seriesRef.current = id;
     return () => {
       chart.removeSeries(id);
@@ -48,7 +48,6 @@ export function PieSeries({ data, options, id: idProp }: PieSeriesProps) {
     options?.sliceLabels?.labelGap,
     options?.sliceLabels?.distance,
     options?.sliceLabels?.railWidth,
-    options?.sliceLabels?.balanceSides,
   ]);
 
   useLayoutEffect(() => {

package/src/index.ts

@@ -9,12 +9,12 @@
  */
 
 export type {
+  AnimationTime,
   AnimationsConfig,
   AxisBound,
   AxisConfig,
   BarSeriesOptions,
   /** @deprecated Use {@link StackingMode} instead. */
-  BarStacking,
   BuildHoverSnapshotsArgs,
   BuildLastSnapshotsArgs,
   CandlestickSeriesOptions,
@@ -28,7 +28,6 @@ export type {
   HoverInfo,
   LegendItem,
   /** @deprecated Use {@link TimePoint} instead. */
-  LineData,
   LineSeriesOptions,
   NavigatorCandlePoint,
   NavigatorControllerParams,
@@ -54,6 +53,9 @@ export type {
   TooltipFormatter,
   TooltipPosition,
   TooltipPositionArgs,
+  Transition,
+  TransitionContext,
+  TransitionFactory,
   Typography,
   ValueFormatter,
   VisibleRange,
@@ -72,7 +74,6 @@ export {
   catppuccin,
   computeTooltipPosition,
   createTheme,
-  darkTheme,
   detectInterval,
   dracula,
   formatCompact,
@@ -82,11 +83,11 @@ export {
   githubLight,
   gruvbox,
   handwritten,
+  hermite,
   highContrast,
   isDarkBg,
   lavenderMist,
   lightPink,
-  lightTheme,
   materialPalenight,
   minimalLight,
   mintBreeze,
@@ -95,6 +96,7 @@ export {
   normalizeTime,
   oneDarkPro,
   panda,
+  parseAnimationTime,
   peachCream,
   quietLight,
   resolveAxisFontSize,
@@ -102,7 +104,9 @@ export {
   resolveCandlestickBodyColor,
   rosePineDawn,
   sandDune,
+  snap,
   solarizedLight,
+  spring,
 } from '@wick-charts/core';
 
 export { BarSeries } from './BarSeries';

package/src/ui/Crosshair.tsx

@@ -11,6 +11,10 @@ export function Crosshair() {
 
   const theme = chart.getTheme();
   const dataInterval = chart.getDataInterval();
+  // Format the time pill at the axis's *resolved* tick granularity, not the raw
+  // data interval — otherwise a time-of-day badge floats among date labels when
+  // zoomed out. Falls back to dataInterval on a degenerate range.
+  const tickInterval = chart.timeScale.niceTickValues(dataInterval).tickInterval || dataInterval;
 
   const labelStyle = {
     // Blend the theme's labelBackground at 80% opacity so the axis grid
@@ -54,7 +58,7 @@ export function Crosshair() {
           ...labelStyle,
         }}
       >
-        {formatTime(position.time, dataInterval)}
+        {formatTime(position.time, tickInterval)}
       </div>
     </>
   );