@pond-ts/charts 0.71.0 → 0.73.0

package/dist/BandChart.d.ts

@@ -3,6 +3,7 @@ import type { SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
 import type { NumericColumn, ValueNumericColumn } from './column-names.js';
 import { type Curve } from './curve.js';
 import type { DecimateOption } from './decimate.js';
+import { type XOffset } from './x-offset.js';
 export interface BandChartCommon<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
     /**
      * The band's semantic identifier — what the spread _is_ (e.g. `outer` for a
@@ -44,6 +45,13 @@ export interface BandChartCommon<S extends SeriesSchema = SeriesSchema, VS exten
      * `boundaries`.
      */
     sessionBreaks?: boolean;
+    /**
+     * Draw each row this long **after its key** — milliseconds or a duration
+     * string. **Omitted ⇒ `0`**. Time series only. Same knob as
+     * {@link LineChartCommon.xOffset}, so a band and the line it pairs with
+     * move together.
+     */
+    xOffset?: XOffset;
     /**
      * **M4 viewport decimation** (charts decimator wave). **Omitted ⇒ `true`**:
      * once the visible envelope is denser than ~2 samples per device pixel, it is
@@ -111,6 +119,6 @@ export type BandChartProps<S extends SeriesSchema = SeriesSchema, VS extends Val
  * </Layers>
  * ```
  */
-export declare function BandChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, lower, upper, as: semantic, axis, curve, sessionBreaks, decimate, legend, index, }: BandChartProps<S, VS>): null;
+export declare function BandChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series: source, lower, upper, as: semantic, axis, curve, sessionBreaks, decimate, legend, xOffset, index, }: BandChartProps<S, VS>): null;
 export {};
 //# sourceMappingURL=BandChart.d.ts.map

package/dist/BandChart.js

@@ -6,6 +6,7 @@ import { resolveCurve } from './curve.js';
 import { ContainerContext, LayersContext } from './context.js';
 import { legendLabelFor, useLegendItems, } from './swatch.js';
 import { useSlotKey } from './use-slot-key.js';
+import { useXOffset } from './x-offset.js';
 /** Stable empty boundary list — so `sessionBreaks={false}` keeps a referentially
  *  constant array and the layer entry isn't rebuilt every render. */
 const NO_BREAKS = [];
@@ -26,7 +27,7 @@ const NO_BREAKS = [];
  * </Layers>
  * ```
  */
-export function BandChart({ series, lower, upper, as: semantic, axis, curve, sessionBreaks = false, decimate = true, legend, index = 0, }) {
+export function BandChart({ series: source, lower, upper, as: semantic, axis, curve, sessionBreaks = false, decimate = true, legend, xOffset, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<BandChart> must be rendered inside a <ChartContainer>');
@@ -35,6 +36,9 @@ export function BandChart({ series, lower, upper, as: semantic, axis, curve, ses
     if (layers === null) {
         throw new Error('<BandChart> must be rendered inside a <Layers>');
     }
+    // The series as drawn: moved by `xOffset` (the source itself when there is
+    // none), so every read below shares one axis.
+    const series = useXOffset(source, xOffset, 'BandChart');
     const bs = useMemo(() => series instanceof ValueSeries
         ? bandFromValueSeries(series, lower, upper)
         : bandFromTimeSeries(series, lower, upper), [series, lower, upper]);

package/dist/ChartRow.js

@@ -365,7 +365,7 @@ export function ChartRow({ height: heightProp, flex, children, }) {
             const extents = needsExtents(ax)
                 ? layerList
                     .filter((entry) => (entry.axisId ?? defaultAxisId) === ax.id)
-                    .map((entry) => entry.layer.yExtent(ax.scale))
+                    .map((entry) => entry.layer.yExtent())
                 : [];
             const [lo, hi] = resolveYDomain(ax.min, ax.max, extents, ax.pad, ax.scale);
             // Reserve a header band at the top when any axis draws a `'top'` title,
@@ -470,7 +470,7 @@ export function ChartRow({ height: heightProp, flex, children, }) {
             // about.
             const message = logAxisWarning(ax, layerList
                 .filter((entry) => (entry.axisId ?? defaultAxisId) === ax.id)
-                .map((entry) => entry.layer.yExtent(ax.scale)));
+                .map((entry) => entry.layer.yExtent()));
             if (message === null)
                 warned.delete(ax.id);
             else if (warned.get(ax.id) !== message) {

package/dist/LineChart.d.ts

@@ -4,6 +4,7 @@ import type { NumericColumn, ValueNumericColumn } from './column-names.js';
 import type { DecimateOption } from './decimate.js';
 import { type Curve } from './curve.js';
 import { type GapMode } from './gaps.js';
+import { type XOffset } from './x-offset.js';
 export interface LineChartCommon<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
     /**
      * The series' semantic identifier — what the data _is_ / how it should read
@@ -68,6 +69,29 @@ export interface LineChartCommon<S extends SeriesSchema = SeriesSchema, VS exten
      * no-op on a continuous axis (no provider) or a provider without `boundaries`.
      */
     sessionBreaks?: boolean;
+    /**
+     * Draw each row this long **after its key** — milliseconds or a duration
+     * string (`'1m'`, `'-30s'`). **Omitted ⇒ `0`**, drawn at the key. Time
+     * series only (throws on a `ValueSeries`, which has no time to move).
+     *
+     * For a value stamped at one instant that belongs at another: a 1-minute
+     * bar is keyed at its open, but its `close` is the price at the bar's
+     * **end**, so `xOffset="1m"` puts the close line where it happened — and the
+     * session's last close lands on the close, not a bar early. The series you
+     * pass is left as it is, so a `<Candlestick>` drawn from it still draws at
+     * the key; the layer moves only its own copy of the key (one pass, value
+     * columns shared).
+     *
+     * On a trading axis, an offset larger than a bar can carry a row out of its
+     * session into closed time — e.g. a negative offset on bars keyed at their
+     * open moves each session's first bar into the previous night. Keep it within
+     * the bar the value belongs to.
+     *
+     * Everything this layer reports is in **drawn** time: its auto-fit extent,
+     * the tracker dot, `sessionBreaks`, a sweep's span. To move the data itself,
+     * use pond's `series.offsetTime(by)`.
+     */
+    xOffset?: XOffset;
     /**
      * **M4 viewport decimation** (charts decimator wave). **Omitted ⇒ `true`**:
      * once the visible data is denser than ~2 samples per device pixel, the line
@@ -124,6 +148,6 @@ export type LineChartProps<S extends SeriesSchema = SeriesSchema, VS extends Val
  * (scaling against its `axis`), and renders nothing to the DOM — the row draws
  * it. The line breaks at gaps rather than spanning them.
  */
-export declare function LineChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, column, readout, as: semantic, axis, id, curve, gaps, sessionBreaks, decimate, legend, index, }: LineChartProps<S, VS>): null;
+export declare function LineChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series: source, column, readout, as: semantic, axis, id, curve, gaps, sessionBreaks, decimate, legend, xOffset, index, }: LineChartProps<S, VS>): null;
 export {};
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart.js

@@ -8,6 +8,7 @@ import { DEFAULT_GAP_MODE, DEFAULT_GAP_CONNECTOR_OPACITY, } from './gaps.js';
 import { ContainerContext, LayersContext, } from './context.js';
 import { legendLabelFor, useLegendItems, } from './swatch.js';
 import { useSlotKey } from './use-slot-key.js';
+import { useXOffset } from './x-offset.js';
 /** Stable empty boundary list — so `sessionBreaks={false}` keeps a referentially
  *  constant array and the layer entry isn't rebuilt every render. */
 const NO_BREAKS = [];
@@ -17,7 +18,7 @@ const NO_BREAKS = [];
  * (scaling against its `axis`), and renders nothing to the DOM — the row draws
  * it. The line breaks at gaps rather than spanning them.
  */
-export function LineChart({ series, column, readout, as: semantic, axis, id, curve, gaps = DEFAULT_GAP_MODE, sessionBreaks = false, decimate = true, legend, index = 0, }) {
+export function LineChart({ series: source, column, readout, as: semantic, axis, id, curve, gaps = DEFAULT_GAP_MODE, sessionBreaks = false, decimate = true, legend, xOffset, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<LineChart> must be rendered inside a <ChartContainer>');
@@ -26,6 +27,9 @@ export function LineChart({ series, column, readout, as: semantic, axis, id, cur
     if (layers === null) {
         throw new Error('<LineChart> must be rendered inside a <Layers>');
     }
+    // The series as drawn: moved by `xOffset` (the source itself when there is
+    // none), so every read below shares one axis.
+    const series = useXOffset(source, xOffset, 'LineChart');
     const cs = useMemo(() => series instanceof ValueSeries
         ? fromValueSeries(series, column)
         : fromTimeSeries(series, column), [series, column]);

package/dist/XAxis.d.ts

@@ -10,6 +10,18 @@ interface PlacedTick {
      *  renders emphasized (bold): a band turn in stacked, an inline promotion in
      *  flat — the same boundaries in both styles. */
     readonly bold?: boolean;
+    /** A session open on a trading axis — live time starts here after a
+     *  collapsed gap. Outranks a plain clock tick when labels collide. */
+    readonly seam?: boolean;
+    /** An instant inside a collapsed gap (closed-market time an elapsed axis's
+     *  wall-clock steps can land on): it sits on the seam pixel but names a
+     *  moment the axis doesn't draw, so any live tick outranks it. */
+    readonly dead?: boolean;
+    /** Under `align="auto"`, an automatic time tick that is the first
+     *  (`'start'`) or last (`'end'`) of the axis's **full** tick list: its label
+     *  anchors inward. Fixed per tick rather than per drawn set, so dropping a
+     *  colliding neighbour never re-anchors another label into a new collision. */
+    readonly anchor?: 'start' | 'end' | undefined;
 }
 /**
  * Thin + truncate a **category** axis's labels so a dense axis stays legible
@@ -25,6 +37,53 @@ interface PlacedTick {
  * Exported for tests only — not re-exported from the package index.
  */
 export declare function thinCategoryLabels(ticks: readonly PlacedTick[], slot: number, plotWidth: number, fontSize: number, fontFamily: string): PlacedTick[];
+/**
+ * Which **time** ticks keep their labels: the indices of `ticks` whose drawn
+ * extents (per `align`) clear one another by {@link LABEL_GAP}. The tick ladder
+ * spaces its clock steps by the grain, but it places every session open
+ * unconditionally, so two anchors can land closer than a label is wide — a
+ * micro-session (one stray pre-market bar in a calendar derived from bars)
+ * puts its open a pixel left of the real open, and a seam can sit just past
+ * the last clock tick before it.
+ *
+ * Greedy in **priority** order — each tick is kept unless it would overlap one
+ * already kept, so within a pass a tick is only ever dropped by a survivor:
+ *
+ * 1. a **period turn** (`bold` — the label carrying the date / month / year,
+ *    or a stacked band turn) before a **session open** (`seam`), before a plain
+ *    clock tick, before a tick in **closed time** (`dead`) — a date stays on
+ *    the turn it marks, and the seam is labelled with live time;
+ * 2. between two turns, or two session opens, the **later** (it owns the
+ *    ticks that follow); between two plain ticks the earlier.
+ *
+ * A blank label (a custom `format` returning `''` to thin its own labels)
+ * draws nothing, so it is always kept and never blocks another.
+ *
+ * Under `'auto'` an edge label's extent follows its fixed {@link
+ * PlacedTick.anchor}, never its position in the drawn set — so no drop moves
+ * another label. The caller re-labels the survivors (see {@link fitTimeTicks}):
+ * a turn dropped beside a tick of a later, different period hands its period
+ * on (a stray New Year's open's `2027` moves onto the next real open). Two
+ * turns of the same level too close to both draw can't both be drawn; the
+ * later one is.
+ *
+ * Exported for tests only — not re-exported from the package index.
+ */
+export declare function fitTimeLabels(ticks: readonly PlacedTick[], align: 'auto' | 'center' | 'right', fontSize: number, fontFamily: string): number[];
+/**
+ * Place a time axis's automatic ticks with no label overprinting another:
+ * `place` labels a set of tick instants (flat promotions walk only the
+ * instants it is given), {@link fitTimeLabels} keeps the ones that clear,
+ * and the survivors are placed again — re-labelling can promote a survivor
+ * and change its width — until a pass drops nothing (each pass only removes,
+ * so it terminates). A re-label can also *narrow* a survivor (`Jan 2` becomes
+ * `2026` once the stub that turned the year is dropped), so each dropped tick
+ * is then offered back in time order and re-admitted if the whole set, placed
+ * again, still fits.
+ *
+ * Exported for tests only — not re-exported from the package index.
+ */
+export declare function fitTimeTicks(values: readonly number[], place: (values: readonly number[]) => PlacedTick[], align: 'auto' | 'center' | 'right', fontSize: number, fontFamily: string): PlacedTick[];
 export interface XAxisProps {
     /**
      * Tick / cursor value formatting — a d3 format/time specifier string or a
@@ -85,9 +144,17 @@ export interface XAxisProps {
      *   right-anchors so the edge labels stay inside the plot (the old default).
      * - `'right'` — the label sits to the **right** of an extended tick that
      *   drops from the axis line (label beside the tick, not under it) — a
-     *   *style* choice (the TradingView look). It re-anchors without measuring,
-     *   so it is **not** a remedy for colliding labels; on a category axis the
-     *   measured fit (thin + middle-ellipsize) is what prevents collisions.
+     *   *style* choice (the TradingView look), **not** a remedy for colliding
+     *   labels. Collisions are handled by measurement, in every mode, on a
+     *   category axis (thin + middle-ellipsize) and on a time axis's automatic
+     *   ticks (the label that would overprint is dropped — a date / month /
+     *   year turn outlasts a clock label — and the survivors are re-labelled so
+     *   the dates they show stay correct; a blank label never blocks one).
+     *   Under `'auto'` the edge labels anchor inward, so a crowded edge costs a
+     *   label — which one follows the same priority (between two plain clock
+     *   labels, the inner neighbour at the left edge and the edge label itself
+     *   at the right). Explicit `ticks`, `transform` ticks and numeric axes are
+     *   not fitted.
      */
     align?: 'auto' | 'center' | 'right';
     /**

package/dist/XAxis.js

@@ -151,6 +151,113 @@ export function thinCategoryLabels(ticks, slot, plotWidth, fontSize, fontFamily)
     }
     return out;
 }
+/**
+ * Which **time** ticks keep their labels: the indices of `ticks` whose drawn
+ * extents (per `align`) clear one another by {@link LABEL_GAP}. The tick ladder
+ * spaces its clock steps by the grain, but it places every session open
+ * unconditionally, so two anchors can land closer than a label is wide — a
+ * micro-session (one stray pre-market bar in a calendar derived from bars)
+ * puts its open a pixel left of the real open, and a seam can sit just past
+ * the last clock tick before it.
+ *
+ * Greedy in **priority** order — each tick is kept unless it would overlap one
+ * already kept, so within a pass a tick is only ever dropped by a survivor:
+ *
+ * 1. a **period turn** (`bold` — the label carrying the date / month / year,
+ *    or a stacked band turn) before a **session open** (`seam`), before a plain
+ *    clock tick, before a tick in **closed time** (`dead`) — a date stays on
+ *    the turn it marks, and the seam is labelled with live time;
+ * 2. between two turns, or two session opens, the **later** (it owns the
+ *    ticks that follow); between two plain ticks the earlier.
+ *
+ * A blank label (a custom `format` returning `''` to thin its own labels)
+ * draws nothing, so it is always kept and never blocks another.
+ *
+ * Under `'auto'` an edge label's extent follows its fixed {@link
+ * PlacedTick.anchor}, never its position in the drawn set — so no drop moves
+ * another label. The caller re-labels the survivors (see {@link fitTimeTicks}):
+ * a turn dropped beside a tick of a later, different period hands its period
+ * on (a stray New Year's open's `2027` moves onto the next real open). Two
+ * turns of the same level too close to both draw can't both be drawn; the
+ * later one is.
+ *
+ * Exported for tests only — not re-exported from the package index.
+ */
+export function fitTimeLabels(ticks, align, fontSize, fontFamily) {
+    const extents = ticks.map((t) => {
+        const font = `${t.bold ? '700 ' : ''}${fontSize}px ${fontFamily}`;
+        const w = labelWidth(t.label, font, fontSize);
+        // Mirrors the render's placement (`labelLeft` + `labelTransform`).
+        if (align === 'right')
+            return [t.x + 4, t.x + 4 + w];
+        if (align === 'auto' && t.anchor === 'start')
+            return [t.x, t.x + w];
+        if (align === 'auto' && t.anchor === 'end')
+            return [t.x - w, t.x];
+        return [t.x - w / 2, t.x + w / 2];
+    });
+    const blank = (i) => ticks[i].label.trim() === '';
+    const rank = (t) => (t.dead ? -1 : t.bold ? 2 : t.seam ? 1 : 0);
+    const order = ticks
+        .map((_, i) => i)
+        .sort((i, j) => {
+        const ri = rank(ticks[i]);
+        const rj = rank(ticks[j]);
+        if (ri !== rj)
+            return rj - ri;
+        return ri > 0 ? j - i : i - j;
+    });
+    const kept = [];
+    for (const i of order) {
+        const [l, r] = extents[i];
+        const clear = blank(i) ||
+            kept.every((j) => {
+                const [kl, kr] = extents[j];
+                return blank(j) || r + LABEL_GAP <= kl || kr + LABEL_GAP <= l;
+            });
+        if (clear)
+            kept.push(i);
+    }
+    return kept.sort((i, j) => i - j);
+}
+/**
+ * Place a time axis's automatic ticks with no label overprinting another:
+ * `place` labels a set of tick instants (flat promotions walk only the
+ * instants it is given), {@link fitTimeLabels} keeps the ones that clear,
+ * and the survivors are placed again — re-labelling can promote a survivor
+ * and change its width — until a pass drops nothing (each pass only removes,
+ * so it terminates). A re-label can also *narrow* a survivor (`Jan 2` becomes
+ * `2026` once the stub that turned the year is dropped), so each dropped tick
+ * is then offered back in time order and re-admitted if the whole set, placed
+ * again, still fits.
+ *
+ * Exported for tests only — not re-exported from the package index.
+ */
+export function fitTimeTicks(values, place, align, fontSize, fontFamily) {
+    const fits = (placed) => fitTimeLabels(placed, align, fontSize, fontFamily);
+    let cur = values;
+    let placed = place(cur);
+    for (let kept = fits(placed); kept.length < placed.length;) {
+        cur = kept.map((i) => cur[i]);
+        placed = place(cur);
+        kept = fits(placed);
+    }
+    if (cur.length === values.length)
+        return placed;
+    const drawn = new Set(cur);
+    for (const v of values) {
+        if (drawn.has(v))
+            continue;
+        const trial = [...cur, v].sort((a, b) => a - b);
+        const again = place(trial);
+        if (fits(again).length === again.length) {
+            cur = trial;
+            placed = again;
+            drawn.add(v);
+        }
+    }
+    return placed;
+}
 /**
  * The shared **x axis**, a sibling of {@link YAxis} for the horizontal axis. A
  * child of {@link ChartContainer}, rendered as DOM chrome (crisp text,
@@ -399,38 +506,79 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
         }
         return out;
     };
-    const rawTicks = customTicks
-        ? customTicks.map((t) => ({ x: xScale(t.at), label: t.label }))
-        : derived !== null
-            ? honestDerived()
-            : // `tickValues`, not `xScale.ticks` — d3's raw `scaleLog.ticks()` is
-                // nearly a step function (see `yticks.ts`), so a log x needs the same
-                // decade ladder the y axis already builds. For a time or linear scale
-                // it defers to `scale.ticks(count)`, so this is a no-op there.
-                tickValues(xScale, xTickCount).map((d) => ({
-                    x: xScale(d),
-                    label: tickFmt(+d),
-                    // A **period turn** renders emphasized (bold), consistently across
-                    // styles: in stacked, a tick on a band divider (matched by pixel);
-                    // in flat, a tick whose label was *promoted* to a coarser period
-                    // (its flat label differs from the terse base) — the same boundaries,
-                    // so `Feb` / `2026` read as strong in flat just as the band turns do.
-                    bold: stacked
-                        ? dividerXs.has(Math.round(xScale(d)))
-                        : flatFmt !== undefined &&
-                            baseFmt !== undefined &&
-                            flatFmt(+d) !== baseFmt(+d),
-                }));
-    // A category axis ticks once per category; thin + truncate its labels when they
-    // crowd (an explicit `customTicks` axis keeps its labels verbatim). The slot is
-    // the scale's own band pitch — under `maxBandWidth` packing it is narrower than
-    // `plotWidth / n`, and the fit must measure against the pitch labels actually
-    // sit on.
-    const placed = xKind === 'category' && customTicks === undefined && rawTicks.length > 0
-        ? thinCategoryLabels(rawTicks, 'bandwidth' in xScale
+    // The automatic tick instants (none when `ticks` or a `transform` lays the
+    // axis out). `tickValues`, not `xScale.ticks` — d3's raw `scaleLog.ticks()`
+    // is nearly a step function (see `yticks.ts`), so a log x needs the same
+    // decade ladder the y axis already builds. For a time or linear scale it
+    // defers to `scale.ticks(count)`, so this is a no-op there.
+    const autoValues = customTicks !== undefined || derived !== null
+        ? []
+        : tickValues(xScale, xTickCount).map((d) => +d);
+    // Place a set of automatic ticks: x, label, emphasis. The flat style labels
+    // only the ticks it is handed, so when the time-axis fit drops one, its
+    // period turn is promoted onto the next drawn tick instead of vanishing.
+    const disc = xKind === 'time' ? container.discontinuities : undefined;
+    const placeAuto = (values) => {
+        const flatDrawn = flatFmt !== undefined
+            ? xScale.flatFormat(xTickCount, values)
+            : undefined;
+        const label = flatDrawn ?? tickFmt;
+        return values.map((v) => ({
+            x: xScale(v),
+            // A JS `format` may return null / a number (`AxisFormat` says string);
+            // the fit measures the text, so normalise it as the JSX always did.
+            label: String(label(v) ?? ''),
+            // A **period turn** renders emphasized (bold), consistently across
+            // styles: in stacked, a tick on a band divider (matched by pixel);
+            // in flat, a tick whose label was *promoted* to a coarser period
+            // (its flat label differs from the terse base) — the same boundaries,
+            // so `Feb` / `2026` read as strong in flat just as the band turns do.
+            bold: stacked
+                ? dividerXs.has(Math.round(xScale(v)))
+                : flatDrawn !== undefined &&
+                    baseFmt !== undefined &&
+                    flatDrawn(v) !== baseFmt(v),
+            // Live from here, dead just before: a session open on a collapsed seam
+            // (the probe `Layers` uses for session dividers, plus the live side, so
+            // an instant inside the gap doesn't qualify).
+            seam: disc !== undefined &&
+                disc.distance(v - 1, v) <= 0 &&
+                disc.distance(v, v + 1) > 0,
+            dead: disc !== undefined && disc.distance(v, v + 1) <= 0,
+            // `auto` anchors the edge ticks of the FULL list, whichever survive.
+            anchor: align !== 'auto'
+                ? undefined
+                : v === autoValues[0]
+                    ? 'start'
+                    : v === autoValues[autoValues.length - 1]
+                        ? 'end'
+                        : undefined,
+        }));
+    };
+    // A time axis's automatic ticks drop any that would overprint a neighbour
+    // (session opens can crowd — see `fitTimeTicks`), re-labelling the
+    // survivors. A category axis ticks once per category; thin + truncate its
+    // labels when they crowd. The slot is the scale's own band pitch — under
+    // `maxBandWidth` packing it is narrower than `plotWidth / n`, and the fit
+    // must measure against the pitch labels actually sit on. Explicit `ticks`
+    // stay verbatim; derived ticks have their own honesty pass.
+    const timeFitted = xKind === 'time' && customTicks === undefined && derived === null;
+    const placed = (() => {
+        if (timeFitted) {
+            return fitTimeTicks(autoValues, placeAuto, align, theme.font.size, theme.font.family);
+        }
+        const raw = customTicks
+            ? customTicks.map((t) => ({ x: xScale(t.at), label: t.label }))
+            : derived !== null
+                ? honestDerived()
+                : placeAuto(autoValues);
+        if (xKind !== 'category' || customTicks !== undefined || raw.length === 0) {
+            return raw;
+        }
+        return thinCategoryLabels(raw, 'bandwidth' in xScale
             ? xScale.bandwidth()
-            : plotWidth / rawTicks.length, plotWidth, theme.font.size, theme.font.family)
-        : rawTicks;
+            : plotWidth / raw.length, plotWidth, theme.font.size, theme.font.family);
+    })();
     const onTop = side === 'top';
     // Axis pills (marker / crosshair) sit at the same offset as the tick labels so
     // they line up with their tick-label neighbours (matches `labelOffset` below).
@@ -545,11 +693,15 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
             fontSize: `${theme.font.size}px`,
             color: color ?? theme.axis.label,
         }, children: [placed.map((t, i) => {
-                const isFirst = i === 0;
-                const isLast = i === placed.length - 1;
                 // `center`: every label centred on its tick. `auto`: centred, but the
-                // edge labels end-align so they stay within [0, plotWidth]. `right`:
-                // label left-anchored just past an extended tick (beside, not under).
+                // edge labels end-align so they stay within [0, plotWidth] — on a time
+                // axis the edges of the full tick list (`anchor`, which the label fit
+                // measured), elsewhere the first / last drawn. `right`: label
+                // left-anchored just past an extended tick (beside, not under).
+                const isFirst = timeFitted ? t.anchor === 'start' : i === 0;
+                const isLast = timeFitted
+                    ? t.anchor === 'end'
+                    : i === placed.length - 1;
                 const labelTransform = align === 'right'
                     ? 'none'
                     : align === 'auto' && isFirst

package/dist/area.d.ts

@@ -23,18 +23,6 @@ export declare function columnFiniteExtent(y: Float64Array, length: number): rea
  * `xs`/`ys` are aligned index-for-index.
  */
 export declare function fillAffineArea(ctx: CanvasRenderingContext2D, xs: Float64Array, ys: Float64Array, baselinePx: number, ax: Affine, ay: Affine): void;
-/**
- * The `[min, max]` vertical extent an area occupies — the finite values of
- * `cs.y` widened to include `baseline`, since the fill spans from each value to
- * the baseline (so the baseline must be in-domain or the fill clips). `null` if
- * no value is finite. When `baseline` is `undefined` (`<AreaChart
- * baseline="floor">`) the area rests on the axis's own lower bound (resolved
- * later), so only the values constrain the
- * domain — matching {@link yExtent}.
- *
- * NaN values (the gap signal) are ignored, so a coast doesn't drag the domain.
- */
-export declare function areaExtent(cs: ChartSeries, baseline: number | undefined): [number, number] | null;
 /**
  * Fill the area between `cs`'s value line and a horizontal `baseline`, with a
  * vertical gradient (most opaque at the line, fading to transparent at the
@@ -71,7 +59,7 @@ export declare function areaExtent(cs: ChartSeries, baseline: number | undefined
  * bracketed by `save`/`restore` so they don't leak into later layers. Gap edges
  * are collected by one O(N) walk ({@link collectGapEdges}).
  */
-export declare function drawArea(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: AreaStyle, baselineValue: number, curve?: CurveFactory, gaps?: GapMode, gapConnectorOpacity?: number, decimate?: DecimateOption, banding?: BandLadder): LayerDrawStats;
+export declare function drawArea(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: AreaStyle, baselineValue: number, curve?: CurveFactory, gaps?: GapMode, gapConnectorOpacity?: number, decimate?: DecimateOption, banding?: BandLadder, boundaries?: readonly number[]): LayerDrawStats;
 /**
  * The banded fill + stroke for `<AreaChart thresholds>` ([PND-BANDAREA]): one
  * vertical **hard-stop gradient in pixel space**, a colour switch at every