@wick-charts/react 0.3.5 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,119 +1,236 @@
1
1
  import { CSSProperties } from 'react';
2
2
  import { JSX as JSX_2 } from 'react/jsx-runtime';
3
+ import { NamedExoticComponent } from 'react';
3
4
  import { Provider } from 'react';
4
5
  import { ReactNode } from 'react';
5
6
 
6
7
  export declare const andromeda: ThemePreset;
7
8
 
8
9
  /**
9
- * Chart-level animation configuration. Two independent domains so per-series
10
- * defaults can't bleed into viewport-interaction timings.
10
+ * Animation behavior knobs grouped by surface:
11
11
  *
12
- * **Two layerschart-level vs per-series.** The same data-animation knobs
13
- * live on both layers; remember which is which:
12
+ * - `axis.y`Y bound chase: pluggable curve, expand/contract/gesture
13
+ * settle times.
14
+ * - `axis.x` — X viewport: streaming settle + gesture override.
15
+ * - `axis.ticks` — axis tick label cross-fade.
16
+ * - `toggle` — series visibility (alpha fade + Y re-fit, locked to one
17
+ * duration so they finish on the same frame).
18
+ * - `series.{line,candlestick,bar,pie}` — per-series-type data tweens.
14
19
  *
15
- * | Field | Chart-level (here) | Per-series option |
16
- * | ----- | ------------------ | ----------------- |
17
- * | Entry duration | {@link AnimationsConfig.points}`.enterMs` | `<XSeries options={{ entryMs }}>` (canonical name; `enterMs` is a `@deprecated` alias) |
18
- * | Live smoothing | `points.smoothMs` | `options={{ smoothMs }}` |
19
- * | Line pulse period | `points.pulseMs` | `<LineSeries options={{ pulseMs }}>` |
20
+ * Top-level `false` disables every animation category. `axis: false`
21
+ * disables both axes and ticks. `axis.y: false` / `axis.x: false` disables
22
+ * that axis only. Series-type-level `false` (`series: { line: false }`)
23
+ * disables that type only.
20
24
  *
21
- * Resolution: per-series option **wins** (it's the override). The chart-
22
- * level field acts as the default for every series that didn't set its own
23
- * override *except* when the chart-level category is explicitly `false`,
24
- * which is a hard disable that overrides per-series too.
25
- *
26
- * - `points` — applied to data: entrance tween, live-tracking smoothing of
27
- * the last candle/bar/line value, line pulse cadence.
28
- * - `viewport` — applied to viewport interactions: post-gesture rebound,
29
- * Y-axis range chase, optional per-event ease for pan/zoom. Has no
30
- * per-series equivalent — these are chart-level only.
31
- *
32
- * All settling animations share a 250 ms default so the X re-fit, Y range
33
- * update, and last-bar live-track all settle on the same frame on a
34
- * streaming tick. Pulse cycle period (600 ms) and `inputResponseMs` (0,
35
- * opt-in) keep their own values.
25
+ * The per-series numeric fields (`entry` / `smooth` / `pulse`) also exist
26
+ * on individual series options (`<XSeries options={{ entryMs }}>`). The
27
+ * chart-level field acts as the default for any series that hasn't set its
28
+ * own override; an explicit `series.<type>: false` (or top-level `false`)
29
+ * is a hard disable that overrides per-series.
36
30
  */
37
31
  export declare interface AnimationsConfig {
38
32
  /**
39
- * Data-series animations. `false` disables every point animation (entrance,
40
- * live-smoothing, pulse) across every series — overrides any per-series
41
- * option set on the same fields. An object overrides individual categories;
42
- * omitted fields fall back to the built-in defaults.
43
- *
44
- * Per-series options (`<LineSeries options={{ entryMs, smoothMs, pulseMs }}>`)
45
- * win over chart-level numeric values. The chart-level field becomes the
46
- * default for series that don't set their own.
33
+ * Axis-level animation. `false` collapses both axes and ticks to instant.
47
34
  */
48
- points?: false | {
35
+ axis?: false | {
49
36
  /**
50
- * Per-point entrance duration (ms). Default: 250.
51
- * Per-series equivalent: `<XSeries options={{ entryMs }}>` (note the
52
- * `y` — chart-level uses `enterMs`, per-series uses `entryMs` for
53
- * historical reasons; both refer to the same animation). `false` /
54
- * `0` disables.
37
+ * Y bound chase. `false` snaps Y instantly.
55
38
  */
56
- enterMs?: AnimationTime;
39
+ y?: false | {
40
+ /** Y curve. See {@link hermite}, {@link spring}, {@link snap}. */
41
+ curve?: TransitionFactory<YRange>;
42
+ /**
43
+ * Outward settle time — bound expanding to a new extreme.
44
+ *
45
+ * @default {@link DEFAULT_Y_SETTLE_MS}
46
+ */
47
+ settle?: AnimationTime;
48
+ /**
49
+ * Inward (contraction) settle — applied when a bound recedes
50
+ * after an extreme leaves the window (the "sticky-Y" hold).
51
+ *
52
+ * - `{ min, max }` — **dynamic**: the contract duration scales
53
+ * with the contraction magnitude, from `min` (a tiny recede)
54
+ * up to `max` (a full-range contraction). Big outliers ease
55
+ * off slowly while small receders finish quickly, so the axis
56
+ * doesn't crawl for seconds over a few pixels. Either side
57
+ * falls back to its default when omitted.
58
+ * - a scalar `AnimationTime` — **fixed**: `min === max`, every
59
+ * contraction takes the same time regardless of size (the
60
+ * legacy sticky feel). `false` snaps contractions instantly.
61
+ *
62
+ * @default `{ min:` {@link DEFAULT_Y_STICKY_MIN_MS}`, max:` {@link DEFAULT_Y_STICKY_MAX_MS}` }`
63
+ */
64
+ sticky?: AnimationTime | {
65
+ min?: AnimationTime;
66
+ max?: AnimationTime;
67
+ };
68
+ /**
69
+ * One-shot override during a user gesture (pan/zoom). Shorter
70
+ * than `sticky` so contractions during interaction converge in
71
+ * ~one frame per wheel tick.
72
+ *
73
+ * @default {@link DEFAULT_Y_GESTURE_MS}
74
+ */
75
+ gesture?: AnimationTime;
76
+ };
57
77
  /**
58
- * Live-value chase duration (ms) for the displayed last point on
59
- * `updateData` ticks. Animator-driven cubic ease after this many ms
60
- * with no new updates, the displayed value reaches exactly the
61
- * actual last value. Default: 250. Per-series equivalent:
62
- * `options={{ smoothMs }}`. `false` / `0` snaps.
78
+ * X viewport. `false` snaps X instantly. The default critically-
79
+ * damped spring carries velocity across retargets so wheel-zoom
80
+ * sequences feel continuous and stream ticks blend smoothly into
81
+ * gesture motion.
63
82
  */
64
- smoothMs?: AnimationTime;
83
+ x?: false | {
84
+ /** X curve. See {@link spring}, {@link snap}. */
85
+ curve?: TransitionFactory<VisibleRange>;
86
+ /**
87
+ * Streaming settle time. Spring reaches ~99% of the target
88
+ * after this many ms. Used for streaming retargets; the
89
+ * streaming-cadence EMA tunes the effective value upward when
90
+ * data arrives slower than the baseline.
91
+ *
92
+ * @default {@link DEFAULT_X_SETTLE_MS}
93
+ */
94
+ settle?: AnimationTime;
95
+ /**
96
+ * One-shot override applied to user pan/zoom commits and to
97
+ * programmatic `fitContent`.
98
+ *
99
+ * @default {@link DEFAULT_X_GESTURE_MS}
100
+ */
101
+ gesture?: AnimationTime;
102
+ };
65
103
  /**
66
- * Pulse cycle period (ms) for the line last-point halo — periodic,
67
- * not a one-shot transition. Default: 600. Per-series equivalent:
68
- * `<LineSeries options={{ pulseMs }}>`. `false` / `0` disables.
104
+ * Axis tick label cross-fade. `false` makes tick relabel instant.
105
+ *
106
+ * @default {@link DEFAULT_TICKS_MS}
69
107
  */
70
- pulseMs?: AnimationTime;
108
+ ticks?: AnimationTime;
71
109
  };
72
110
  /**
73
- * Viewport interaction animations. `false` disables both rebound and Y-axis
74
- * smoothing viewport changes snap instantly.
111
+ * Series-visibility toggle duration. Drives BOTH the renderer's alpha
112
+ * cross-fade and the engine's Y re-fit ease, so the two animations land
113
+ * on the same frame. `false` makes `setSeriesVisible` instant.
114
+ *
115
+ * @default {@link DEFAULT_TOGGLE_MS}
75
116
  */
76
- viewport?: false | {
77
- /** Rebound (snap-back) duration after pan/zoom overshoot (ms). Default: 350. */
78
- reboundMs?: AnimationTime;
117
+ toggle?: AnimationTime;
118
+ /**
119
+ * Per-series-type data animations. `false` disables every per-point
120
+ * animation across every series. Setting a single type to `false`
121
+ * (`series: { line: false }`) disables that type only.
122
+ *
123
+ * Per-series options (`<LineSeries options={{ entryMs, smoothMs, pulseMs }}>`)
124
+ * win over chart-level numeric values. The chart-level field becomes the
125
+ * default for series that don't set their own.
126
+ */
127
+ series?: false | {
79
128
  /**
80
- * Y-axis range transition duration in wall-clock milliseconds. The Y
81
- * min and max each ride their own {@link Animator} that retargets on
82
- * data updates and eases toward the new bound over this many ms.
83
- * Default `250` (shares the lockstep-arrival budget with viewport and
84
- * live-track). Inward contraction always eases. Outward expansion
85
- * eases when the per-point entrance is enabled (the entering candle's
86
- * fade masks the brief overshoot); when entrance is hard-disabled
87
- * (`points.enterMs === 0`), Y bounds snap outward to keep new
88
- * highs/lows from clipping at the canvas edge. `false` / `0` snaps
89
- * the Y range instantly on every update.
129
+ * Line-series tweens. `false` disables all line animations
130
+ * (entrance, live-smoothing, pulse).
90
131
  */
91
- yAxisMs?: AnimationTime;
132
+ line?: false | {
133
+ /**
134
+ * Per-point entrance duration. `false` disables the entrance
135
+ * (equivalent to `entryAnimation: 'none'`).
136
+ *
137
+ * @default {@link DEFAULT_LINE_ENTRY}
138
+ */
139
+ entry?: AnimationTime;
140
+ /**
141
+ * Last-value chase duration on `updateLastPoint`. `false` /
142
+ * `0` snaps to the target instantly.
143
+ *
144
+ * @default {@link DEFAULT_LINE_SMOOTH}
145
+ */
146
+ smooth?: AnimationTime;
147
+ /**
148
+ * Halo cycle period at the line tail. Periodic loop, not a
149
+ * one-shot. `false` / `0` turns the halo off entirely (drawing
150
+ * and animation loop).
151
+ *
152
+ * @default {@link DEFAULT_LINE_PULSE}
153
+ */
154
+ pulse?: AnimationTime;
155
+ };
92
156
  /**
93
- * Per-event ease applied to user pan/zoom commits. Logical state
94
- * advances synchronously (gesture math, edge detection, autoscroll
95
- * all read the committed target); the visual range eases over this
96
- * duration so back-to-back wheel/trackpad events interpolate
97
- * smoothly through the same animator.
98
- *
99
- * Default `0` (instant-apply, matches the long-standing pre-Phase-5
100
- * behaviour). Opt in via `inputResponseMs: 60` for an eased pan/zoom
101
- * feel — the default is conservative because the animated visual
102
- * range diverges from the committed target until the ease completes,
103
- * and existing consumers reading `chart.getVisibleRange()`
104
- * synchronously after a wheel/pan expect the new value.
157
+ * Candlestick tweens. `false` disables candle entrance + OHLC chase.
158
+ */
159
+ candlestick?: false | {
160
+ /**
161
+ * Per-candle entrance duration. `false` disables the entrance
162
+ * (equivalent to `entryAnimation: 'none'`).
163
+ *
164
+ * @default {@link DEFAULT_CANDLESTICK_ENTRY}
165
+ */
166
+ entry?: AnimationTime;
167
+ /**
168
+ * Live OHLC chase duration on `updateLastPoint`. `false` / `0`
169
+ * snaps to the target instantly.
170
+ *
171
+ * @default {@link DEFAULT_CANDLESTICK_SMOOTH}
172
+ */
173
+ smooth?: AnimationTime;
174
+ };
175
+ /**
176
+ * Bar-series tweens. `false` disables bar entrance + value chase.
177
+ */
178
+ bar?: false | {
179
+ /**
180
+ * Per-bar entrance duration. `false` disables the entrance
181
+ * (equivalent to `entryAnimation: 'none'`).
182
+ *
183
+ * @default {@link DEFAULT_BAR_ENTRY}
184
+ */
185
+ entry?: AnimationTime;
186
+ /**
187
+ * Live value chase duration on `updateLastPoint`. `false` /
188
+ * `0` snaps to the target instantly.
189
+ *
190
+ * @default {@link DEFAULT_BAR_SMOOTH}
191
+ */
192
+ smooth?: AnimationTime;
193
+ };
194
+ /**
195
+ * Pie segment entry/update tweens. Parsed at config-time; the actual
196
+ * wiring lands in a later phase — providing a value here today is a
197
+ * no-op but the shape is stable.
105
198
  */
106
- inputResponseMs?: AnimationTime;
199
+ pie?: false | {
200
+ /**
201
+ * Slice grow-in duration on first paint.
202
+ *
203
+ * @default {@link DEFAULT_PIE_ENTRY}
204
+ */
205
+ entry?: AnimationTime;
206
+ /**
207
+ * Slice resize duration when data changes.
208
+ *
209
+ * @default {@link DEFAULT_PIE_UPDATE}
210
+ */
211
+ update?: AnimationTime;
212
+ };
107
213
  };
108
214
  }
109
215
 
110
- /** Options passed when creating a new {@link ChartInstance}. */
111
216
  /**
112
- * Time-value or boolean used throughout the animation API. `false` disables
113
- * the category; a number configures its duration/time-constant in milliseconds
114
- * (`0` also disables, useful when the caller wants a number shape).
217
+ * Per-frame engine snapshot same shape returned by the legacy
218
+ * `AnimationEngine.tick()` so existing consumers (chart render loop,
219
+ * `chart.getAnimationState()` public API, series overlay hooks) keep working.
115
220
  */
116
- declare type AnimationTime = number | false;
221
+ declare interface AnimationState {
222
+ readonly xRange: XRange;
223
+ readonly yRange: YRange;
224
+ readonly animating: boolean;
225
+ }
226
+
227
+ /**
228
+ * Public animation-time input. Accepts:
229
+ * - `number` — already milliseconds (`250`)
230
+ * - `string` in `<n>ms` or `<n>s` form (`"250ms"`, `"1s"`, `"2.5s"`)
231
+ * - `false` — disable (equivalent to `0`)
232
+ */
233
+ export declare type AnimationTime = Milliseconds | string | false;
117
234
 
118
235
  /**
119
236
  * Build a 2-stop candle-body gradient around a single hex color — a lightened
@@ -162,6 +279,51 @@ export declare interface AxisConfig {
162
279
  x?: XAxisConfig;
163
280
  }
164
281
 
282
+ declare class AxisTickTracker {
283
+ #private;
284
+ constructor(opts?: AxisTickTrackerOptions);
285
+ /**
286
+ * Record the latest tick set. Diffs against the current set and either
287
+ * starts a `0 → 1` fade-in for new values or a `1 → 0` fade-out for
288
+ * dropped ones. Idempotent on element-wise equal arrays.
289
+ *
290
+ * Callers must invoke {@link tick} every frame to advance the animators —
291
+ * `snapshot()` reads the current state but does not advance time.
292
+ */
293
+ setCurrentTicks(next: readonly number[]): void;
294
+ /**
295
+ * Advance each tracked animator against `now`. Animators that settle
296
+ * at zero are dropped from the map; non-zero settled animators stay so
297
+ * a subsequent re-entering tick can pick them up without a flicker.
298
+ * Returns `true` while any animator is still in flight.
299
+ */
300
+ tick(now: number): boolean;
301
+ /**
302
+ * Build a renderer-ready snapshot from the tracker's own animator state.
303
+ * No external opacity map is consulted — `setCurrentTicks` + `tick(now)`
304
+ * are the only inputs.
305
+ */
306
+ snapshot(): TickTrackerSnapshot;
307
+ getCurrentTicks(): readonly number[];
308
+ getPreviousTicks(): readonly number[];
309
+ /**
310
+ * Reconfigure the cross-fade duration. Chart calls this after resolving
311
+ * `animations.axis.ticks` so the tracker honors the user's config
312
+ * without plumbing options through the scale constructors.
313
+ */
314
+ setFadeMs(ms: number): void;
315
+ /** Whether subsequent tick-set changes should fade-in or snap. */
316
+ markArmed(): void;
317
+ get isArmed(): boolean;
318
+ /** Drop all tracked ticks. Use after dataset swap so stale values don't linger. */
319
+ reset(): void;
320
+ }
321
+
322
+ declare interface AxisTickTrackerOptions {
323
+ /** Cross-fade duration in ms once {@link markArmed} has flipped. Defaults to {@link DEFAULT_TICKS_MS}. */
324
+ fadeMs?: number;
325
+ }
326
+
165
327
  export declare const ayuMirage: ThemePreset;
166
328
 
167
329
  /**
@@ -194,8 +356,6 @@ export declare interface BarSeriesOptions {
194
356
  * @see entryMs — cross-linked duration for this animation.
195
357
  */
196
358
  entryAnimation?: BarEntryAnimation;
197
- /** @deprecated Use {@link entryAnimation} instead. */
198
- enterAnimation?: BarEntryAnimation;
199
359
  /**
200
360
  * Per-bar entrance duration in milliseconds. Default: `250`.
201
361
  *
@@ -203,24 +363,19 @@ export declare interface BarSeriesOptions {
203
363
  * // Override for one series:
204
364
  * <BarSeries options={{ entryMs: 600 }} data={data} />
205
365
  *
206
- * // Or set the default for every series at once:
207
- * <ChartContainer animations={{ points: { enterMs: 600 } }}>
366
+ * // Or set the default for every bar series at once:
367
+ * <ChartContainer animations={{ series: { bar: { entry: 600 } } }}>
208
368
  * <BarSeries data={data} />
209
369
  * </ChartContainer>
210
370
  * ```
211
371
  *
212
- * Note: chart-level uses `enterMs`, per-series uses `entryMs` — same
213
- * animation, two names for historical reasons.
214
- *
215
372
  * `false` or `0` disables the entrance (equivalent to
216
- * `entryAnimation: 'none'`). A chart-level `animations.points: false` is a
217
- * hard disable that wins over this field.
373
+ * `entryAnimation: 'none'`). A chart-level `animations.series.bar: false`
374
+ * is a hard disable that wins over this field.
218
375
  *
219
376
  * @see BarSeriesOptions.entryAnimation
220
377
  */
221
378
  entryMs?: number | false;
222
- /** @deprecated Use {@link entryMs} instead. */
223
- enterMs?: number | false;
224
379
  /**
225
380
  * How long the displayed bar value takes to catch up to the actual one
226
381
  * on every `updateLastPoint`. Default: `250` ms.
@@ -230,13 +385,13 @@ export declare interface BarSeriesOptions {
230
385
  * <BarSeries options={{ smoothMs: 100 }} data={data} />
231
386
  *
232
387
  * // Chart-level default:
233
- * <ChartContainer animations={{ points: { smoothMs: 100 } }}>
388
+ * <ChartContainer animations={{ series: { bar: { smooth: 100 } } }}>
234
389
  * <BarSeries data={data} />
235
390
  * </ChartContainer>
236
391
  * ```
237
392
  *
238
393
  * `0` or `false` snaps the displayed value to the target on every tick
239
- * (no smoothing). A chart-level `animations.points: false` is a hard
394
+ * (no smoothing). A chart-level `animations.series.bar: false` is a hard
240
395
  * disable that wins over this field.
241
396
  */
242
397
  smoothMs?: number | false;
@@ -251,9 +406,6 @@ declare interface BarSeriesProps {
251
406
  id?: string;
252
407
  }
253
408
 
254
- /** @deprecated Use {@link StackingMode} instead. */
255
- export declare type BarStacking = StackingMode;
256
-
257
409
  /**
258
410
  * Snapshot every visible series / layer at `time`. Used by hover overlays
259
411
  * (`InfoBar` in hover mode, `Tooltip`). Hidden series and hidden layers are
@@ -341,8 +493,6 @@ export declare interface CandlestickSeriesOptions {
341
493
  * @see entryMs — cross-linked duration for this animation.
342
494
  */
343
495
  entryAnimation?: CandlestickEntryAnimation;
344
- /** @deprecated Use {@link entryAnimation} instead. */
345
- enterAnimation?: CandlestickEntryAnimation;
346
496
  /**
347
497
  * Per-candle entrance duration in milliseconds. Default: `250`.
348
498
  *
@@ -350,24 +500,20 @@ export declare interface CandlestickSeriesOptions {
350
500
  * // Override for one series:
351
501
  * <CandlestickSeries options={{ entryMs: 600 }} data={data} />
352
502
  *
353
- * // Or set the default for every series at once:
354
- * <ChartContainer animations={{ points: { enterMs: 600 } }}>
503
+ * // Or set the default for every candlestick series at once:
504
+ * <ChartContainer animations={{ series: { candlestick: { entry: 600 } } }}>
355
505
  * <CandlestickSeries data={data} />
356
506
  * </ChartContainer>
357
507
  * ```
358
508
  *
359
- * Note: chart-level uses `enterMs`, per-series uses `entryMs` — same
360
- * animation, two names for historical reasons.
361
- *
362
509
  * `false` or `0` disables the entrance (equivalent to
363
- * `entryAnimation: 'none'`). A chart-level `animations.points: false` is a
364
- * hard disable that wins over this field.
510
+ * `entryAnimation: 'none'`). A chart-level
511
+ * `animations.series.candlestick: false` is a hard disable that wins over
512
+ * this field.
365
513
  *
366
514
  * @see CandlestickSeriesOptions.entryAnimation
367
515
  */
368
516
  entryMs?: number | false;
369
- /** @deprecated Use {@link entryMs} instead. */
370
- enterMs?: number | false;
371
517
  /**
372
518
  * How long the displayed OHLC takes to catch up to the actual last value
373
519
  * on every `updateLastPoint`. Default: `250` ms.
@@ -377,14 +523,14 @@ export declare interface CandlestickSeriesOptions {
377
523
  * <CandlestickSeries options={{ smoothMs: 100 }} data={data} />
378
524
  *
379
525
  * // Chart-level default:
380
- * <ChartContainer animations={{ points: { smoothMs: 100 } }}>
526
+ * <ChartContainer animations={{ series: { candlestick: { smooth: 100 } } }}>
381
527
  * <CandlestickSeries data={data} />
382
528
  * </ChartContainer>
383
529
  * ```
384
530
  *
385
531
  * `0` or `false` snaps the displayed value to the target on every tick
386
- * (no smoothing). A chart-level `animations.points: false` is a hard
387
- * disable that wins over this field.
532
+ * (no smoothing). A chart-level `animations.series.candlestick: false` is
533
+ * a hard disable that wins over this field.
388
534
  */
389
535
  smoothMs?: number | false;
390
536
  }
@@ -412,7 +558,7 @@ export declare const catppuccin: ThemePreset;
412
558
  * - Legend — flex sibling at the bottom (or right, when `position="right"`), so its height is
413
559
  * reserved by browser layout.
414
560
  */
415
- export declare function ChartContainer({ children, theme, axis, padding, gradient, interactive, grid, headerLayout, perf, animations, style, className, }: ChartContainerProps): JSX_2.Element;
561
+ export declare function ChartContainer({ children, theme, axis, padding, viewport, gradient, interactive, grid, headerLayout, perf, animations, onEdgeReached, style, className, }: ChartContainerProps): JSX_2.Element;
416
562
 
417
563
  /** Props for the {@link ChartContainer} component. */
418
564
  declare interface ChartContainerProps {
@@ -451,6 +597,30 @@ declare interface ChartContainerProps {
451
597
  intervals: number;
452
598
  };
453
599
  };
600
+ /**
601
+ * Viewport-level streaming behavior. Captured at mount only — changing this
602
+ * prop after the chart is created is ignored.
603
+ */
604
+ viewport?: {
605
+ /**
606
+ * Width of the visible window in data bars, set on the first data load
607
+ * to `maxVisibleBars * dataInterval`. While the dataset is smaller than
608
+ * this width, streaming ticks render into the empty right-side gap and
609
+ * the viewport stays put; once the data reaches the right edge, the
610
+ * viewport pans forward to keep the latest bar pinned (tail-scroll).
611
+ * Default: 200.
612
+ */
613
+ maxVisibleBars?: number;
614
+ /**
615
+ * Initial visible range applied before the first paint with data. Same
616
+ * shape as the imperative `chart.setVisibleRange` — pass a bar count
617
+ * (e.g. `35`), an explicit `{from, to}` window, or `{from, bars}` for
618
+ * a warm-up pair. The standard alternative is calling
619
+ * `setVisibleRange` from a `useEffect`, but that runs post-paint and
620
+ * makes the chart visibly re-zoom on the next RAF. Captured at mount.
621
+ */
622
+ initialRange?: VisibleRangeSpec;
623
+ };
454
624
  /** Show the chart background gradient. Defaults to true. */
455
625
  gradient?: boolean;
456
626
  /** Enable zoom, pan, and crosshair interactions. Defaults to true. */
@@ -470,33 +640,16 @@ declare interface ChartContainerProps {
470
640
  */
471
641
  headerLayout?: 'overlay' | 'inline';
472
642
  /**
473
- * Chart-level animation configuration. See {@link AnimationsConfig} for the
474
- * full shape.
475
- *
476
- * Two layers remember which is which:
477
- *
478
- * - **Chart-level (this prop)** — `animations.points.{enterMs, smoothMs,
479
- * pulseMs}` and `animations.viewport.{reboundMs, yAxisMs,
480
- * inputResponseMs}`. Acts as the default for every series.
481
- * - **Per-series** — `<LineSeries options={{ entryMs, smoothMs, pulseMs }}>`
482
- * (and the analogous CandlestickSeries / BarSeries options). Overrides
483
- * the chart-level default for that one series. Note the spelling:
484
- * `entryMs` per-series, `enterMs` chart-level — historical artefact,
485
- * both refer to the same animation.
486
- *
487
- * Resolution: per-series option wins over chart-level numeric value.
488
- * Chart-level wins only when its category is explicitly `false` — that's
489
- * a hard disable that overrides per-series too.
643
+ * Animation control. `true` / omitted uses built-in defaults; `false`
644
+ * disables every category. Per-series options on `<LineSeries>` /
645
+ * `<CandlestickSeries>` / `<BarSeries>` override these chart-level
646
+ * defaults unless the category here is explicitly `false`.
490
647
  *
491
- * Shorthands:
492
- * - `true` / omitted — built-in defaults (every settling animation 250 ms,
493
- * pulse cycle 600 ms, input ease 0 / off).
494
- * - `false` disables every animation category.
495
- * - `{ points: false }` / `{ viewport: false }` disables a category.
496
- *
497
- * Runtime updates: changing this prop after mount calls
498
- * `chart.setAnimations(...)` so the new durations take effect on the next
499
- * animation / render.
648
+ * **Init-only by reference identity.** A new `animations` object
649
+ * recreates the underlying `ChartInstance` (and its canvas). Wrap the
650
+ * value in `useMemo(() => ({...}), [deps])` so an unstable parent
651
+ * render doesn't tear down the chart every commit. In dev mode the
652
+ * container emits a console warning when it detects >3 recreates / s.
500
653
  */
501
654
  animations?: boolean | AnimationsConfig;
502
655
  /**
@@ -509,6 +662,18 @@ declare interface ChartContainerProps {
509
662
  * Only read at mount; changing this prop after the chart is created is ignored.
510
663
  */
511
664
  perf?: PerfOption;
665
+ /**
666
+ * Fired after the user releases a pan/zoom gesture that pulled the viewport
667
+ * past a data edge by more than ~10% of the visible range. Hosts typically
668
+ * respond by prefetching more history.
669
+ *
670
+ * For threshold-based prefetch (load *before* the user fully overshoots),
671
+ * use `<EdgeLoader>` instead — that component subscribes to `viewportChange`
672
+ * and arms when the visible range nears the data edge.
673
+ *
674
+ * Captured at mount only; changing the prop identity later is ignored.
675
+ */
676
+ onEdgeReached?: (info: EdgeReachedInfo) => void;
512
677
  /** Inline style for the chart's outer wrapper element. */
513
678
  style?: CSSProperties;
514
679
  /** Extra class for the chart's outer wrapper element. */
@@ -529,41 +694,58 @@ declare interface ChartEvents {
529
694
  * subscribe to this instead of stacking multiple listeners.
530
695
  */
531
696
  overlayChange: () => void;
697
+ /**
698
+ * Fired once per main-layer frame *while* an axis tick is still in the
699
+ * middle of its fade-in/out animation. DOM axis components (`<TimeAxis>`,
700
+ * `<YAxis>`) listen to this to re-read the per-tick opacity from
701
+ * `timeScale.tickTracker` / `yScale.tickTracker` so the DOM labels and
702
+ * canvas grid lines fade in lockstep. Stops firing as soon as every
703
+ * tracked tick has reached its target opacity.
704
+ */
705
+ tickFrame: () => void;
532
706
  }
533
707
 
534
708
  /**
535
709
  * Core chart controller. Manages series, viewport, scales, and rendering.
536
710
  * Create one per chart container and call {@link destroy} on unmount.
537
711
  */
538
- export declare class ChartInstance extends EventEmitter<ChartEvents> {
712
+ export declare class ChartInstance extends EventEmitter<ChartEvents> implements PanZoomTarget {
539
713
  #private;
540
714
  /** Maps time values to horizontal pixel coordinates. */
541
- readonly timeScale: TimeScale;
715
+ readonly timeScale: XScale;
542
716
  /** Maps price/value to vertical pixel coordinates. */
543
717
  readonly yScale: YScale;
544
718
  get yAxisWidth(): number;
545
719
  get xAxisHeight(): number;
546
720
  constructor(container: HTMLElement, options?: ChartOptions);
547
- /** Add a candlestick (OHLC) series and return its unique ID. */
548
- addCandlestickSeries(options?: Partial<CandlestickSeriesOptions & {
721
+ /**
722
+ * Add a series of the given `type` and return its unique ID. `options` is
723
+ * typed per `type` via the overloads. `layers` (line/bar) and `id` are
724
+ * consumed here; everything else is forwarded to the renderer.
725
+ */
726
+ addSeries(type: 'candlestick', options?: Partial<CandlestickSeriesOptions & {
549
727
  id?: string;
550
728
  }>): string;
551
- /** Add a line series and return its unique ID. */
552
- addLineSeries(options?: Partial<LineSeriesOptions & {
729
+ addSeries(type: 'line', options?: Partial<LineSeriesOptions & {
553
730
  layers?: number;
554
731
  id?: string;
555
732
  }>): string;
556
- /** Add a bar series and return its unique ID. */
557
- addBarSeries(options?: Partial<BarSeriesOptions & {
733
+ addSeries(type: 'bar', options?: Partial<BarSeriesOptions & {
558
734
  layers?: number;
559
735
  id?: string;
560
736
  }>): string;
561
- /** Add a pie/donut series. Set `innerRadiusRatio > 0` for donut. */
562
- addPieSeries(options?: Partial<PieSeriesOptions & {
737
+ addSeries(type: 'pie', options?: Partial<PieSeriesOptions & {
563
738
  id?: string;
564
739
  }>): string;
565
740
  /** Remove a series by ID and clean up its resources. */
566
741
  removeSeries(id: string): void;
742
+ /**
743
+ * Read-only snapshot of the chart's X / Y viewport animation. The same
744
+ * shape (`xRange`, `yRange`, `animating`) every frame — call this inside
745
+ * the current render pass rather than caching the reference, as the
746
+ * underlying animator mutates between frames.
747
+ */
748
+ getAnimationState(): AnimationState;
567
749
  /**
568
750
  * Replace all data for a series.
569
751
  *
@@ -578,6 +760,20 @@ export declare class ChartInstance extends EventEmitter<ChartEvents> {
578
760
  appendData(id: string, point: OHLCInput | TimePointInput, layerIndex?: number): void;
579
761
  /** Update the last data point of a series in place (e.g. live candle update). */
580
762
  updateData(id: string, point: OHLCInput | TimePointInput, layerIndex?: number): void;
763
+ /**
764
+ * Keep only the most recent `count` points of a series — drop the oldest
765
+ * tail when the series exceeds the cap. Smooth Y-range chase (no snap):
766
+ * unlike {@link setSeriesData}, this does NOT set the bulk-replace snap
767
+ * flag, so streaming windows can roll without per-tick Y jitter.
768
+ *
769
+ * Idempotent: a no-op when the series is already at or below `count`.
770
+ * Use after {@link appendData} in a rolling-window stream:
771
+ * ```ts
772
+ * chart.appendData('feed', point);
773
+ * chart.keepLast('feed', 100);
774
+ * ```
775
+ */
776
+ keepLast(id: string, count: number, layerIndex?: number): void;
581
777
  /** Update visual options (color, width, etc.) for an existing series. */
582
778
  updateSeriesOptions(id: string, options: Partial<CandlestickSeriesOptions> | Partial<LineSeriesOptions> | Partial<BarSeriesOptions> | Partial<PieSeriesOptions>): void;
583
779
  /**
@@ -585,39 +781,103 @@ export declare class ChartInstance extends EventEmitter<ChartEvents> {
585
781
  * inside `fn` still flush the batch so counters don't leak across calls.
586
782
  */
587
783
  batch(fn: () => void): void;
588
- /** Show or hide a series. Hidden series are not rendered and excluded from Y-range. */
784
+ /** Show or hide a series. The series cross-fades over
785
+ * `animations.toggle`; the Y range re-fits on the same schedule
786
+ * (one-shot duration override) so the fade and the axis adjustment
787
+ * finish on the same frame. Hidden series are excluded from Y-range
788
+ * computation immediately so the axis can start moving while the line
789
+ * fades out in parallel.
790
+ */
589
791
  setSeriesVisible(seriesId: string, visible: boolean): void;
792
+ /**
793
+ * Whether streaming ticks slide the visible range to track the data tail.
794
+ * Flipped off by a pan that pushes the tail off screen; re-engaged when
795
+ * a follow-up pan brings the tail back into the destination window or
796
+ * when {@link fitContent} / {@link setVisibleRange} commits a range
797
+ * containing the tail.
798
+ */
799
+ getAutoScroll(): boolean;
590
800
  isSeriesVisible(seriesId: string): boolean;
591
- /** Show or hide a specific layer within a multi-layer series. */
801
+ /**
802
+ * Show or hide a specific layer within a multi-layer series.
803
+ *
804
+ * Symmetric with {@link setSeriesVisible}: drives both the renderer's
805
+ * per-layer alpha fade and the engine's Y re-fit through `toggleMs` so the
806
+ * line fade and the axis adjustment finish on the same frame. Hidden layers
807
+ * are excluded from Y-range computation immediately (via the renderer's
808
+ * `getValueRange` reading `store.isVisible()`); the alpha fade keeps the
809
+ * layer's geometry on screen until the engine's Y ease settles.
810
+ */
592
811
  setLayerVisible(seriesId: string, layerIndex: number, visible: boolean): void;
593
812
  isLayerVisible(seriesId: string, layerIndex: number): boolean;
594
813
  /** Auto-fit the viewport to show all data across every series. */
595
814
  fitContent(): void;
596
- getVisibleRange(): VisibleRange;
815
+ getVisibleRange(): XRange;
597
816
  /**
598
817
  * Return the full span of registered data, or `null` before any data has
599
- * arrived. `{ from: dataStart, to: dataEnd }` mirrors the viewport's own
818
+ * arrived. `{ from: dataStart, to: dataEnd }` mirrors the chart's own
600
819
  * tracking and is cheaper than recomputing from series stores.
601
820
  */
602
- getDataRange(): VisibleRange | null;
821
+ getDataRange(): XRange | null;
603
822
  /**
604
- * Imperatively set the visible time range.
823
+ * Imperatively set the visible time range. Three forms:
605
824
  *
606
- * Two forms:
607
- * - `{ from, to }` explicit millisecond range. Cancels any in-flight
608
- * animation and applies immediately. Auto-scroll stays on only if the
609
- * tail is inside the new range (mirrors pan semantics).
610
- * - `number N` shorthand for "show the last N bars from the tail".
611
- * Resolved against the current data bounds and data interval; keeps
612
- * auto-scroll on so streaming ticks continue to track the tail.
613
- * No-op if data hasn't loaded yet.
825
+ * - `number N` — show the last N bars from the data tail (anchor right).
826
+ * Resolved against current data bounds and data interval; keeps
827
+ * auto-scroll on. No-op if data hasn't loaded yet.
828
+ * - `{ from, to }` — explicit time range. `from`/`to` accept either
829
+ * epoch milliseconds or `Date`. Cancels any in-flight animation and
830
+ * applies immediately. Auto-scroll stays on only if the tail is
831
+ * inside the new range (mirrors pan semantics).
832
+ * - `{ from, bars }` — anchor the visible window at `from` and extend
833
+ * right by `bars` data intervals. Useful for warm-up windows where
834
+ * seed points sit on the left and a stream fills the gap on the
835
+ * right. `from` accepts a `Date` too.
614
836
  *
615
837
  * Typical use: on mount, zoom to the last N bars while keeping the full
616
838
  * buffer available for pan-back history inspection.
617
- */
618
- setVisibleRange(range: VisibleRange | number): void;
839
+ *
840
+ * `opts.gesture` (explicit `{ from, to }` form only) eases X and Y on the
841
+ * same fast, velocity-matched profile a user pan/zoom uses instead of the
842
+ * default programmatic settle (snap X, sticky-Y ease). Use it for
843
+ * multi-chart sync so a synced pane tracks the originating gesture in
844
+ * lockstep rather than lagging behind on the long sticky contract.
845
+ */
846
+ setVisibleRange(spec: VisibleRangeSpec, opts?: {
847
+ gesture?: boolean;
848
+ }): void;
619
849
  getYRange(): YRange;
620
850
  getCrosshairPosition(): CrosshairPosition | null;
851
+ /**
852
+ * Programmatically set or clear the crosshair. Same effect as the user
853
+ * hovering over `(timeToX(time), valueToY(y))` — emits `crosshairMove`,
854
+ * marks the overlay layer dirty, and lets `<Crosshair>` / `<Tooltip>`
855
+ * react via their normal store subscriptions.
856
+ *
857
+ * Pass `null` to clear (mirrors the pointer-leave path).
858
+ *
859
+ * `y` is optional. Resolution order when omitted:
860
+ * 1. **current crosshair's y** — preserves whatever the chart already
861
+ * has (real cursor y, or a previously-synthesised value). This is
862
+ * what makes the cross-chart broadcast pattern work: when an echo
863
+ * arrives at the chart that originated the hover, the existing y
864
+ * stays in place and the idempotency check below short-circuits the
865
+ * loop. Without preservation, the echo would overwrite the source's
866
+ * real cursor y with the midpoint default and the tooltip would
867
+ * jitter between cursor and midpoint every mouse-move.
868
+ * 2. **midpoint of the current Y range** — fallback when there is no
869
+ * current crosshair (first programmatic set on a chart that hasn't
870
+ * been hovered yet).
871
+ *
872
+ * Idempotent: a call that produces the same `(time, y)` pair as the
873
+ * current crosshair is a no-op (no emit). Combined with the y-preservation
874
+ * above, this lets N charts broadcast their hover to each other without
875
+ * a feedback-loop guard.
876
+ */
877
+ setCrosshair(pos: {
878
+ time: number;
879
+ y?: number;
880
+ } | null): void;
621
881
  /** Get the last visible value and whether the absolute last point is on screen. */
622
882
  getLastValue(seriesId: string): {
623
883
  value: number;
@@ -641,11 +901,6 @@ export declare class ChartInstance extends EventEmitter<ChartEvents> {
641
901
  color: string;
642
902
  }[] | null;
643
903
  getSeriesIds(): string[];
644
- /**
645
- * Type of a registered series, or `null` for unknown ids. `'pie'` for
646
- * `PieRenderer`; everything else is a time-series (`'time'`).
647
- */
648
- getSeriesType(seriesId: string): 'pie' | 'time' | null;
649
904
  /**
650
905
  * Filter `getSeriesIds()` by renderer type. `'pie'` returns pie series,
651
906
  * `'time'` returns line/bar/candlestick.
@@ -724,25 +979,6 @@ export declare class ChartInstance extends EventEmitter<ChartEvents> {
724
979
  * a wrapper re-applies padding reactively (e.g. in response to a Title /
725
980
  * InfoBar ResizeObserver).
726
981
  */
727
- /**
728
- * Replace the chart-level animation configuration at runtime. Updates the
729
- * resolved durations and propagates them to every dependent subsystem:
730
- *
731
- * - viewport: reboundMs (next rebound), inputResponseMs (next pan/zoom).
732
- * - per-frame: yAxisMs (next render).
733
- * - existing series: only the **hard-disable** signal (0 / false) is pushed
734
- * into renderers — that's the documented contract on
735
- * {@link AnimationsConfig.points}, "chart-level `false` wins over per-
736
- * series". Numeric chart-level changes update the default for *new*
737
- * series but leave existing per-series overrides intact, which avoids
738
- * silently clobbering custom values on every prop update from a React
739
- * wrapper.
740
- *
741
- * In-flight animations are NOT cancelled — the new durations apply to the
742
- * next animation that fires. To force-snap the current animation, call
743
- * the relevant API explicitly (e.g. `setRange`) afterwards.
744
- */
745
- setAnimations(animations: ChartOptions['animations']): void;
746
982
  setPadding(padding: ChartOptions['padding']): void;
747
983
  /** Show or hide the background grid. Takes effect on the next render frame. */
748
984
  setGrid(grid: {
@@ -760,9 +996,13 @@ export declare class ChartInstance extends EventEmitter<ChartEvents> {
760
996
  setEdgeState(side: EdgeSide, state: EdgeState): void;
761
997
  /** Read the current host-declared state for a given edge. */
762
998
  getEdgeState(side: EdgeSide): EdgeState;
763
- /** Notify chart that a YLabel is present (affects right padding). */
764
- setYLabel(has: boolean): void;
765
- private updateViewportPadding;
999
+ /**
1000
+ * Notify chart that a YLabel overlay is mounted / unmounted. Currently a
1001
+ * no-op — placeholder for the right-padding reflow that will adjust the
1002
+ * chart area to make room for the badge.
1003
+ * TODO: implement reflow.
1004
+ */
1005
+ setYLabel(_has: boolean): void;
766
1006
  /** Tear down the chart: cancel animations, remove listeners, and detach the canvas. */
767
1007
  destroy(): void;
768
1008
  /** The attached performance monitor, or `null` when instrumentation is disabled. */
@@ -772,39 +1012,42 @@ export declare class ChartInstance extends EventEmitter<ChartEvents> {
772
1012
  private onDataChanged;
773
1013
  private updateDataInterval;
774
1014
  /**
775
- * Sample data inside `targetVisible` and return the unbounded [min, max] of
776
- * the visible series, or `null` when nothing is in view. Bounds are NOT
777
- * applied here the caller composes them via {@link resolveBound}.
1015
+ * Shift the visible time range by `timeDelta` ms. Hard-clamped so at
1016
+ * least one data point stays on screen no rubber-band, no overshoot.
1017
+ * A pan that moves the viewport off the live-tail position flips
1018
+ * autoscroll off. Fires `edgeReached` whenever the clamp trims the
1019
+ * gesture (i.e., the user pushed past the boundary), so consumers can
1020
+ * trigger history loads. Forwards the committed target to the engine
1021
+ * as a gesture for visual easing. Public so consumers can drive pan
1022
+ * programmatically.
1023
+ */
1024
+ pan(timeDelta: number, chartWidth?: number): void;
1025
+ /**
1026
+ * Zoom around a time anchor. `factor < 1` zooms in, `> 1` zooms out.
1027
+ * In historical mode the window anchors to `centerTime` (cursor-driven).
1028
+ * Zoom-out is hard-capped at the padded data span. Forwards the committed
1029
+ * target to the engine as a gesture for visual easing. Public so consumers
1030
+ * can drive zoom programmatically.
778
1031
  *
779
- * `targetVisible` is the X *destination* (logicalRange), not the animating
780
- * current. Sampling against a moving X would make Y chase a definition of
781
- * "in view" that shifts every frame; passing the destination explicitly
782
- * keeps Y on a stable target so X and Y converge together.
1032
+ * Sticky-follow: while `#autoScroll` is on, the new window is repositioned
1033
+ * so its right edge sits at `dataEnd + paddingRight` (follow position).
1034
+ * Span (zoom level) from `computeZoom` is preserved; only the position
1035
+ * is locked to the tail. This avoids the next-tick `computeStreamingTarget`
1036
+ * offset clamp (which would otherwise slide X left to the follow position
1037
+ * and produce a visible jump). Cursor-anchored zoom is intentionally
1038
+ * sacrificed in follow-live mode — pan first to inspect history.
783
1039
  */
784
- private computeTargetYRange;
785
- private updateYRange;
786
- /** Resolve an {@link AxisBound} to a concrete numeric value. */
787
- private resolveBound;
1040
+ zoomAt(centerTime: number, factor: number, chartWidth?: number): void;
788
1041
  /**
789
1042
  * Lightweight scale sync: updates timeScale/yScale from current viewport state
790
1043
  * without advancing the Y smoothing animation. Called from the viewport 'change'
791
- * handler so DOM axis components always read fresh coordinates on re-render.
1044
+ * handler, so DOM axis components always read fresh coordinates on re-render.
792
1045
  */
793
1046
  private syncScales;
794
- private updateScales;
795
1047
  /** Expensive: background, grid, all series. Only on data/viewport/resize change. */
796
1048
  private renderMain;
797
1049
  /** Cheap overlay: crosshair, nearest-point dots, pulse animation, edge indicator. */
798
1050
  private renderOverlay;
799
- private drawEdgeIndicators;
800
- /**
801
- * Pick the boundary time to anchor the edge indicator at. Prefer the
802
- * cached value emitted by the most recent `edgeReached` — that's the
803
- * *exact* point the user overshot. Fall back to the current data edge
804
- * when no gesture has fired yet (host might invoke `setEdgeState`
805
- * directly on mount to show a "no-data" marker from the start).
806
- */
807
- private resolveEdgeBoundary;
808
1051
  }
809
1052
 
810
1053
  /** Layout metrics describing the chart area, Y axis, and time axis sizes. */
@@ -814,6 +1057,7 @@ export declare interface ChartLayout {
814
1057
  xAxisHeight: number;
815
1058
  }
816
1059
 
1060
+ /** Options passed when creating a new ChartInstance. */
817
1061
  export declare interface ChartOptions {
818
1062
  theme?: ChartTheme;
819
1063
  axis?: AxisConfig;
@@ -824,12 +1068,35 @@ export declare interface ChartOptions {
824
1068
  padding?: {
825
1069
  top?: number;
826
1070
  bottom?: number;
827
- right?: number | {
828
- intervals: number;
829
- };
830
- left?: number | {
831
- intervals: number;
832
- };
1071
+ right?: HorizontalPadding;
1072
+ left?: HorizontalPadding;
1073
+ };
1074
+ /**
1075
+ * Viewport-level streaming behavior.
1076
+ */
1077
+ viewport?: {
1078
+ /**
1079
+ * Maximum number of data bars (candles/points) the viewport will fit
1080
+ * before it stops growing and switches to tail-scroll. While the data
1081
+ * span is below this threshold, streaming ticks expand the right edge
1082
+ * to absorb new points; once the span exceeds it, the visible window
1083
+ * holds at this width and slides forward as new data arrives.
1084
+ * Default: 200. Values below 2 are clamped.
1085
+ */
1086
+ maxVisibleBars?: number;
1087
+ /**
1088
+ * Initial visible range applied **before** the first paint after data
1089
+ * arrives. Same shape as `ChartInstance.setVisibleRange` (a bar count,
1090
+ * an explicit `{from, to}` window, or a `{from, bars}` warm-up pair).
1091
+ * Calling `setVisibleRange` after mount via `useEffect` runs post-paint
1092
+ * and visually re-zooms the chart on the next frame; this option folds
1093
+ * the same intent into the first render so the very first paint
1094
+ * already shows the requested window.
1095
+ *
1096
+ * One-shot — consumed by the first `onDataChanged` call that has data,
1097
+ * then cleared. Subsequent `setSeriesData` calls don't re-apply it.
1098
+ */
1099
+ initialRange?: VisibleRangeSpec;
833
1100
  };
834
1101
  /** Enable zoom, pan, and crosshair interactions. Defaults to true. */
835
1102
  interactive?: boolean;
@@ -838,17 +1105,16 @@ export declare interface ChartOptions {
838
1105
  visible: boolean;
839
1106
  };
840
1107
  /**
841
- * Animation control. Split into `points` (data-series animations) and
842
- * `viewport` (pan/zoom rebound + Y-axis smoothing). See
843
- * {@link AnimationsConfig} for the full shape and defaults.
1108
+ * Animation control. Grouped as `axis: { y, x, ticks }` (axis-side
1109
+ * behaviour), `toggle` (series visibility — alpha + Y refit), and
1110
+ * `series.{line,candlestick,bar,pie}` (per-series-type data tweens).
1111
+ * See {@link AnimationsConfig} for the full shape and defaults.
844
1112
  *
845
1113
  * Shorthands:
846
1114
  * - `animations: true` (or omitted) uses built-in defaults.
847
1115
  * - `animations: false` disables every animation category.
848
- * - `animations: { points: false }` disables all data-series animations.
849
- * - `animations: { viewport: false }` disables rebound + Y-axis smoothing.
850
1116
  *
851
- * Per-series options (`enterMs`, `smoothMs`, etc.) override chart-level
1117
+ * Per-series options (`entryMs`, `smoothMs`, etc.) override chart-level
852
1118
  * defaults unless the category is explicitly `false` — then the chart-
853
1119
  * level gate wins.
854
1120
  */
@@ -857,7 +1123,7 @@ export declare interface ChartOptions {
857
1123
  * Invoked after the user releases a pan/zoom gesture that pulled the
858
1124
  * viewport past a data edge by more than 10% of the visible range. Hosts
859
1125
  * typically respond by prefetching more history and calling
860
- * {@link ChartInstance.setEdgeState} to show a spinner or "no more data"
1126
+ * `ChartInstance.setEdgeState` to show a spinner or "no more data"
861
1127
  * indicator at the corresponding edge.
862
1128
  */
863
1129
  onEdgeReached?: (info: EdgeReachedInfo) => void;
@@ -1089,21 +1355,73 @@ export declare interface CrosshairPosition {
1089
1355
  y: number;
1090
1356
  }
1091
1357
 
1358
+ export declare function detectInterval(times: number[]): number;
1359
+
1360
+ export declare const dracula: ThemePreset;
1361
+
1092
1362
  /**
1093
- * @deprecated Use a named preset instead `catppuccin.theme` is the new
1094
- * default dark palette, and `dracula`, `nightOwl`, `oneDarkPro`, `gruvbox`,
1095
- * `monokaiPro`, `materialPalenight`, or `panda` cover the rest of the
1096
- * dark spectrum. `darkTheme` is kept as an alias for the previous default
1097
- * and will be removed in a future major release.
1363
+ * Subscribes to the chart's viewport and triggers a fetch when the visible
1364
+ * range nears the chosen data edge. Handles the boilerplate every load-on-scroll
1365
+ * site otherwise has to re-implement: arming after first user pan, deduping
1366
+ * via Promise tracking, and exposing the boundary's pixel coordinate so a
1367
+ * loader can be anchored to "the wall of available history".
1368
+ *
1369
+ * Place as a child of `<ChartContainer>`.
1098
1370
  */
1099
- export declare const darkTheme: ChartTheme;
1371
+ export declare function EdgeLoader({ side, threshold, onTrigger, indicator, children }: EdgeLoaderProps): JSX_2.Element | null;
1100
1372
 
1101
- export declare function detectInterval(times: number[]): number;
1373
+ export declare interface EdgeLoaderProps {
1374
+ /** Which edge to watch. */
1375
+ side: EdgeSide;
1376
+ /**
1377
+ * Bars from the edge that arms the trigger. Multiplied by the chart's data
1378
+ * interval. Default `5`.
1379
+ */
1380
+ threshold?: number;
1381
+ /**
1382
+ * Called when the visible range moves within {@link EdgeLoaderProps.threshold}
1383
+ * bars of the data edge. Returning a Promise toggles `isLoading` for its
1384
+ * lifetime. **Resolve with `false`** to signal "no more data" — the loader
1385
+ * stops watching and switches the optional canvas indicator to its
1386
+ * `'no-data'` state. Any other resolve value (including `undefined`) means
1387
+ * "keep watching for the next near-edge event".
1388
+ */
1389
+ onTrigger: () => void | Promise<unknown>;
1390
+ /**
1391
+ * - `'canvas'` (default): drive the chart's built-in canvas spinner via
1392
+ * {@link ChartInstance.setEdgeState}. Renders inside the chart area at
1393
+ * the data boundary.
1394
+ * - `'custom'`: skip the canvas indicator. Use the render-prop `children`
1395
+ * to draw your own DOM/SVG loader.
1396
+ */
1397
+ indicator?: 'canvas' | 'custom';
1398
+ /**
1399
+ * Optional render-prop. Receives the live edge state — render whatever
1400
+ * positioned overlay you want, or return `null`.
1401
+ */
1402
+ children?: (args: EdgeLoaderRenderArgs) => ReactNode;
1403
+ }
1102
1404
 
1103
- export declare const dracula: ThemePreset;
1405
+ /** Argument shape passed to the {@link EdgeLoader} render-prop. */
1406
+ export declare interface EdgeLoaderRenderArgs {
1407
+ /**
1408
+ * CSS pixels in the chart's overlay coordinate space, anchored at the data
1409
+ * edge (`data.from` for `side='left'`, `data.to` for `side='right'`).
1410
+ * The overlay div is positioned with `inset: 0`, so this value can be used
1411
+ * directly as `style={{ left: x }}` or `transform: translateX(...)`.
1412
+ */
1413
+ x: number;
1414
+ side: EdgeSide;
1415
+ /** True between {@link EdgeLoaderProps.onTrigger} firing and its Promise resolving. */
1416
+ isLoading: boolean;
1417
+ /** Time coordinate (ms) of the data edge — convenient for "fetch history before T" requests. */
1418
+ boundaryTime: number;
1419
+ /** Becomes `false` after `onTrigger` resolves with the literal value `false`. */
1420
+ hasMore: boolean;
1421
+ }
1104
1422
 
1105
1423
  /** Payload for {@link ChartOptions.onEdgeReached}. */
1106
- declare interface EdgeReachedInfo {
1424
+ export declare interface EdgeReachedInfo {
1107
1425
  side: EdgeSide;
1108
1426
  /** Time units the user pulled past the soft bound. */
1109
1427
  overshoot: number;
@@ -1112,7 +1430,7 @@ declare interface EdgeReachedInfo {
1112
1430
  }
1113
1431
 
1114
1432
  /** Which data side the user pulled past during a gesture. */
1115
- declare type EdgeSide = 'left' | 'right';
1433
+ export declare type EdgeSide = 'left' | 'right';
1116
1434
 
1117
1435
  /**
1118
1436
  * Host-controlled visual state for a chart edge:
@@ -1121,7 +1439,7 @@ declare type EdgeSide = 'left' | 'right';
1121
1439
  * - `no-data`: a dashed boundary line + "No more data" label appears at the data edge.
1122
1440
  * - `has-more`: reserved — currently behaves like `idle`. Use when more data exists but is not being fetched.
1123
1441
  */
1124
- declare type EdgeState = 'idle' | 'loading' | 'no-data' | 'has-more';
1442
+ export declare type EdgeState = 'idle' | 'loading' | 'no-data' | 'has-more';
1125
1443
 
1126
1444
  declare class EventEmitter<Events = Record<string, Listener>> {
1127
1445
  private listeners;
@@ -1168,8 +1486,25 @@ export declare const gruvbox: ThemePreset;
1168
1486
 
1169
1487
  export declare const handwritten: ThemePreset;
1170
1488
 
1489
+ /**
1490
+ * Velocity-matched cubic Hermite Y transition. Direction-aware: per-call
1491
+ * `expandMs` (outward, default 250 ms via the engine) and `contractMs`
1492
+ * (inward, default 2500 ms — sticky-Y) are supplied through `retarget()`.
1493
+ *
1494
+ * Default Y transition. Bounded duration — after the supplied settle each
1495
+ * side lands exactly at the target with zero velocity, unlike spring's
1496
+ * asymptotic approach. Predictable for animations whose end-state matters
1497
+ * (axis labels can settle in a known time).
1498
+ */
1499
+ export declare function hermite(): TransitionFactory<YRange>;
1500
+
1171
1501
  export declare const highContrast: ThemePreset;
1172
1502
 
1503
+ /** Horizontal padding expressed as a fixed pixel offset or a number of data intervals. */
1504
+ declare type HorizontalPadding = number | {
1505
+ intervals: number;
1506
+ };
1507
+
1173
1508
  /** Shape returned by {@link SeriesRenderer.getHoverInfo} / per-slice entries of {@link SeriesRenderer.getSliceInfo}. */
1174
1509
  export declare interface HoverInfo {
1175
1510
  label: string;
@@ -1215,6 +1550,8 @@ export declare interface InfoBarRenderContext {
1215
1550
  readonly isHover: boolean;
1216
1551
  }
1217
1552
 
1553
+ export declare function isDarkBg(bg: string): boolean;
1554
+
1218
1555
  export declare const lavenderMist: ThemePreset;
1219
1556
 
1220
1557
  export declare function Legend({ items, position, mode, children }: LegendProps): JSX_2.Element | null;
@@ -1297,18 +1634,6 @@ declare interface LegendRenderContext {
1297
1634
 
1298
1635
  export declare const lightPink: ThemePreset;
1299
1636
 
1300
- /**
1301
- * @deprecated Use a named light preset instead — `quietLight`, `githubLight`,
1302
- * `solarizedLight`, `minimalLight`, `peachCream`, `sandDune`, `lightPink`,
1303
- * `lavenderMist`, `mintBreeze`, `rosePineDawn`, or `handwritten`. `lightTheme`
1304
- * is kept as an alias for the previous default and will be removed in a
1305
- * future major release.
1306
- */
1307
- export declare const lightTheme: ChartTheme;
1308
-
1309
- /** @deprecated Use {@link TimePoint} instead. */
1310
- export declare type LineData = TimePoint;
1311
-
1312
1637
  /**
1313
1638
  * Entrance animation styles for new line points.
1314
1639
  * - `'none'` — new segments appear instantly.
@@ -1346,14 +1671,14 @@ export declare interface LineSeriesOptions {
1346
1671
  * <LineSeries options={{ pulseMs: 1200 }} data={data} />
1347
1672
  *
1348
1673
  * // Chart-level default:
1349
- * <ChartContainer animations={{ points: { pulseMs: 1200 } }}>
1674
+ * <ChartContainer animations={{ series: { line: { pulse: 1200 } } }}>
1350
1675
  * <LineSeries data={data} />
1351
1676
  * </ChartContainer>
1352
1677
  * ```
1353
1678
  *
1354
1679
  * `false` or `0` turns the halo off entirely (drawing and animation loop).
1355
- * A chart-level `animations.points: false` is a hard disable that wins
1356
- * over this field.
1680
+ * A chart-level `animations.series.line: false` is a hard disable that
1681
+ * wins over this field.
1357
1682
  */
1358
1683
  pulseMs?: number | false;
1359
1684
  /** Stacking mode. Default: 'off'. */
@@ -1366,8 +1691,6 @@ export declare interface LineSeriesOptions {
1366
1691
  * @see entryMs — cross-linked duration for this animation.
1367
1692
  */
1368
1693
  entryAnimation?: LineEntryAnimation;
1369
- /** @deprecated Use {@link entryAnimation} instead. */
1370
- enterAnimation?: LineEntryAnimation;
1371
1694
  /**
1372
1695
  * Per-point entrance duration in milliseconds. Default: `250`.
1373
1696
  *
@@ -1375,24 +1698,19 @@ export declare interface LineSeriesOptions {
1375
1698
  * // Override for one series:
1376
1699
  * <LineSeries options={{ entryMs: 600 }} data={data} />
1377
1700
  *
1378
- * // Or set the default for every series at once:
1379
- * <ChartContainer animations={{ points: { enterMs: 600 } }}>
1701
+ * // Or set the default for every line series at once:
1702
+ * <ChartContainer animations={{ series: { line: { entry: 600 } } }}>
1380
1703
  * <LineSeries data={data} />
1381
1704
  * </ChartContainer>
1382
1705
  * ```
1383
1706
  *
1384
- * Note: chart-level uses `enterMs`, per-series uses `entryMs` — same
1385
- * animation, two names for historical reasons.
1386
- *
1387
1707
  * `false` or `0` disables the entrance (equivalent to
1388
- * `entryAnimation: 'none'`). A chart-level `animations.points: false` is a
1389
- * hard disable that wins over this field.
1708
+ * `entryAnimation: 'none'`). A chart-level `animations.series.line: false`
1709
+ * is a hard disable that wins over this field.
1390
1710
  *
1391
1711
  * @see LineSeriesOptions.entryAnimation
1392
1712
  */
1393
1713
  entryMs?: number | false;
1394
- /** @deprecated Use {@link entryMs} instead. */
1395
- enterMs?: number | false;
1396
1714
  /**
1397
1715
  * How long the displayed last value takes to catch up to the actual one
1398
1716
  * on every `updateLastPoint`. Default: `250` ms.
@@ -1402,13 +1720,13 @@ export declare interface LineSeriesOptions {
1402
1720
  * <LineSeries options={{ smoothMs: 100 }} data={data} />
1403
1721
  *
1404
1722
  * // Chart-level default:
1405
- * <ChartContainer animations={{ points: { smoothMs: 100 } }}>
1723
+ * <ChartContainer animations={{ series: { line: { smooth: 100 } } }}>
1406
1724
  * <LineSeries data={data} />
1407
1725
  * </ChartContainer>
1408
1726
  * ```
1409
1727
  *
1410
1728
  * `0` or `false` snaps the displayed value to the target on every tick
1411
- * (no smoothing). A chart-level `animations.points: false` is a hard
1729
+ * (no smoothing). A chart-level `animations.series.line: false` is a hard
1412
1730
  * disable that wins over this field.
1413
1731
  */
1414
1732
  smoothMs?: number | false;
@@ -1427,6 +1745,15 @@ declare type Listener = (...args: any[]) => void;
1427
1745
 
1428
1746
  export declare const materialPalenight: ThemePreset;
1429
1747
 
1748
+ /**
1749
+ * Time helpers for the animation config surface. The public config accepts
1750
+ * three shapes: a number (already milliseconds), a string with an explicit
1751
+ * unit (`"250ms"`, `"1s"`, `"2.5s"`), or `false` to disable. The resolver
1752
+ * parses each input once at chart construction; the hot render path then
1753
+ * only ever sees numbers.
1754
+ */
1755
+ declare type Milliseconds = number;
1756
+
1430
1757
  export declare const minimalLight: ThemePreset;
1431
1758
 
1432
1759
  export declare const mintBreeze: ThemePreset;
@@ -1587,6 +1914,32 @@ export declare const oneDarkPro: ThemePreset;
1587
1914
 
1588
1915
  export declare const panda: ThemePreset;
1589
1916
 
1917
+ /**
1918
+ * Narrow interface the interaction handlers expect from their host. Lets
1919
+ * `InteractionHandler` / `PanHandler` / `ZoomHandler` drive pan / zoom
1920
+ * without depending on the full ChartInstance surface.
1921
+ */
1922
+ declare interface PanZoomTarget {
1923
+ /**
1924
+ * Shift the visible time range by `timeDelta` ms. `chartWidth` is used
1925
+ * by pixel-padding resolution; passing the current canvas width yields
1926
+ * correct rubber-band clamps.
1927
+ */
1928
+ pan(timeDelta: number, chartWidth?: number): void;
1929
+ /**
1930
+ * Zoom around a time anchor. `factor < 1` zooms in, `> 1` zooms out.
1931
+ * `chartWidth` participates in soft-bound math the same way as in `pan`.
1932
+ */
1933
+ zoomAt(centerTime: number, factor: number, chartWidth?: number): void;
1934
+ }
1935
+
1936
+ /**
1937
+ * Parse an {@link AnimationTime} to milliseconds. Invalid strings throw at
1938
+ * config-resolution time, so a typo surfaces at startup, not silently as zero
1939
+ * animation later. Used once per field in `resolveAnimationsConfig`.
1940
+ */
1941
+ export declare function parseAnimationTime(value: AnimationTime): Milliseconds;
1942
+
1590
1943
  export declare const peachCream: ThemePreset;
1591
1944
 
1592
1945
  /**
@@ -1669,8 +2022,6 @@ declare interface PerfStats {
1669
2022
  mainRendersPerSec: number;
1670
2023
  /** Same as {@link mainRendersPerSec} but for the overlay (crosshair + pulse) layer. */
1671
2024
  overlayRendersPerSec: number;
1672
- /** @deprecated Alias for {@link mainRendersPerSec}. Kept for older consumers. */
1673
- fps: number;
1674
2025
  mainFrameMs: FrameTimingSample;
1675
2026
  overlayFrameMs: FrameTimingSample;
1676
2027
  /** Total frames recorded per layer. Lets consumers distinguish "no data yet" from "drew once and ms is 0". */
@@ -1732,13 +2083,6 @@ declare interface PieLabelsOptions {
1732
2083
  * expressed as a multiplier of {@link fontSize}. Default: 1.8.
1733
2084
  */
1734
2085
  labelGap?: number;
1735
- /**
1736
- * @deprecated No effect in the radial per-slice layout. A label's X is
1737
- * pinned to its slice midangle, so forcing the "other" side would flip
1738
- * text direction without moving the label and push text across the pie.
1739
- * Kept in the option surface for backwards compatibility.
1740
- */
1741
- balanceSides?: boolean;
1742
2086
  }
1743
2087
 
1744
2088
  export declare function PieLegend({ seriesId, mode: modeProp, format, position, children }: PieLegendProps): JSX_2.Element | null;
@@ -1924,6 +2268,30 @@ export declare function resolveAxisTextColor(theme: ChartTheme, axis?: 'x' | 'y'
1924
2268
  */
1925
2269
  export declare function resolveCandlestickBodyColor(body: string | [string, string]): string;
1926
2270
 
2271
+ /**
2272
+ * Per-call settle times supplied by the engine to {@link Transition.retarget}.
2273
+ * The engine owns all durations and pushes them per call; the curves carry
2274
+ * no baseline of their own.
2275
+ *
2276
+ * X transitions use only `expandMs` (single direction). Y transitions use
2277
+ * both `expandMs` (outward — new extreme enters window) and `contractMs`
2278
+ * (inward — extreme leaves; the sticky-Y mechanism).
2279
+ */
2280
+ declare interface RetargetOptions {
2281
+ /** Optional wall clock. Defaults to `performance.now()`. */
2282
+ now?: number;
2283
+ /**
2284
+ * Settle time (ms) for *outward* motion — bound reaching a new extreme.
2285
+ * Also used by X (single-direction) as the spring's settle time.
2286
+ */
2287
+ expandMs?: number;
2288
+ /**
2289
+ * Settle time (ms) for *inward* motion — bound contracting after an
2290
+ * extreme leaves the window. Y-only; X transitions ignore this field.
2291
+ */
2292
+ contractMs?: number;
2293
+ }
2294
+
1927
2295
  export declare const rosePineDawn: ThemePreset;
1928
2296
 
1929
2297
  export declare const sandDune: ThemePreset;
@@ -1965,16 +2333,47 @@ declare interface Size {
1965
2333
 
1966
2334
  export declare type SliceInfo = HoverInfo;
1967
2335
 
2336
+ /**
2337
+ * Snap factory — no animation, no parameters. Generic so it works for both
2338
+ * Y and X. Exposed so power users can opt out of axis motion without
2339
+ * disabling other animations:
2340
+ *
2341
+ * ```
2342
+ * animations: { axis: { y: { curve: snap() } } }
2343
+ * ```
2344
+ */
2345
+ export declare function snap<T extends YRange | VisibleRange = YRange>(): TransitionFactory<T>;
2346
+
1968
2347
  /** Sort order applied to a snapshot list by the helper. */
1969
2348
  export declare type SnapshotSort = 'none' | 'asc' | 'desc';
1970
2349
 
1971
2350
  export declare const solarizedLight: ThemePreset;
1972
2351
 
1973
- export declare function Sparkline({ data, theme, variant, valuePosition, formatValue, label, sublabel, color, negativeColor, area, areaFill, width, height, strokeWidth, gradient, style, }: SparklineProps): JSX_2.Element;
2352
+ export declare function Sparkline({ data, theme, variant, valuePosition, formatValue, label, sublabel, color, negativeColor, area, areaFill, yRange, flow, width, height, strokeWidth, gradient, style, }: SparklineProps): JSX_2.Element;
1974
2353
 
1975
2354
  export declare interface SparklineProps {
1976
2355
  /** Data points plotted by the sparkline. A flat `TimePoint[]` — the sparkline only ever shows one tiny line/bar. */
1977
2356
  data: TimePoint[];
2357
+ /**
2358
+ * Streaming-window mode: viewport is fixed at `capacity` bars wide. Pass
2359
+ * at least two seed points in `data` so the initial window can infer the
2360
+ * tick interval.
2361
+ *
2362
+ * `align` controls where the seed sits at mount:
2363
+ * - `'right'` *(default)* — seed flush with the right edge; each tick
2364
+ * shifts the viewport left by one interval and the new tick lands at
2365
+ * the right edge.
2366
+ * - `'left'` — seed flush with the left edge; the viewport is held in
2367
+ * place until empty bars on the right are consumed, then normal
2368
+ * tail-scroll resumes.
2369
+ * - `'offscreen'` — seed starts one interval past the right edge so the
2370
+ * first tick's tail-scroll animates it onto canvas (a brief "drive-in"
2371
+ * effect).
2372
+ */
2373
+ flow?: {
2374
+ capacity: number;
2375
+ align?: 'left' | 'right' | 'offscreen';
2376
+ };
1978
2377
  /** Visual theme. Drives series colour, background gradient, and the change-direction colours used in the value block. */
1979
2378
  theme: ChartTheme;
1980
2379
  /** 'line' (default) or 'bar' */
@@ -1998,6 +2397,18 @@ export declare interface SparklineProps {
1998
2397
  };
1999
2398
  /** @deprecated Use {@link area} instead. */
2000
2399
  areaFill?: boolean;
2400
+ /**
2401
+ * Fixed Y-axis bounds. Omit a side (or pass `'auto'`) to keep that edge
2402
+ * auto-scaled. Useful to pin a baseline (`{ min: 0 }`) or hold a stable
2403
+ * window so streaming ticks don't rescale the line.
2404
+ *
2405
+ * Each bound is an {@link AxisBound}: a number, `'auto'`, a percentage
2406
+ * offset string (`'+10%'`), or a `(values) => number` reducer.
2407
+ */
2408
+ yRange?: {
2409
+ min?: AxisBound;
2410
+ max?: AxisBound;
2411
+ };
2001
2412
  /** Chart width (default: 140) */
2002
2413
  width?: number;
2003
2414
  /** Overall height (default: 48) */
@@ -2014,6 +2425,36 @@ export declare type SparklineValuePosition = 'left' | 'right' | 'none';
2014
2425
 
2015
2426
  export declare type SparklineVariant = 'line' | 'bar';
2016
2427
 
2428
+ /**
2429
+ * Critically-damped spring transition factory. Generic over the value type
2430
+ * so the same factory works for both Y (`YRange`) and X (`VisibleRange`).
2431
+ *
2432
+ * The factory dispatches at construction time based on the shape of the
2433
+ * initial value:
2434
+ *
2435
+ * - `{ min, max }` → {@link YRangeSpring} (direction-aware ω: expand vs
2436
+ * contract, used by the sticky-Y mechanism).
2437
+ * - `{ from, to }` → {@link VisibleRangeSpring} (single ω, no direction
2438
+ * asymmetry — X has no analog of sticky-Y).
2439
+ *
2440
+ * Both implementations carry velocity through mid-flight retargets so
2441
+ * wheel-zoom sequences and rapid streaming ticks stay continuous.
2442
+ *
2443
+ * Usage:
2444
+ * ```ts
2445
+ * animations: {
2446
+ * axis: {
2447
+ * y: { curve: spring() },
2448
+ * x: { curve: spring() },
2449
+ * },
2450
+ * }
2451
+ * ```
2452
+ *
2453
+ * The engine is the single source of truth for the per-call durations —
2454
+ * settle times come through `RetargetOptions.expandMs` / `contractMs`.
2455
+ */
2456
+ export declare function spring<T extends YRange | VisibleRange = YRange>(): TransitionFactory<T>;
2457
+
2017
2458
  /** Stacking mode for bar/line series: off (overlap), normal (stacked), percent (100% stacked). */
2018
2459
  export declare type StackingMode = 'off' | 'normal' | 'percent';
2019
2460
 
@@ -2069,6 +2510,36 @@ export declare interface ThemePreset {
2069
2510
 
2070
2511
  export declare const ThemeProvider: Provider<ChartTheme | null>;
2071
2512
 
2513
+ /**
2514
+ * Per-axis tick-set holder with self-managed fade.
2515
+ *
2516
+ * Each tick value gets its own {@link Animator}: entering ticks ramp `0 → 1`,
2517
+ * exiting ticks ramp `1 → 0` and are removed once they settle at zero.
2518
+ * Callers drive the clock with {@link tick} once per frame, then read the
2519
+ * current opacity table via {@link snapshot}.
2520
+ *
2521
+ * Pre-arming (initial mount, dataset swap) the tracker uses duration `0` so
2522
+ * the very first nice-tick sets snap into place without an opening fade —
2523
+ * transient tick churn during layout settling should not look animated.
2524
+ */
2525
+ declare interface TickEntry {
2526
+ /** Tick value (time or price). */
2527
+ readonly value: number;
2528
+ /** Current opacity in [0, 1]. */
2529
+ readonly opacity: number;
2530
+ }
2531
+
2532
+ declare interface TickTrackerSnapshot {
2533
+ /**
2534
+ * Every tick the tracker still considers alive — current ones at their
2535
+ * resolved opacity (1.0 once any pending fade-in settles) and fading-out
2536
+ * ones above 0.
2537
+ */
2538
+ readonly entries: readonly TickEntry[];
2539
+ /** True while at least one entry hasn't reached its target opacity. */
2540
+ readonly isAnimating: boolean;
2541
+ }
2542
+
2072
2543
  declare function TimeAxis({ labelCount, minLabelSpacing }?: TimeAxisProps): JSX_2.Element;
2073
2544
  export { TimeAxis }
2074
2545
  export { TimeAxis as XAxis }
@@ -2091,57 +2562,6 @@ export declare type TimePointInput = Omit<TimePoint, 'time'> & {
2091
2562
  time: TimeValue;
2092
2563
  };
2093
2564
 
2094
- declare class TimeScale {
2095
- private from;
2096
- private to;
2097
- private width;
2098
- private pixelRatio;
2099
- private dataInterval;
2100
- private labelCountHintValue;
2101
- private minSpacingValue;
2102
- private resolvedInterval;
2103
- private lastInterval;
2104
- /**
2105
- * "want" (desired interval post-floor) at the time lastInterval was snapped.
2106
- * Hysteresis band anchors to this so micro range drift back across a tier
2107
- * boundary doesn't flip the label density — mirrors YScale, see there for
2108
- * the full reasoning.
2109
- */
2110
- private lastWant;
2111
- /** Identifies the dataInterval bucket whose tier list drove lastInterval. */
2112
- private lastBucketKey;
2113
- private get labelCountHint();
2114
- private get minLabelSpacing();
2115
- update(range: VisibleRange, mediaWidth: number, pixelRatio: number, dataInterval?: number): void;
2116
- setLabelCount(n: number | null | undefined): void;
2117
- setMinSpacing(px: number | null | undefined): void;
2118
- private resetHysteresis;
2119
- timeToX(time: number): number;
2120
- timeToBitmapX(time: number): number;
2121
- xToTime(x: number): number;
2122
- pixelDeltaToTimeDelta(pixelDelta: number): number;
2123
- barWidthMedia(dataInterval: number): number;
2124
- barWidthBitmap(dataInterval: number): number;
2125
- /**
2126
- * Evenly spaced "nice" tick times. Resolution uses the cached
2127
- * `dataInterval` set by `update()`; callers that bypass `update()` can
2128
- * still pass it here for back-compat.
2129
- */
2130
- niceTickValues(dataInterval: number): {
2131
- ticks: number[];
2132
- tickInterval: number;
2133
- };
2134
- getRange(): VisibleRange;
2135
- getMediaWidth(): number;
2136
- /**
2137
- * Resolve the next tick interval. Walks `niceTimeIntervals(dataInterval)`
2138
- * looking for the smallest tier ≥ desired spacing; retains the previous
2139
- * tier inside a ratio band so micro pan/zoom doesn't flip label density.
2140
- */
2141
- private resolveInterval;
2142
- private countTicks;
2143
- }
2144
-
2145
2565
  /**
2146
2566
  * Accepted time input: a timestamp in **milliseconds** (like `Date.now()`) or a `Date` object.
2147
2567
  * `Date` values are converted to milliseconds internally via `Date.getTime()`.
@@ -2165,7 +2585,7 @@ export declare type TimeValue = number | Date;
2165
2585
  * </ChartContainer>
2166
2586
  * ```
2167
2587
  */
2168
- export declare function Title({ children, sub, style }: TitleProps): JSX_2.Element;
2588
+ export declare const Title: NamedExoticComponent<TitleProps>;
2169
2589
 
2170
2590
  /** Props for the {@link Title} component. */
2171
2591
  export declare interface TitleProps {
@@ -2264,6 +2684,57 @@ export declare interface TooltipRenderContext {
2264
2684
  /** Sort order for multi-series tooltip values. */
2265
2685
  export declare type TooltipSort = 'none' | 'asc' | 'desc';
2266
2686
 
2687
+ /**
2688
+ * Smoothing-curve contract. Implementations (`YRangeHermite`, `YRangeSpring`,
2689
+ * `RangeSnap` for Y; `VisibleRangeSpring`, `RangeSnap` for X) drive a value
2690
+ * of type `T` from one snapshot to the next while maintaining `current` /
2691
+ * `target` / velocity continuity.
2692
+ *
2693
+ * Parametric over `T` so X and Y share the same interface — Y uses
2694
+ * `Transition<YRange>` (default), X uses `Transition<VisibleRange>`.
2695
+ *
2696
+ * This is the single public customization point for the chart's curves.
2697
+ * Other animation math (entry tweens, pulse, axis tick fade) stays
2698
+ * engine-fixed.
2699
+ */
2700
+ export declare interface Transition<T> {
2701
+ /** Current sampled position. Read by renderers on every frame. */
2702
+ readonly current: T;
2703
+ /** Active retarget destination. May equal `current` after settle. */
2704
+ readonly target: T;
2705
+ /** True while position has not yet converged to `target`. */
2706
+ readonly animating: boolean;
2707
+ /**
2708
+ * Begin a new transition toward `value`. Existing velocity is carried
2709
+ * over (no reset twitch). The engine supplies the active settle times
2710
+ * via `opts.expandMs` (and `opts.contractMs` for Y).
2711
+ */
2712
+ retarget(value: T, opts?: RetargetOptions): void;
2713
+ /** Land at `value` instantly. Velocity resets to zero. */
2714
+ snap(value: T, opts?: {
2715
+ now?: number;
2716
+ }): void;
2717
+ /** Advance to `now`. Returns `true` while still perceptibly moving. */
2718
+ tick(now: number): boolean;
2719
+ }
2720
+
2721
+ /**
2722
+ * Context handed to a {@link TransitionFactory} at chart construction.
2723
+ * Holds the initial value so the produced transition starts pinned to
2724
+ * the same value the chart will render on its first frame.
2725
+ */
2726
+ export declare interface TransitionContext<T> {
2727
+ initial: T;
2728
+ }
2729
+
2730
+ /**
2731
+ * Factory function returning a fresh {@link Transition}. Pass one as
2732
+ * `animations.axis.y.curve` (or `animations.axis.x.curve`) to plug a custom
2733
+ * smoothing strategy. Built-in factories: {@link hermite} (Y default),
2734
+ * {@link spring} (X default, also valid for Y), {@link snap} (no animation).
2735
+ */
2736
+ export declare type TransitionFactory<T> = (ctx: TransitionContext<T>) => Transition<T>;
2737
+
2267
2738
  /** Font family and base font size used across the chart. */
2268
2739
  export declare interface Typography {
2269
2740
  /** CSS `font-family` stack applied to all text rendered by the chart. */
@@ -2312,11 +2783,26 @@ export declare function useYRange(chart: ChartInstance): YRange;
2312
2783
  /** Signature for a value-to-string formatter (YAxis, YLabel, Pie, Sparkline, NumberFlow). */
2313
2784
  export declare type ValueFormatter = (value: number) => string;
2314
2785
 
2315
- /** Time range (timestamps in milliseconds) of the currently visible portion of the chart. */
2316
- export declare interface VisibleRange {
2317
- from: number;
2318
- to: number;
2319
- }
2786
+ /** @deprecated Use {@link XRange} instead. Visible time range of the chart. */
2787
+ export declare type VisibleRange = XRange;
2788
+
2789
+ /**
2790
+ * Argument accepted by {@link Chart.setVisibleRange}. Three forms:
2791
+ *
2792
+ * - `number N` — show the last N bars from the data tail (anchor right).
2793
+ * - `{ from, to }` — explicit time range; `from`/`to` accept either epoch
2794
+ * milliseconds or `Date`, normalised to ms internally.
2795
+ * - `{ from, bars }` — anchor the visible window at `from` and extend
2796
+ * right by `bars` data intervals. Useful for "show N bars starting
2797
+ * here" patterns (warm-up windows for streaming charts, etc.).
2798
+ */
2799
+ declare type VisibleRangeSpec = number | {
2800
+ from: TimeValue;
2801
+ to: TimeValue;
2802
+ } | {
2803
+ from: TimeValue;
2804
+ bars: number;
2805
+ };
2320
2806
 
2321
2807
  /** Configuration for the X (time) axis. */
2322
2808
  export declare interface XAxisConfig {
@@ -2326,6 +2812,69 @@ export declare interface XAxisConfig {
2326
2812
  visible?: boolean;
2327
2813
  }
2328
2814
 
2815
+ /** Time range (timestamps in milliseconds) of the currently visible portion of the chart. */
2816
+ declare interface XRange {
2817
+ from: number;
2818
+ to: number;
2819
+ }
2820
+
2821
+ declare class XScale {
2822
+ /**
2823
+ * Shared fade state for time ticks. Grid lines (canvas) and DOM tick labels
2824
+ * read opacity from the same tracker, so a tick fading in/out looks
2825
+ * identical on both surfaces.
2826
+ */
2827
+ readonly tickTracker: AxisTickTracker;
2828
+ private from;
2829
+ private to;
2830
+ private width;
2831
+ private pixelRatio;
2832
+ private dataInterval;
2833
+ private labelCountHintValue;
2834
+ private minSpacingValue;
2835
+ private resolvedInterval;
2836
+ private lastInterval;
2837
+ /**
2838
+ * "want" (desired interval post-floor) at the time lastInterval was snapped.
2839
+ * Hysteresis band anchors to this so micro range drift back across a tier
2840
+ * boundary doesn't flip the label density — mirrors YScale, see there for
2841
+ * the full reasoning.
2842
+ */
2843
+ private lastWant;
2844
+ /** Identifies the dataInterval bucket whose tier list drove lastInterval. */
2845
+ private lastBucketKey;
2846
+ private get labelCountHint();
2847
+ private get minLabelSpacing();
2848
+ update(range: XRange, mediaWidth: number, pixelRatio: number, dataInterval?: number): void;
2849
+ setLabelCount(n: number | null | undefined): void;
2850
+ setMinSpacing(px: number | null | undefined): void;
2851
+ private resetHysteresis;
2852
+ timeToX(time: number): number;
2853
+ timeToBitmapX(time: number): number;
2854
+ xToTime(x: number): number;
2855
+ pixelDeltaToTimeDelta(pixelDelta: number): number;
2856
+ barWidthMedia(dataInterval: number): number;
2857
+ barWidthBitmap(dataInterval: number): number;
2858
+ /**
2859
+ * Evenly spaced "nice" tick times. Resolution uses the cached
2860
+ * `dataInterval` set by `update()`; callers that bypass `update()` can
2861
+ * still pass it here for back-compat.
2862
+ */
2863
+ niceTickValues(dataInterval: number): {
2864
+ ticks: number[];
2865
+ tickInterval: number;
2866
+ };
2867
+ getRange(): XRange;
2868
+ getMediaWidth(): number;
2869
+ /**
2870
+ * Resolve the next tick interval. Walks `niceTimeIntervals(dataInterval)`
2871
+ * looking for the smallest tier ≥ desired spacing; retains the previous
2872
+ * tier inside a ratio band so micro pan/zoom doesn't flip label density.
2873
+ */
2874
+ private resolveInterval;
2875
+ private countTicks;
2876
+ }
2877
+
2329
2878
  export declare function YAxis({ format, labelCount, minLabelSpacing }?: YAxisProps): JSX_2.Element;
2330
2879
 
2331
2880
  /** Configuration for the Y axis. */
@@ -2395,7 +2944,10 @@ declare interface YLabelRenderContext {
2395
2944
  readonly format: ValueFormatter;
2396
2945
  }
2397
2946
 
2398
- /** Min/max value range for the Y axis. */
2947
+ /** Value range covered by the chart's Y axis at a given frame. Animated as a
2948
+ * single struct so the upper and lower bounds always move in lockstep — no
2949
+ * half-tween states where the visible domain is wider on one side than the
2950
+ * other for a frame. */
2399
2951
  export declare interface YRange {
2400
2952
  min: number;
2401
2953
  max: number;
@@ -2406,6 +2958,8 @@ export declare interface YRange {
2406
2958
  * Also provides tick generation and value formatting for the Y axis.
2407
2959
  */
2408
2960
  declare class YScale {
2961
+ /** Shared fade state for Y ticks; see {@link TimeScale.tickTracker}. */
2962
+ readonly tickTracker: AxisTickTracker;
2409
2963
  private min;
2410
2964
  private max;
2411
2965
  private height;