wick-charts 0.6.0 → 0.7.1

package/README.md

@@ -21,6 +21,7 @@ npm install wick-charts
   - [Styling](#styling)
   - [Inverting the value axis](#inverting-the-value-axis)
   - [Reading chart state](#reading-chart-state)
+  - [Setting the visible range](#setting-the-visible-range)
   - [Loading more history on demand](#loading-more-history-on-demand)
   - [Extending: plugins](#extending-plugins)
   - [Multi-pane indicators](#multi-pane-indicators)
@@ -269,10 +270,47 @@ without reaching into the chart's internals:
 ```ts
 chart.getPointCount();        // total candles loaded (not just visible)
 chart.getVisibleRange();      // { startIndex, endIndex, visibleCount }
+chart.getVisibleTimeRange();  // { from, to } in unix seconds, or null with no data
 chart.getValueRangeOverride(); // { min, max } once the user has dragged the price axis, else null
 chart.getHoveredPoint();      // the candle under the cursor/finger, or null
 ```
 
+### Setting the visible range
+
+The write side of `getVisibleRange`/`getVisibleTimeRange` — jump the pan/zoom window
+programmatically instead of only ever through a drag/scroll gesture:
+
+```ts
+chart.setVisibleRange({ startIndex: 50, endIndex: 100 }); // index-based, like getVisibleRange()
+chart.setVisibleTimeRange({ from: '2024-02-01T00:00:00Z', to: '2024-03-01T00:00:00Z' });
+```
+
+`setVisibleTimeRange` is the one to reach for when syncing one chart's pan/zoom onto another
+**independent** `WickChart` instance that shares a time axis — a common pattern for a price
+chart and an indicator chart panned together, or any "these views move as one" UI. Indices
+aren't safe for this: two charts may have loaded different amounts of history via
+`setDataLoader`, so the same index means a different candle in each, while the same time
+always means the same point (or the nearest one either chart actually has loaded). A time
+value in `from`/`to` accepts every shape `Candle.time` does (unix seconds/ms, ISO string,
+`{ businessDay }}`); `getVisibleTimeRange()` always returns plain unix seconds.
+
+```ts
+// Keep `follower` in lockstep with `driver` — see demo/sync.html for a
+// complete two-chart example, including what to do about there being no
+// pan/zoom change event yet (see "Status" below).
+function syncLoop() {
+  const range = driver.getVisibleTimeRange();
+  if (range) follower.setVisibleTimeRange(range);
+  requestAnimationFrame(syncLoop);
+}
+```
+
+Both setters clamp an out-of-range request instead of throwing (the same way a drag/zoom
+gesture can never overscroll past the loaded data) and clear the current hover, since a jump
+is a discontinuous change — a hover position computed for the window before it no longer
+lines up with anything until the pointer moves again. Neither touches the value axis (manual
+price-range override, invert) — only the time window moves.
+
 ### Loading more history on demand
 
 `setDataLoader` lets you start with a small window and stream in more as the user pans toward
@@ -680,7 +718,11 @@ horizontal strip with an independent value axis — see "Multi-pane indicators"
 still shares the candlestick pane rather than getting its own, since it draws through the
 series itself, not a pane-targeted plugin. `invertValueAxis`/`setInvertValueAxis` mirror the
 whole stack's value axis top-to-bottom without touching the underlying data — see "Inverting
-the value axis" above. See [CHANGELOG.md](./CHANGELOG.md) for what shipped in each release.
+the value axis" above. `setVisibleRange`/`setVisibleTimeRange` let the pan/zoom window be set
+programmatically (see "Setting the visible range" above) — there's no pan/zoom *change* event
+yet, so keeping one chart synced to another (`demo/sync.html`) means polling
+`getVisibleTimeRange()` (e.g. once per animation frame) rather than reacting to a callback.
+See [CHANGELOG.md](./CHANGELOG.md) for what shipped in each release.
 
 ## License
 

package/dist/axisRenderer.d.ts

@@ -0,0 +1,39 @@
+import type { Scale } from './hybridScale.js';
+import type { ChartAxisOptions, ChartFontOptions } from './types.js';
+/**
+ * Draws the price/time axis chrome — boundary lines, grid lines, tick
+ * labels, and the separator between stacked panes. Split out of
+ * `ChartRenderer` because none of it needs anything beyond already-resolved
+ * style options and per-call geometry (a `Scale`, a pixel rect): no
+ * series-specific, plugin-specific, or pane-identity state crosses into
+ * this class — `ChartRenderer.render()` still owns deciding *what* to draw
+ * where (the main pane vs. each indicator pane, in what order), this only
+ * owns *how* one axis actually gets drawn once told where.
+ */
+export declare class AxisRenderer {
+    private ctx;
+    private axis;
+    private font;
+    constructor(ctx: CanvasRenderingContext2D, axis: Required<ChartAxisOptions>, font: Required<ChartFontOptions>);
+    private axisFont;
+    /** The decimal precision `formatPrice` should use for a given value
+     * range — shared by this class's own tick labels and
+     * `CrosshairRenderer`'s price label so both display the same value with
+     * the same rounding. */
+    priceStep(min: number, max: number): number;
+    /**
+     * Draws one pane's right-side value axis: boundary line, horizontal grid
+     * lines, and tick labels. Used for both the main price pane and every
+     * indicator pane — `topOffset` shifts everything down by that pane's own
+     * position in the stack (0 for the main pane, which sits at the top), so
+     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
+     * range and never about where that pane lives in the full canvas.
+     */
+    renderPriceAxis(priceMin: number, priceMax: number, step: number, yScale: Scale, chartWidth: number, chartHeight: number, topOffset: number): void;
+    /** The horizontal rule separating an indicator pane from whatever sits
+     * above it (the main pane, or the previous indicator pane) — the same
+     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
+     * the plotting area and the time-axis strip. */
+    renderPaneSeparator(top: number, chartWidth: number): void;
+    renderTimeAxis(times: number[], startIdx: number, visibleCount: number, chartHeight: number, chartWidth: number, xForIndex: (globalIndex: number) => number): void;
+}

package/dist/axisRenderer.js

@@ -0,0 +1,94 @@
+import { formatAxisLabel, pickTickIndices } from './axis.js';
+import { formatPrice, niceTicks } from './priceAxis.js';
+/**
+ * Draws the price/time axis chrome — boundary lines, grid lines, tick
+ * labels, and the separator between stacked panes. Split out of
+ * `ChartRenderer` because none of it needs anything beyond already-resolved
+ * style options and per-call geometry (a `Scale`, a pixel rect): no
+ * series-specific, plugin-specific, or pane-identity state crosses into
+ * this class — `ChartRenderer.render()` still owns deciding *what* to draw
+ * where (the main pane vs. each indicator pane, in what order), this only
+ * owns *how* one axis actually gets drawn once told where.
+ */
+export class AxisRenderer {
+    constructor(ctx, axis, font) {
+        this.ctx = ctx;
+        this.axis = axis;
+        this.font = font;
+    }
+    axisFont() {
+        return `${this.font.axisSize}px ${this.font.family}`;
+    }
+    /** The decimal precision `formatPrice` should use for a given value
+     * range — shared by this class's own tick labels and
+     * `CrosshairRenderer`'s price label so both display the same value with
+     * the same rounding. */
+    priceStep(min, max) {
+        const ticks = niceTicks(min, max, this.axis.priceTickCount);
+        return ticks.length > 1 ? ticks[1] - ticks[0] : 0;
+    }
+    /**
+     * Draws one pane's right-side value axis: boundary line, horizontal grid
+     * lines, and tick labels. Used for both the main price pane and every
+     * indicator pane — `topOffset` shifts everything down by that pane's own
+     * position in the stack (0 for the main pane, which sits at the top), so
+     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
+     * range and never about where that pane lives in the full canvas.
+     */
+    renderPriceAxis(priceMin, priceMax, step, yScale, chartWidth, chartHeight, topOffset) {
+        const { ctx, axis } = this;
+        const ticks = niceTicks(priceMin, priceMax, axis.priceTickCount);
+        ctx.strokeStyle = axis.lineColor;
+        ctx.beginPath();
+        ctx.moveTo(chartWidth + 0.5, topOffset);
+        ctx.lineTo(chartWidth + 0.5, topOffset + chartHeight);
+        ctx.stroke();
+        ctx.font = this.axisFont();
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        for (const value of ticks) {
+            const localY = yScale.map(value);
+            if (localY < 0 || localY > chartHeight)
+                continue;
+            const y = topOffset + localY;
+            ctx.strokeStyle = axis.gridLineColor;
+            ctx.beginPath();
+            ctx.moveTo(0, y + 0.5);
+            ctx.lineTo(chartWidth, y + 0.5);
+            ctx.stroke();
+            ctx.fillStyle = axis.textColor;
+            ctx.fillText(formatPrice(value, step), chartWidth + 6, y);
+        }
+    }
+    /** The horizontal rule separating an indicator pane from whatever sits
+     * above it (the main pane, or the previous indicator pane) — the same
+     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
+     * the plotting area and the time-axis strip. */
+    renderPaneSeparator(top, chartWidth) {
+        const { ctx, axis } = this;
+        ctx.strokeStyle = axis.lineColor;
+        ctx.beginPath();
+        ctx.moveTo(0, top + 0.5);
+        ctx.lineTo(chartWidth, top + 0.5);
+        ctx.stroke();
+    }
+    renderTimeAxis(times, startIdx, visibleCount, chartHeight, chartWidth, xForIndex) {
+        const { ctx, axis } = this;
+        const visibleTimes = times.slice(startIdx, startIdx + visibleCount);
+        const spanSeconds = visibleTimes[visibleTimes.length - 1] - visibleTimes[0];
+        ctx.strokeStyle = axis.lineColor;
+        ctx.beginPath();
+        ctx.moveTo(0, chartHeight + 0.5);
+        ctx.lineTo(chartWidth, chartHeight + 0.5);
+        ctx.stroke();
+        ctx.fillStyle = axis.textColor;
+        ctx.font = this.axisFont();
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        for (const localIndex of pickTickIndices(visibleCount, axis.timeMaxTicks)) {
+            const x = xForIndex(startIdx + localIndex);
+            const label = formatAxisLabel(visibleTimes[localIndex], spanSeconds);
+            ctx.fillText(label, x, chartHeight + 6);
+        }
+    }
+}

package/dist/binarySearch.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Binary search over an ascending-sorted number array — extracted out of
+ * `WickChart` since it's pure array math with no dependency on chart state,
+ * used by `setVisibleTimeRange` to resolve a time to its index.
+ */
+/** First index in `values` (ascending) whose value is `>= target`, or
+ * `values.length` if every value is smaller — the standard binary
+ * lower-bound, O(log n) rather than a linear scan over what can be a
+ * multi-thousand-point loaded series. */
+export declare function lowerBound(values: number[], target: number): number;
+/** First index in `values` (ascending) whose value is `> target`, or
+ * `values.length` if none is — the exclusive end boundary for an inclusive
+ * upper bound, so a range `[lowerBound(from), upperBound(to))` includes
+ * every value in `[from, to]` inclusive on both ends. */
+export declare function upperBound(values: number[], target: number): number;

package/dist/binarySearch.js

@@ -0,0 +1,37 @@
+/**
+ * Binary search over an ascending-sorted number array — extracted out of
+ * `WickChart` since it's pure array math with no dependency on chart state,
+ * used by `setVisibleTimeRange` to resolve a time to its index.
+ */
+/** First index in `values` (ascending) whose value is `>= target`, or
+ * `values.length` if every value is smaller — the standard binary
+ * lower-bound, O(log n) rather than a linear scan over what can be a
+ * multi-thousand-point loaded series. */
+export function lowerBound(values, target) {
+    let lo = 0;
+    let hi = values.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (values[mid] < target)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    return lo;
+}
+/** First index in `values` (ascending) whose value is `> target`, or
+ * `values.length` if none is — the exclusive end boundary for an inclusive
+ * upper bound, so a range `[lowerBound(from), upperBound(to))` includes
+ * every value in `[from, to]` inclusive on both ends. */
+export function upperBound(values, target) {
+    let lo = 0;
+    let hi = values.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (values[mid] <= target)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    return lo;
+}

package/dist/crosshairRenderer.d.ts

@@ -0,0 +1,60 @@
+import type { ChartCrosshairOptions, ChartFontOptions, ChartLegendOptions } from './types.js';
+/** Everything one frame's hover crosshair/legend needs — computed by
+ * `ChartRenderer.render()` (which owns the hovered point, the active
+ * series, and its style) and handed in as plain data so this class stays
+ * generic-free and series-agnostic. `legendParts` is already the result of
+ * `seriesDefinition.formatLegend?.(point, style)` — this class only lays
+ * out and draws whatever strings it's given. */
+export interface CrosshairRenderInput {
+    x: number;
+    timeSeconds: number;
+    hoverY: number | null;
+    valueMin: number;
+    valueMax: number;
+    priceStep: number;
+    chartWidth: number;
+    chartHeight: number;
+    /** Full pane-stack height — the dashed vertical line spans this, not
+     * just `chartHeight` (the main pane's own), so a hovered candle lines up
+     * across every indicator pane below it. */
+    stackHeight: number;
+    invertValueAxis: boolean;
+    legendParts: string[];
+    /** The canvas's own backing-store width — needed only to clamp the
+     * time-axis label chip so it never runs off the right edge. */
+    canvasWidth: number;
+}
+/**
+ * Draws the hover crosshair (dashed lines), its price/time label chips,
+ * and the OHLC-style legend tooltip. Split out of `ChartRenderer` for the
+ * same reason `AxisRenderer` was: everything it needs arrives as
+ * already-resolved style options plus one frame's worth of plain data
+ * (`CrosshairRenderInput`) — no series generic, no plugin state.
+ */
+export declare class CrosshairRenderer {
+    private ctx;
+    private crosshair;
+    private legend;
+    private font;
+    private priceAxisWidth;
+    constructor(ctx: CanvasRenderingContext2D, crosshair: Required<ChartCrosshairOptions>, legend: Required<ChartLegendOptions>, font: Required<ChartFontOptions>, priceAxisWidth: number);
+    private axisFont;
+    private legendFont;
+    render(input: CrosshairRenderInput): void;
+    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
+     * speech bubble, one line per part, rather than a fixed banner glued to
+     * a corner of the canvas. Offset up-and-right of the cursor/finger by
+     * `legend.cursorGap` and clamped to both chart edges so it never runs
+     * off-screen, including when there's no `hoverY` to anchor to (a series
+     * with no primary value still gets a legend, just pinned near the top
+     * at the hovered column). */
+    private renderHoverTooltip;
+    /** The highlighted price-axis label that follows the crosshair's
+     * horizontal line — drawn over `AxisRenderer`'s own tick labels so the
+     * hovered value reads clearly even where it lands between two ticks. */
+    private renderPriceLabelChip;
+    /** The highlighted time-axis label under the crosshair's vertical line.
+     * Clamped so its background chip stays fully on-screen even when the
+     * hovered point sits at the very first or last visible index. */
+    private renderTimeLabelChip;
+}

package/dist/crosshairRenderer.js

@@ -0,0 +1,121 @@
+import { formatHoverTime } from './axis.js';
+import { formatPrice } from './priceAxis.js';
+import { pixelToValue } from './valueAxis.js';
+/**
+ * Draws the hover crosshair (dashed lines), its price/time label chips,
+ * and the OHLC-style legend tooltip. Split out of `ChartRenderer` for the
+ * same reason `AxisRenderer` was: everything it needs arrives as
+ * already-resolved style options plus one frame's worth of plain data
+ * (`CrosshairRenderInput`) — no series generic, no plugin state.
+ */
+export class CrosshairRenderer {
+    constructor(ctx, crosshair, legend, font, priceAxisWidth) {
+        this.ctx = ctx;
+        this.crosshair = crosshair;
+        this.legend = legend;
+        this.font = font;
+        this.priceAxisWidth = priceAxisWidth;
+    }
+    axisFont() {
+        return `${this.font.axisSize}px ${this.font.family}`;
+    }
+    legendFont() {
+        return `${this.font.legendSize}px ${this.font.family}`;
+    }
+    render(input) {
+        const { x, timeSeconds, hoverY, valueMin, valueMax, priceStep, chartWidth, chartHeight, stackHeight, invertValueAxis, legendParts, canvasWidth, } = input;
+        const { ctx, crosshair } = this;
+        ctx.save();
+        ctx.strokeStyle = crosshair.lineColor;
+        ctx.setLineDash([4, 4]);
+        // Spans the whole pane stack (not just the main pane's own
+        // chartHeight) so hovering a candle lines up with the same column
+        // across every indicator pane below it — see `stackHeight`'s own doc
+        // comment for why the horizontal line/legend don't follow suit.
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, stackHeight);
+        ctx.stroke();
+        // The horizontal line follows the actual cursor/finger position, not
+        // any property of the hovered point — pinning it to (say) the candle's
+        // close would leave it motionless while the pointer moves anywhere
+        // within that same candle's column, which reads as broken/stuck rather
+        // than as a crosshair. Only drawn while the pointer is actually inside
+        // the chart's vertical extent, same as AxisRenderer's tick-skip logic.
+        const priceLineVisible = hoverY !== null && hoverY >= 0 && hoverY <= chartHeight;
+        if (priceLineVisible) {
+            ctx.beginPath();
+            ctx.moveTo(0, hoverY);
+            ctx.lineTo(chartWidth, hoverY);
+            ctx.stroke();
+        }
+        ctx.restore();
+        if (priceLineVisible) {
+            // Exact inverse of the value->y mapping createScale set up for this
+            // frame — same helper (and same invertValueAxis flag) as
+            // PluginRenderApi.valueForY, see src/valueAxis.ts.
+            const value = pixelToValue(hoverY, valueMin, valueMax, chartHeight, invertValueAxis);
+            this.renderPriceLabelChip(formatPrice(value, priceStep), hoverY, chartWidth);
+        }
+        this.renderTimeLabelChip(formatHoverTime(timeSeconds), x, chartHeight, canvasWidth);
+        if (legendParts.length === 0)
+            return;
+        this.renderHoverTooltip(legendParts, x, hoverY, chartWidth, chartHeight);
+    }
+    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
+     * speech bubble, one line per part, rather than a fixed banner glued to
+     * a corner of the canvas. Offset up-and-right of the cursor/finger by
+     * `legend.cursorGap` and clamped to both chart edges so it never runs
+     * off-screen, including when there's no `hoverY` to anchor to (a series
+     * with no primary value still gets a legend, just pinned near the top
+     * at the hovered column). */
+    renderHoverTooltip(lines, x, hoverY, chartWidth, chartHeight) {
+        const { ctx, font, legend } = this;
+        ctx.font = this.legendFont();
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        const lineHeight = font.legendSize + 4;
+        const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
+        const boxWidth = textWidth + legend.paddingX * 2;
+        const boxHeight = lines.length * lineHeight + legend.paddingY * 2;
+        const anchorY = hoverY ?? 0;
+        const left = Math.min(Math.max(x + legend.cursorGap, 0), Math.max(0, chartWidth - boxWidth));
+        const top = Math.min(Math.max(anchorY - boxHeight - legend.cursorGap, 0), Math.max(0, chartHeight - boxHeight));
+        ctx.fillStyle = legend.background;
+        ctx.fillRect(left, top, boxWidth, boxHeight);
+        ctx.fillStyle = legend.textColor;
+        lines.forEach((line, i) => {
+            ctx.fillText(line, left + legend.paddingX, top + legend.paddingY + i * lineHeight);
+        });
+    }
+    /** The highlighted price-axis label that follows the crosshair's
+     * horizontal line — drawn over `AxisRenderer`'s own tick labels so the
+     * hovered value reads clearly even where it lands between two ticks. */
+    renderPriceLabelChip(text, y, chartWidth) {
+        const { ctx, font, crosshair } = this;
+        ctx.font = this.axisFont();
+        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
+        ctx.fillStyle = crosshair.labelBackground;
+        ctx.fillRect(chartWidth, y - chipHeight / 2, this.priceAxisWidth, chipHeight);
+        ctx.fillStyle = crosshair.labelTextColor;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, chartWidth + crosshair.labelPaddingX, y);
+    }
+    /** The highlighted time-axis label under the crosshair's vertical line.
+     * Clamped so its background chip stays fully on-screen even when the
+     * hovered point sits at the very first or last visible index. */
+    renderTimeLabelChip(text, x, chartHeight, canvasWidth) {
+        const { ctx, font, crosshair } = this;
+        ctx.font = this.axisFont();
+        const chipWidth = ctx.measureText(text).width + crosshair.labelPaddingX * 2;
+        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
+        const chipLeft = Math.min(Math.max(x - chipWidth / 2, 0), canvasWidth - chipWidth);
+        ctx.fillStyle = crosshair.labelBackground;
+        ctx.fillRect(chipLeft, chartHeight, chipWidth, chipHeight);
+        ctx.fillStyle = crosshair.labelTextColor;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, chipLeft + crosshair.labelPaddingX, chartHeight + crosshair.labelPaddingY);
+    }
+}

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import type { DataLoader } from './dataSource.js';
 import type { ChartPlugin } from './plugins/types.js';
 import type { CandlestickStyle } from './series/candlestick.js';
 import type { LineStyle } from './series/line.js';
-import type { Candle, LinePoint, PaneOptions, WickChartOptions, SeriesPoint, ValueRange } from './types.js';
+import type { Candle, LinePoint, PaneOptions, WickChartOptions, SeriesPoint, ValueRange, WickTime } from './types.js';
 export type { BusinessDay, Candle, LinePoint, PaneOptions, WickChartOptions, WickTime, SeriesPoint, UnixMillis, ValueRange, } from './types.js';
 export type { DataLoader, DataRequest } from './dataSource.js';
 export type { ChartPlugin, ChartPointerEvent, PluginRenderApi } from './plugins/types.js';
@@ -155,6 +155,48 @@ export declare class WickChart<TPoint extends SeriesPoint = Candle> {
         endIndex: number;
         visibleCount: number;
     };
+    /**
+     * Jumps the visible pan/zoom window directly to `[startIndex, endIndex)`
+     * — the programmatic, index-based counterpart to `getVisibleRange()`'s
+     * own shape, for anything that already knows the target in index terms
+     * (a minimap click, a saved bookmark). Clamped the same way a drag/zoom
+     * gesture already is (see `Viewport.setVisibleIndexRange`) rather than
+     * throwing on an out-of-range request. Clears the current hover, the
+     * same way `setData()` does — a jump is a discontinuous change, and a
+     * hover position computed for the window before it is no longer
+     * meaningful until the pointer actually moves again.
+     *
+     * Indices aren't a safe way to sync two independent `WickChart`
+     * instances sharing a time axis — they may have loaded different
+     * amounts of history via `setDataLoader`, so the same index means a
+     * different point in each. Use `setVisibleTimeRange` for that instead.
+     */
+    setVisibleRange(range: {
+        startIndex: number;
+        endIndex: number;
+    }): this;
+    /**
+     * The time-based counterpart to `setVisibleRange` — jumps to whatever
+     * window of the currently loaded data falls within `[from, to]`
+     * (inclusive both ends), resolved against this chart's own loaded
+     * points. This is what makes syncing one chart's pan/zoom onto another
+     * independent `WickChart` instance sharing a time axis possible: read
+     * the source chart's `getVisibleTimeRange()` and pass it straight to
+     * this one, and the two stay in sync by time even if they've loaded
+     * different amounts of history. A no-op if no data has been loaded yet.
+     */
+    setVisibleTimeRange(range: {
+        from: WickTime;
+        to: WickTime;
+    }): this;
+    /** The currently visible window's time span, in unix seconds — `null`
+     * when there's no data to report one for. The time-based counterpart to
+     * `getVisibleRange()`, and the read side `setVisibleTimeRange` is meant
+     * to be paired with for syncing one chart's pan/zoom onto another. */
+    getVisibleTimeRange(): {
+        from: number;
+        to: number;
+    } | null;
     /** The value axis's manual range once the user has dragged or scaled it
      * — `null` if the axis is still auto-fitting to whatever's visible
      * (the default until the user first touches it vertically). */

package/dist/index.js

@@ -1,3 +1,4 @@
+import { lowerBound, upperBound } from './binarySearch.js';
 import { mergeSeriesPoints } from './mergeSeries.js';
 import { computePaneLayout } from './paneLayout.js';
 import { ChartRenderer } from './renderer.js';
@@ -452,6 +453,62 @@ export class WickChart {
             visibleCount: this.viewport.visibleCount,
         };
     }
+    /**
+     * Jumps the visible pan/zoom window directly to `[startIndex, endIndex)`
+     * — the programmatic, index-based counterpart to `getVisibleRange()`'s
+     * own shape, for anything that already knows the target in index terms
+     * (a minimap click, a saved bookmark). Clamped the same way a drag/zoom
+     * gesture already is (see `Viewport.setVisibleIndexRange`) rather than
+     * throwing on an out-of-range request. Clears the current hover, the
+     * same way `setData()` does — a jump is a discontinuous change, and a
+     * hover position computed for the window before it is no longer
+     * meaningful until the pointer actually moves again.
+     *
+     * Indices aren't a safe way to sync two independent `WickChart`
+     * instances sharing a time axis — they may have loaded different
+     * amounts of history via `setDataLoader`, so the same index means a
+     * different point in each. Use `setVisibleTimeRange` for that instead.
+     */
+    setVisibleRange(range) {
+        this.viewport.setVisibleIndexRange(range.startIndex, range.endIndex, this.sorted.length);
+        this.hoverIndex = null;
+        this.hoverY = null;
+        this.scheduleRender();
+        return this;
+    }
+    /**
+     * The time-based counterpart to `setVisibleRange` — jumps to whatever
+     * window of the currently loaded data falls within `[from, to]`
+     * (inclusive both ends), resolved against this chart's own loaded
+     * points. This is what makes syncing one chart's pan/zoom onto another
+     * independent `WickChart` instance sharing a time axis possible: read
+     * the source chart's `getVisibleTimeRange()` and pass it straight to
+     * this one, and the two stay in sync by time even if they've loaded
+     * different amounts of history. A no-op if no data has been loaded yet.
+     */
+    setVisibleTimeRange(range) {
+        if (this.times.length === 0)
+            return this;
+        const fromSeconds = toUnixSeconds(range.from);
+        const toSeconds = toUnixSeconds(range.to);
+        return this.setVisibleRange({
+            startIndex: lowerBound(this.times, fromSeconds),
+            endIndex: upperBound(this.times, toSeconds),
+        });
+    }
+    /** The currently visible window's time span, in unix seconds — `null`
+     * when there's no data to report one for. The time-based counterpart to
+     * `getVisibleRange()`, and the read side `setVisibleTimeRange` is meant
+     * to be paired with for syncing one chart's pan/zoom onto another. */
+    getVisibleTimeRange() {
+        if (this.sorted.length === 0)
+            return null;
+        const startIdx = Math.max(0, Math.floor(this.viewport.startIndex));
+        const endIdx = Math.min(this.sorted.length, Math.ceil(this.viewport.endIndex));
+        if (endIdx <= startIdx)
+            return null;
+        return { from: this.times[startIdx], to: this.times[endIdx - 1] };
+    }
     /** The value axis's manual range once the user has dragged or scaled it
      * — `null` if the axis is still auto-fitting to whatever's visible
      * (the default until the user first touches it vertically). */

package/dist/renderer.d.ts

@@ -12,8 +12,8 @@ export interface RenderInput<TPoint extends SeriesPoint> {
     hoverIndex: number | null;
     /** Device-pixel y of the pointer/finger that produced `hoverIndex`, or
      * null. Drives the crosshair's horizontal line directly — see
-     * `renderCrosshairAndLegend` for why that has to be the raw cursor
-     * position rather than any property of the hovered point itself. */
+     * `CrosshairRenderer` for why that has to be the raw cursor position
+     * rather than any property of the hovered point itself. */
     hoverY: number | null;
     plugins: ChartPlugin<TPoint>[];
     /** Indicator/oscillator panes declared via `WickChart.addPane`, resolved
@@ -23,15 +23,22 @@ export interface RenderInput<TPoint extends SeriesPoint> {
     panes: ResolvedPaneOptions[];
 }
 /**
- * The chart engine's renderer: canvas lifecycle, axes, crosshair, and
- * plugin drawing are all generic — none of it knows what kind of series is
- * on screen. The one series-specific seam is `seriesDefinition`, injected
- * at construction (see `src/series/types.ts`); everything above delegates
- * to it for value-range computation, point drawing, and legend text.
+ * The chart engine's renderer: owns the canvas lifecycle and orchestrates
+ * one frame — deciding what data is visible, computing scales, and calling
+ * out to collaborators for the actual pixel-pushing. None of it knows what
+ * kind of series is on screen: the one series-specific seam is
+ * `seriesDefinition`, injected at construction (see `src/series/types.ts`).
  * Stateless per call otherwise — all pan/zoom/hover state lives in
  * `Viewport` and `WickChart`; this class only turns a snapshot of that
  * state into pixels.
  *
+ * Axis chrome and the hover crosshair/legend are drawn by two collaborators
+ * (`AxisRenderer`, `CrosshairRenderer`) rather than methods on this class —
+ * both take only already-resolved style options and per-call geometry, no
+ * series generic or plugin state, so splitting them out keeps this file
+ * focused on orchestration (what gets drawn, in what order, with what
+ * scale) rather than mixing in how each individual chrome element paints.
+ *
  * Every visual constant below (fonts, axis sizing/coloring, crosshair
  * coloring/padding, legend color) is resolved once at construction from
  * `WickChartOptions.font`/`axis`/`crosshair`/`legend`, each merged field
@@ -44,10 +51,13 @@ export declare class ChartRenderer<TPoint extends SeriesPoint> {
     private ctx;
     private background;
     private style;
-    private font;
+    /** Kept as its own field (unlike font/crosshair/legend, which only
+     * `AxisRenderer`/`CrosshairRenderer` need after construction) because
+     * `chartWidth`/`chartHeight`/`priceAxisWidth` below read it directly on
+     * every call, not just once at construction. */
     private axis;
-    private crosshair;
-    private legend;
+    private axisRenderer;
+    private crosshairRenderer;
     /** Unlike the style groups above, mutable after construction — see
      * `setInvertValueAxis`. A live toggle, not a one-time style choice, is
      * the whole point of this option (a "what if this series moved the
@@ -62,8 +72,6 @@ export declare class ChartRenderer<TPoint extends SeriesPoint> {
     get chartWidth(): number;
     get chartHeight(): number;
     get priceAxisWidth(): number;
-    private axisFont;
-    private legendFont;
     render(input: RenderInput<TPoint>): void;
     /**
      * Builds the `PluginRenderApi` for one pane — the main price pane or a
@@ -73,40 +81,4 @@ export declare class ChartRenderer<TPoint extends SeriesPoint> {
      * frame-ended flag, for the whole stack; see `FrameGeometry`).
      */
     private buildPluginApi;
-    /** The decimal precision `formatPrice` should use for the current price
-     * range — shared by the axis ticks and the crosshair's price label so
-     * both display the same value with the same rounding. */
-    private currentPriceStep;
-    /**
-     * Draws one pane's right-side value axis: boundary line, horizontal grid
-     * lines, and tick labels. Used for both the main price pane and every
-     * indicator pane — `topOffset` shifts everything down by that pane's own
-     * position in the stack (0 for the main pane, which sits at the top), so
-     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
-     * range and never about where that pane lives in the full canvas.
-     */
-    private renderPriceAxis;
-    /** The horizontal rule separating an indicator pane from whatever sits
-     * above it (the main pane, or the previous indicator pane) — the same
-     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
-     * the plotting area and the time-axis strip. */
-    private renderPaneSeparator;
-    private renderTimeAxis;
-    private renderCrosshairAndLegend;
-    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
-     * speech bubble, one line per part, rather than a fixed banner glued to
-     * a corner of the canvas. Offset up-and-right of the cursor/finger by
-     * `legend.cursorGap` and clamped to both chart edges so it never runs
-     * off-screen, including when there's no `hoverY` to anchor to (a series
-     * with no primary value still gets a legend, just pinned near the top
-     * at the hovered column). */
-    private renderHoverTooltip;
-    /** The highlighted price-axis label that follows the crosshair's
-     * horizontal line — drawn over `renderPriceAxis`'s own tick labels so the
-     * hovered value reads clearly even where it lands between two ticks. */
-    private renderPriceLabelChip;
-    /** The highlighted time-axis label under the crosshair's vertical line.
-     * Clamped so its background chip stays fully on-screen even when the
-     * hovered point sits at the very first or last visible index. */
-    private renderTimeLabelChip;
 }

package/dist/renderer.js

@@ -1,7 +1,7 @@
-import { formatAxisLabel, formatHoverTime, pickTickIndices } from './axis.js';
+import { AxisRenderer } from './axisRenderer.js';
+import { CrosshairRenderer } from './crosshairRenderer.js';
 import { createScale } from './hybridScale.js';
 import { computePaneLayout } from './paneLayout.js';
-import { formatPrice, niceTicks } from './priceAxis.js';
 import { pixelToValue, valueAxisPixelRange } from './valueAxis.js';
 const DEFAULT_BACKGROUND = 'transparent';
 const DEFAULT_FONT = {
@@ -33,15 +33,22 @@ const DEFAULT_LEGEND = {
     cursorGap: 12,
 };
 /**
- * The chart engine's renderer: canvas lifecycle, axes, crosshair, and
- * plugin drawing are all generic — none of it knows what kind of series is
- * on screen. The one series-specific seam is `seriesDefinition`, injected
- * at construction (see `src/series/types.ts`); everything above delegates
- * to it for value-range computation, point drawing, and legend text.
+ * The chart engine's renderer: owns the canvas lifecycle and orchestrates
+ * one frame — deciding what data is visible, computing scales, and calling
+ * out to collaborators for the actual pixel-pushing. None of it knows what
+ * kind of series is on screen: the one series-specific seam is
+ * `seriesDefinition`, injected at construction (see `src/series/types.ts`).
  * Stateless per call otherwise — all pan/zoom/hover state lives in
  * `Viewport` and `WickChart`; this class only turns a snapshot of that
  * state into pixels.
  *
+ * Axis chrome and the hover crosshair/legend are drawn by two collaborators
+ * (`AxisRenderer`, `CrosshairRenderer`) rather than methods on this class —
+ * both take only already-resolved style options and per-call geometry, no
+ * series generic or plugin state, so splitting them out keeps this file
+ * focused on orchestration (what gets drawn, in what order, with what
+ * scale) rather than mixing in how each individual chrome element paints.
+ *
  * Every visual constant below (fonts, axis sizing/coloring, crosshair
  * coloring/padding, legend color) is resolved once at construction from
  * `WickChartOptions.font`/`axis`/`crosshair`/`legend`, each merged field
@@ -58,11 +65,13 @@ export class ChartRenderer {
         this.ctx = ctx;
         this.background = options.background ?? DEFAULT_BACKGROUND;
         this.style = { ...seriesDefinition.defaultStyle, ...(options.style ?? {}) };
-        this.font = { ...DEFAULT_FONT, ...options.font };
         this.axis = { ...DEFAULT_AXIS, ...options.axis };
-        this.crosshair = { ...DEFAULT_CROSSHAIR, ...options.crosshair };
-        this.legend = { ...DEFAULT_LEGEND, ...options.legend };
         this.invertValueAxis = options.invertValueAxis ?? false;
+        const font = { ...DEFAULT_FONT, ...options.font };
+        const crosshair = { ...DEFAULT_CROSSHAIR, ...options.crosshair };
+        const legend = { ...DEFAULT_LEGEND, ...options.legend };
+        this.axisRenderer = new AxisRenderer(ctx, this.axis, font);
+        this.crosshairRenderer = new CrosshairRenderer(ctx, crosshair, legend, font, this.axis.priceWidth);
     }
     setInvertValueAxis(inverted) {
         this.invertValueAxis = inverted;
@@ -79,12 +88,6 @@ export class ChartRenderer {
     get priceAxisWidth() {
         return this.axis.priceWidth;
     }
-    axisFont() {
-        return `${this.font.axisSize}px ${this.font.family}`;
-    }
-    legendFont() {
-        return `${this.font.legendSize}px ${this.font.family}`;
-    }
     render(input) {
         const { ctx, canvas, background, seriesDefinition, style } = this;
         const { sorted, times, viewport, hoverIndex, hoverY, plugins, panes } = input;
@@ -166,20 +169,34 @@ export class ChartRenderer {
             finally {
                 ctx.restore();
             }
-            const priceStep = this.currentPriceStep(valueMin, valueMax);
-            this.renderPriceAxis(valueMin, valueMax, priceStep, yScale, chartWidth, chartHeight, mainRect.top);
+            const priceStep = this.axisRenderer.priceStep(valueMin, valueMax);
+            this.axisRenderer.renderPriceAxis(valueMin, valueMax, priceStep, yScale, chartWidth, chartHeight, mainRect.top);
             for (const { rect, min, max, scale } of paneScales) {
-                this.renderPaneSeparator(rect.top, chartWidth);
-                const step = this.currentPriceStep(min, max);
-                this.renderPriceAxis(min, max, step, scale, chartWidth, rect.height, rect.top);
+                this.axisRenderer.renderPaneSeparator(rect.top, chartWidth);
+                const step = this.axisRenderer.priceStep(min, max);
+                this.axisRenderer.renderPriceAxis(min, max, step, scale, chartWidth, rect.height, rect.top);
             }
-            this.renderTimeAxis(times, startIdx, visible.length, stackHeight, chartWidth, xForIndex);
+            this.axisRenderer.renderTimeAxis(times, startIdx, visible.length, stackHeight, chartWidth, xForIndex);
             if (hoverIndex !== null && hoverIndex >= startIdx && hoverIndex < endIdx) {
                 // The dashed vertical line spans the whole stack (every pane); the
                 // horizontal line, price-label chip, and OHLC legend stay scoped
                 // to the main pane only — an indicator pane's own hover readout,
                 // if it wants one, is the job of whatever plugin draws into it.
-                this.renderCrosshairAndLegend(sorted[hoverIndex], xForIndex(hoverIndex), times[hoverIndex], hoverY, valueMin, valueMax, priceStep, chartWidth, chartHeight, stackHeight);
+                const legendParts = seriesDefinition.formatLegend?.(sorted[hoverIndex], style) ?? [];
+                this.crosshairRenderer.render({
+                    x: xForIndex(hoverIndex),
+                    timeSeconds: times[hoverIndex],
+                    hoverY,
+                    valueMin,
+                    valueMax,
+                    priceStep,
+                    chartWidth,
+                    chartHeight,
+                    stackHeight,
+                    invertValueAxis: this.invertValueAxis,
+                    legendParts,
+                    canvasWidth: canvas.width,
+                });
             }
             if (plugins.length > 0) {
                 // Everything every pane's PluginRenderApi shares — only the pane's
@@ -267,172 +284,4 @@ export class ChartRenderer {
             allPoints,
         };
     }
-    /** The decimal precision `formatPrice` should use for the current price
-     * range — shared by the axis ticks and the crosshair's price label so
-     * both display the same value with the same rounding. */
-    currentPriceStep(priceMin, priceMax) {
-        const ticks = niceTicks(priceMin, priceMax, this.axis.priceTickCount);
-        return ticks.length > 1 ? ticks[1] - ticks[0] : 0;
-    }
-    /**
-     * Draws one pane's right-side value axis: boundary line, horizontal grid
-     * lines, and tick labels. Used for both the main price pane and every
-     * indicator pane — `topOffset` shifts everything down by that pane's own
-     * position in the stack (0 for the main pane, which sits at the top), so
-     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
-     * range and never about where that pane lives in the full canvas.
-     */
-    renderPriceAxis(priceMin, priceMax, step, yScale, chartWidth, chartHeight, topOffset) {
-        const { ctx, axis } = this;
-        const ticks = niceTicks(priceMin, priceMax, axis.priceTickCount);
-        ctx.strokeStyle = axis.lineColor;
-        ctx.beginPath();
-        ctx.moveTo(chartWidth + 0.5, topOffset);
-        ctx.lineTo(chartWidth + 0.5, topOffset + chartHeight);
-        ctx.stroke();
-        ctx.font = this.axisFont();
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-        for (const value of ticks) {
-            const localY = yScale.map(value);
-            if (localY < 0 || localY > chartHeight)
-                continue;
-            const y = topOffset + localY;
-            ctx.strokeStyle = axis.gridLineColor;
-            ctx.beginPath();
-            ctx.moveTo(0, y + 0.5);
-            ctx.lineTo(chartWidth, y + 0.5);
-            ctx.stroke();
-            ctx.fillStyle = axis.textColor;
-            ctx.fillText(formatPrice(value, step), chartWidth + 6, y);
-        }
-    }
-    /** The horizontal rule separating an indicator pane from whatever sits
-     * above it (the main pane, or the previous indicator pane) — the same
-     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
-     * the plotting area and the time-axis strip. */
-    renderPaneSeparator(top, chartWidth) {
-        const { ctx, axis } = this;
-        ctx.strokeStyle = axis.lineColor;
-        ctx.beginPath();
-        ctx.moveTo(0, top + 0.5);
-        ctx.lineTo(chartWidth, top + 0.5);
-        ctx.stroke();
-    }
-    renderTimeAxis(times, startIdx, visibleCount, chartHeight, chartWidth, xForIndex) {
-        const { ctx, axis } = this;
-        const visibleTimes = times.slice(startIdx, startIdx + visibleCount);
-        const spanSeconds = visibleTimes[visibleTimes.length - 1] - visibleTimes[0];
-        ctx.strokeStyle = axis.lineColor;
-        ctx.beginPath();
-        ctx.moveTo(0, chartHeight + 0.5);
-        ctx.lineTo(chartWidth, chartHeight + 0.5);
-        ctx.stroke();
-        ctx.fillStyle = axis.textColor;
-        ctx.font = this.axisFont();
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-        for (const localIndex of pickTickIndices(visibleCount, axis.timeMaxTicks)) {
-            const x = xForIndex(startIdx + localIndex);
-            const label = formatAxisLabel(visibleTimes[localIndex], spanSeconds);
-            ctx.fillText(label, x, chartHeight + 6);
-        }
-    }
-    renderCrosshairAndLegend(point, x, timeSeconds, hoverY, valueMin, valueMax, priceStep, chartWidth, chartHeight, stackHeight) {
-        const { ctx, canvas, seriesDefinition, style, crosshair } = this;
-        ctx.save();
-        ctx.strokeStyle = crosshair.lineColor;
-        ctx.setLineDash([4, 4]);
-        // Spans the whole pane stack (not just the main pane's own
-        // chartHeight) so hovering a candle lines up with the same column
-        // across every indicator pane below it — see the call site's comment
-        // in `render()` for why the horizontal line/legend don't follow suit.
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, stackHeight);
-        ctx.stroke();
-        // The horizontal line follows the actual cursor/finger position, not
-        // any property of the hovered point — pinning it to (say) the candle's
-        // close would leave it motionless while the pointer moves anywhere
-        // within that same candle's column, which reads as broken/stuck rather
-        // than as a crosshair. Only drawn while the pointer is actually inside
-        // the chart's vertical extent, same as the price-axis tick-skip logic
-        // in renderPriceAxis.
-        const priceLineVisible = hoverY !== null && hoverY >= 0 && hoverY <= chartHeight;
-        if (priceLineVisible) {
-            ctx.beginPath();
-            ctx.moveTo(0, hoverY);
-            ctx.lineTo(chartWidth, hoverY);
-            ctx.stroke();
-        }
-        ctx.restore();
-        if (priceLineVisible) {
-            // Exact inverse of the value->y mapping createScale set up for this
-            // frame — same helper (and same invertValueAxis flag) as
-            // PluginRenderApi.valueForY, see src/valueAxis.ts.
-            const value = pixelToValue(hoverY, valueMin, valueMax, chartHeight, this.invertValueAxis);
-            this.renderPriceLabelChip(formatPrice(value, priceStep), hoverY, chartWidth);
-        }
-        this.renderTimeLabelChip(formatHoverTime(timeSeconds), x, chartHeight, canvas.width);
-        const parts = seriesDefinition.formatLegend?.(point, style) ?? [];
-        if (parts.length === 0)
-            return;
-        this.renderHoverTooltip(parts, x, hoverY, chartWidth, chartHeight);
-    }
-    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
-     * speech bubble, one line per part, rather than a fixed banner glued to
-     * a corner of the canvas. Offset up-and-right of the cursor/finger by
-     * `legend.cursorGap` and clamped to both chart edges so it never runs
-     * off-screen, including when there's no `hoverY` to anchor to (a series
-     * with no primary value still gets a legend, just pinned near the top
-     * at the hovered column). */
-    renderHoverTooltip(lines, x, hoverY, chartWidth, chartHeight) {
-        const { ctx, font, legend } = this;
-        ctx.font = this.legendFont();
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        const lineHeight = font.legendSize + 4;
-        const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
-        const boxWidth = textWidth + legend.paddingX * 2;
-        const boxHeight = lines.length * lineHeight + legend.paddingY * 2;
-        const anchorY = hoverY ?? 0;
-        const left = Math.min(Math.max(x + legend.cursorGap, 0), Math.max(0, chartWidth - boxWidth));
-        const top = Math.min(Math.max(anchorY - boxHeight - legend.cursorGap, 0), Math.max(0, chartHeight - boxHeight));
-        ctx.fillStyle = legend.background;
-        ctx.fillRect(left, top, boxWidth, boxHeight);
-        ctx.fillStyle = legend.textColor;
-        lines.forEach((line, i) => {
-            ctx.fillText(line, left + legend.paddingX, top + legend.paddingY + i * lineHeight);
-        });
-    }
-    /** The highlighted price-axis label that follows the crosshair's
-     * horizontal line — drawn over `renderPriceAxis`'s own tick labels so the
-     * hovered value reads clearly even where it lands between two ticks. */
-    renderPriceLabelChip(text, y, chartWidth) {
-        const { ctx, font, crosshair } = this;
-        ctx.font = this.axisFont();
-        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
-        ctx.fillStyle = crosshair.labelBackground;
-        ctx.fillRect(chartWidth, y - chipHeight / 2, this.priceAxisWidth, chipHeight);
-        ctx.fillStyle = crosshair.labelTextColor;
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(text, chartWidth + crosshair.labelPaddingX, y);
-    }
-    /** The highlighted time-axis label under the crosshair's vertical line.
-     * Clamped so its background chip stays fully on-screen even when the
-     * hovered point sits at the very first or last visible index. */
-    renderTimeLabelChip(text, x, chartHeight, canvasWidth) {
-        const { ctx, font, crosshair } = this;
-        ctx.font = this.axisFont();
-        const chipWidth = ctx.measureText(text).width + crosshair.labelPaddingX * 2;
-        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
-        const chipLeft = Math.min(Math.max(x - chipWidth / 2, 0), canvasWidth - chipWidth);
-        ctx.fillStyle = crosshair.labelBackground;
-        ctx.fillRect(chipLeft, chartHeight, chipWidth, chipHeight);
-        ctx.fillStyle = crosshair.labelTextColor;
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        ctx.fillText(text, chipLeft + crosshair.labelPaddingX, chartHeight + crosshair.labelPaddingY);
-    }
 }

package/dist/viewport.d.ts

@@ -33,6 +33,17 @@ export declare class Viewport {
      * keeping the point at `anchorIndex` under the same relative position —
      * the standard "zoom toward the cursor" feel. */
     zoom(factor: number, anchorIndex: number, totalCount: number): void;
+    /**
+     * Replaces the visible window outright with `[startIndex, endIndex)`,
+     * clamped the same way `pan`/`zoom` already are (a floor on
+     * `visibleCount` so the window never collapses to nothing, and never
+     * extends past `[0, totalCount]`). The primitive a programmatic "jump to
+     * this range" builds on (see `WickChart.setVisibleRange`/
+     * `setVisibleTimeRange`) — unlike `pan`/`zoom`, which shift or scale the
+     * *current* window for a continuous gesture, this discards it and starts
+     * fresh from whatever was requested.
+     */
+    setVisibleIndexRange(startIndex: number, endIndex: number, totalCount: number): void;
     /** Multiplies the value-scale factor, clamped to a sane range so the
      * value axis can't be dragged into showing nothing or clipping data.
      * Only affects the auto-fit path — a no-op once `valueRangeOverride` is

package/dist/viewport.js

@@ -50,6 +50,22 @@ export class Viewport {
         const maxStart = Math.max(0, totalCount - this.visibleCount);
         this.startIndex = clamp(anchorIndex - anchorRatio * newVisibleCount, 0, maxStart);
     }
+    /**
+     * Replaces the visible window outright with `[startIndex, endIndex)`,
+     * clamped the same way `pan`/`zoom` already are (a floor on
+     * `visibleCount` so the window never collapses to nothing, and never
+     * extends past `[0, totalCount]`). The primitive a programmatic "jump to
+     * this range" builds on (see `WickChart.setVisibleRange`/
+     * `setVisibleTimeRange`) — unlike `pan`/`zoom`, which shift or scale the
+     * *current* window for a continuous gesture, this discards it and starts
+     * fresh from whatever was requested.
+     */
+    setVisibleIndexRange(startIndex, endIndex, totalCount) {
+        const requestedCount = endIndex - startIndex;
+        this.visibleCount = clamp(requestedCount, MIN_VISIBLE_COUNT, Math.max(totalCount, MIN_VISIBLE_COUNT));
+        const maxStart = Math.max(0, totalCount - this.visibleCount);
+        this.startIndex = clamp(startIndex, 0, maxStart);
+    }
     /** Multiplies the value-scale factor, clamped to a sane range so the
      * value axis can't be dragged into showing nothing or clipping data.
      * Only affects the auto-fit path — a no-op once `valueRangeOverride` is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wick-charts",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "An open-source financial charting library — WASM (Rust) for compute, Canvas2D for rendering.",
   "license": "MIT",
   "author": "eatnows",