basalt-ui 1.16.0 → 1.18.0

package/src/charts/kinds/MultiLine.test.tsx

@@ -2,8 +2,11 @@
  * `MultiLine` — the `strokeOpacity` wiring: `dimOpacity(s) * (s.strokeOpacity ?? 1)`. SSR harness
  * (no hover needed), same pattern as `CartesianChart.test.tsx`'s `nice` assertions.
  */
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, test } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
 import { MultiLine } from './MultiLine'
 import type { ChartSeries } from '../series'
 
@@ -35,3 +38,181 @@ describe('MultiLine — series.strokeOpacity dims the plotted stroke', () => {
     expect(html).toContain('stroke-opacity="0.35"')
   })
 })
+
+describe('MultiLine — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const series: ChartSeries<Row>[] = [
+      { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-formatx"
+        getX={(d) => d.date}
+        series={series}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(html).toContain('X:2026-08-01')
+    expect(html).not.toContain('>01.08<')
+  })
+})
+
+describe('MultiLine — getMarker fillOpacity/ring', () => {
+  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? { ring: false, fillOpacity: 0.7 } : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row> data={rows} chartId="ml-marker-ring" getX={(d) => d.date} series={series} />,
+    )
+    expect(html).toContain('fill-opacity="0.7"')
+    expect(html).not.toContain('stroke-width="2"')
+  })
+
+  test('default marker keeps the punched-out ring and full opacity (unchanged rendering)', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? {} : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-marker-default"
+        getX={(d) => d.date}
+        series={series}
+      />,
+    )
+    expect(html).toContain('stroke-width="2"')
+    expect(html).toContain('fill-opacity="1"')
+  })
+})
+
+describe('MultiLine — markerShape="star" honours getMarker ring/fillOpacity', () => {
+  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? { ring: false, fillOpacity: 0.7 } : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-star-ring"
+        getX={(d) => d.date}
+        series={series}
+        markerShape="star"
+      />,
+    )
+    expect(html).toContain('fill-opacity="0.7"')
+    expect(html).not.toContain('stroke-width="1.5"')
+  })
+
+  test('default marker keeps the punched-out ring and full opacity (unchanged rendering)', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? {} : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-star-default"
+        getX={(d) => d.date}
+        series={series}
+        markerShape="star"
+      />,
+    )
+    expect(html).toContain('stroke-width="1.5"')
+    expect(html).toContain('fill-opacity="1"')
+  })
+})
+
+describe('MultiLine — cursorResolution threads through to sibling resolution', () => {
+  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a MultiLine sibling folded
+  // into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
+  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
+  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
+  const dailyRows: Row[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    v: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', v: 0 },
+    { date: '2026-08-08', v: 1 },
+  ]
+  const dailySeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+  const foldedSeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<Row>
+          data={dailyRows}
+          chartId="ml-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <MultiLine<Row>
+          data={foldedRows}
+          chartId="ml-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
+  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})

package/src/charts/kinds/MultiLine.tsx

@@ -2,6 +2,7 @@ import { curveMonotoneX } from '@visx/curve'
 import { LinePath } from '@visx/shape'
 import { memo, useCallback, useMemo } from 'react'
 import type { ReactNode } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import type { CartesianTooltipConfig, AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import { CartesianChart } from '../primitives/CartesianChart'
 import type { XZoneSpec } from '../primitives/XZoneRects'
@@ -35,6 +36,14 @@ export type MultiLineProps<T> = {
   refLines?: { value: number; color: string; dashed?: boolean }[]
   /** Exact number of x ticks. Default: as many as fit. */
   xTicks?: number
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** Tooltip config — `label` for a right-aligned header badge, `extraRows` for rows appended
    * after the derived per-series rows. `false` disables the tooltip entirely. */
   tooltip?: CartesianTooltipConfig<T> | false
@@ -100,6 +109,8 @@ function MultiLineInner<T>(props: MultiLineProps<T>) {
     xZones,
     refLines,
     xTicks,
+    formatX,
+    cursorResolution,
     tooltip,
     markerShape = 'circle',
     height,
@@ -127,6 +138,8 @@ function MultiLineInner<T>(props: MultiLineProps<T>) {
       {...(xZones !== undefined && { xZones })}
       {...(refLines !== undefined && { refLines })}
       {...(xTicks !== undefined && { xTicks })}
+      {...(formatX !== undefined && { formatX })}
+      {...(cursorResolution !== undefined && { cursorResolution })}
       {...(tooltip !== undefined && { tooltip })}
       {...(height !== undefined && { height })}
       {...(legend !== undefined && { legend })}
@@ -196,16 +209,16 @@ function MultiLineMarks<T>({
           const cy = scale(p.__y)
           const color = m.color ?? s.color
           const r = m.r ?? (markerShape === 'star' ? STAR_R : VX.dotR)
+          const ring = m.ring ?? true
+          const fillOpacity = (m.fillOpacity ?? 1) * op
           markers.push(
             markerShape === 'star' ? (
               <path
                 key={`mk-${s.key}-${getX(p.__d)}`}
                 d={starPath(cx, cy, r)}
                 fill={color}
-                stroke={VX.dotStroke}
-                strokeWidth={1.5}
-                fillOpacity={op}
-                strokeOpacity={op}
+                fillOpacity={fillOpacity}
+                {...(ring && { stroke: VX.dotStroke, strokeWidth: 1.5, strokeOpacity: op })}
               />
             ) : (
               <circle
@@ -214,10 +227,8 @@ function MultiLineMarks<T>({
                 cy={cy}
                 r={r}
                 fill={color}
-                stroke={VX.dotStroke}
-                strokeWidth={2}
-                fillOpacity={op}
-                strokeOpacity={op}
+                fillOpacity={fillOpacity}
+                {...(ring && { stroke: VX.dotStroke, strokeWidth: 2, strokeOpacity: op })}
               />
             ),
           )

package/src/charts/kinds/StackedArea.test.tsx

@@ -0,0 +1,114 @@
+/**
+ * `StackedArea` — the `formatX` seam forwarded to `CartesianChart` (parity with the other
+ * `CartesianChart`-composing kinds). SSR harness, no hover needed.
+ */
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
+import { StackedArea } from './StackedArea'
+import type { ChartSeries } from '../series'
+
+type Row = { date: string; a: number; b: number }
+
+const rows: Row[] = [
+  { date: '2026-08-01', a: 10, b: 4 },
+  { date: '2026-08-02', a: 12, b: 6 },
+]
+
+const series: ChartSeries<Row>[] = [
+  { key: 'a', label: 'A', color: '#111', mark: 'area', getValue: (d) => d.a },
+  { key: 'b', label: 'B', color: '#222', mark: 'area', getValue: (d) => d.b },
+]
+
+describe('StackedArea — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const html = renderToStaticMarkup(
+      <StackedArea<Row>
+        data={rows}
+        chartId="sa-formatx"
+        getX={(d) => d.date}
+        series={series}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(html).toContain('X:2026-08-01')
+    expect(html).not.toContain('>01.08<')
+  })
+
+  test('omitting formatX keeps the default DD.MM rendering', () => {
+    const html = renderToStaticMarkup(
+      <StackedArea<Row> data={rows} chartId="sa-default" getX={(d) => d.date} series={series} />,
+    )
+    expect(html).toContain('>01.08<')
+  })
+})
+
+describe('StackedArea — cursorResolution threads through to sibling resolution', () => {
+  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a StackedArea sibling
+  // folded into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
+  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
+  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
+  type DailyRow = { date: string; v: number }
+
+  const dailyRows: DailyRow[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    v: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', a: 0, b: 0 },
+    { date: '2026-08-08', a: 1, b: 1 },
+  ]
+  const dailySeries: ChartSeries<DailyRow>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+  const foldedSeries: ChartSeries<Row>[] = [
+    { key: 'a', label: 'A', color: '#111', mark: 'area', getValue: (d) => d.a },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<DailyRow>
+          data={dailyRows}
+          chartId="sa-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <StackedArea<Row>
+          data={foldedRows}
+          chartId="sa-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
+  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})

package/src/charts/kinds/StackedArea.tsx

@@ -1,6 +1,7 @@
 import { curveMonotoneX } from '@visx/curve'
 import { AreaStack } from '@visx/shape'
 import { memo, useCallback, useMemo } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import { CartesianChart } from '../primitives/CartesianChart'
 import type { AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import type { ChartLegendConfig, ChartSeries } from '../series'
@@ -21,6 +22,14 @@ export type StackedAreaProps<T> = {
   y?: AxisConfig<T>
   /** X tick count override. Default: as many as fit. */
   xTicks?: number
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
@@ -44,7 +53,20 @@ export type StackedAreaProps<T> = {
  * to restore the original bottom-to-top stacking order for `AreaStack`'s `keys`.
  */
 function StackedAreaInner<T>(props: StackedAreaProps<T>) {
-  const { data, chartId, getX, series, y, xTicks, height, legend, ariaLabel, isPending } = props
+  const {
+    data,
+    chartId,
+    getX,
+    series,
+    y,
+    xTicks,
+    formatX,
+    cursorResolution,
+    height,
+    legend,
+    ariaLabel,
+    isPending,
+  } = props
 
   // The plotted quantity is the CUMULATIVE stack top, not any one series' value — the built-in
   // 'auto' domain (per-series max) would clip a multi-band stack. Skipped when the caller already
@@ -99,6 +121,8 @@ function StackedAreaInner<T>(props: StackedAreaProps<T>) {
       y={yConfig}
       cursorValue={stackedCursorValue}
       {...(xTicks !== undefined && { xTicks })}
+      {...(formatX !== undefined && { formatX })}
+      {...(cursorResolution !== undefined && { cursorResolution })}
       {...(height !== undefined && { height })}
       {...(legend !== undefined && { legend })}
       {...(ariaLabel !== undefined && { ariaLabel })}

package/src/charts/kinds/ZonedLine.test.tsx

@@ -2,8 +2,11 @@
  * `ZonedLine` — the `strokeOpacity` wiring: `primary.strokeOpacity ?? 1`. SSR harness (no hover
  * needed), same pattern as `CartesianChart.test.tsx`'s `nice` assertions.
  */
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, test } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
 import { ZonedLine } from './ZonedLine'
 import type { ChartSeries } from '../series'
 
@@ -35,3 +38,110 @@ describe('ZonedLine — series.strokeOpacity dims the plotted stroke', () => {
     expect(html).toContain('stroke-opacity="0.5"')
   })
 })
+
+describe('ZonedLine — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const series: ChartSeries<Row>[] = [
+      { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+    ]
+    const html = renderToStaticMarkup(
+      <ZonedLine<Row>
+        data={rows}
+        chartId="zl-formatx"
+        getX={(d) => d.date}
+        series={series}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(html).toContain('X:2026-08-01')
+    expect(html).not.toContain('>01.08<')
+  })
+})
+
+describe('ZonedLine — tooltip.formatHeader', () => {
+  test('overrides the tooltip header date text', async () => {
+    const series: ChartSeries<Row>[] = [
+      { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+    ]
+    render(
+      <ZonedLine<Row>
+        data={rows}
+        chartId="zl-formatheader"
+        getX={(d) => d.date}
+        series={series}
+        tooltip={{ formatHeader: (key) => `hdr:${key}` }}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(await screen.findByText('hdr:2026-08-01')).toBeTruthy()
+  })
+})
+
+describe('ZonedLine — cursorResolution threads through to sibling resolution', () => {
+  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a ZonedLine sibling folded
+  // into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
+  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
+  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
+  const dailyRows: Row[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    v: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', v: 0 },
+    { date: '2026-08-08', v: 1 },
+  ]
+  const dailySeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+  const foldedSeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<Row>
+          data={dailyRows}
+          chartId="zl-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <ZonedLine<Row>
+          data={foldedRows}
+          chartId="zl-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
+  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})

package/src/charts/kinds/ZonedLine.tsx

@@ -2,6 +2,7 @@ import { curveMonotoneX } from '@visx/curve'
 import { AreaClosed, LinePath } from '@visx/shape'
 import { Threshold } from '@visx/threshold'
 import { memo, useMemo } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import { AreaGradient, areaFillUrl } from '../primitives/AreaGradient'
 import type { CartesianTooltipConfig, AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import { CartesianChart } from '../primitives/CartesianChart'
@@ -51,6 +52,14 @@ export type ZonedLineProps<T> = {
   refLines?: ZonedLineRefLine[]
   /** Exact number of x ticks. Default: as many as fit. */
   xTicks?: number
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** Tooltip config — `label` for a right-aligned header badge (e.g. zone name with zone color),
    * `extraRows` for rows appended after the derived row. `false` disables the tooltip entirely. */
   tooltip?: CartesianTooltipConfig<T> | false
@@ -110,6 +119,8 @@ function ZonedLineInner<T>(props: ZonedLineProps<T>) {
     thresholds,
     refLines,
     xTicks,
+    formatX,
+    cursorResolution,
     tooltip,
     areaFill,
     height,
@@ -140,6 +151,8 @@ function ZonedLineInner<T>(props: ZonedLineProps<T>) {
       {...(xZones !== undefined && { xZones })}
       {...(refLines !== undefined && { refLines })}
       {...(xTicks !== undefined && { xTicks })}
+      {...(formatX !== undefined && { formatX })}
+      {...(cursorResolution !== undefined && { cursorResolution })}
       {...(tooltip !== undefined && { tooltip })}
       {...(height !== undefined && { height })}
       {...(legend !== undefined && { legend })}