@opendata-ai/openchart-engine 6.26.0 → 6.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.26.0",
+  "version": "6.27.0",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "6.26.0",
+    "@opendata-ai/openchart-core": "6.27.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__test-fixtures__/specs.ts

@@ -74,6 +74,17 @@ export function makeLineSpec(): NormalizedChartSpec {
     hiddenSeries: [],
     seriesStyles: {},
     watermark: true,
+    display: 'full',
+    userExplicit: {
+      chrome: false,
+      legend: false,
+      xAxis: false,
+      yAxis: false,
+      labels: false,
+      animation: false,
+      watermark: false,
+      crosshair: false,
+    },
   };
 }
 
@@ -104,6 +115,17 @@ export function makeBarSpec(): NormalizedChartSpec {
     hiddenSeries: [],
     seriesStyles: {},
     watermark: true,
+    display: 'full',
+    userExplicit: {
+      chrome: false,
+      legend: false,
+      xAxis: false,
+      yAxis: false,
+      labels: false,
+      animation: false,
+      watermark: false,
+      crosshair: false,
+    },
   };
 }
 
@@ -136,5 +158,16 @@ export function makeScatterSpec(): NormalizedChartSpec {
     hiddenSeries: [],
     seriesStyles: {},
     watermark: true,
+    display: 'full',
+    userExplicit: {
+      chrome: false,
+      legend: false,
+      xAxis: false,
+      yAxis: false,
+      labels: false,
+      animation: false,
+      watermark: false,
+      crosshair: false,
+    },
   };
 }

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -181,10 +181,12 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
     },
     "topHeight": 36.6,
   },
+  "crosshair": false,
   "dimensions": {
     "height": 400,
     "width": 600,
   },
+  "display": "full",
   "legend": {
     "bounds": {
       "height": 0,
@@ -731,10 +733,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
     },
     "topHeight": 61.599999999999994,
   },
+  "crosshair": false,
   "dimensions": {
     "height": 500,
     "width": 800,
   },
+  "display": "full",
   "legend": {
     "bounds": {
       "height": 85.2,
@@ -1574,10 +1578,12 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
     },
     "topHeight": 36.6,
   },
+  "crosshair": false,
   "dimensions": {
     "height": 400,
     "width": 600,
   },
+  "display": "full",
   "legend": {
     "bounds": {
       "height": 0,

package/src/__tests__/compile-chart.test.ts

@@ -398,6 +398,307 @@ describe('compileChart', () => {
     const pointMarks = layout.marks.filter((m) => m.type === 'point');
     expect(pointMarks.length).toBe(3);
   });
+
+  // ---------------------------------------------------------------------------
+  // display field + breakpoint override
+  // ---------------------------------------------------------------------------
+
+  it('display defaults to "full" when not specified', () => {
+    const layout = compileChart(lineSpec, { width: 600, height: 400 });
+    expect(layout.display).toBe('full');
+  });
+
+  it('display: "sparkline" propagates through to ChartLayout', () => {
+    const layout = compileChart(
+      { ...lineSpec, display: 'sparkline' as const },
+      { width: 400, height: 80 },
+    );
+    expect(layout.display).toBe('sparkline');
+  });
+
+  it('breakpoint override flips display at compact width', () => {
+    const spec = {
+      ...lineSpec,
+      overrides: {
+        compact: { display: 'sparkline' as const },
+      },
+    };
+
+    const compactLayout = compileChart(spec, { width: 320, height: 200 });
+    expect(compactLayout.display).toBe('sparkline');
+
+    const desktopLayout = compileChart(spec, { width: 1200, height: 600 });
+    expect(desktopLayout.display).toBe('full');
+  });
+
+  it('sparkline mode forces watermark off when not user-explicit', () => {
+    const layout = compileChart(
+      { ...lineSpec, display: 'sparkline' as const },
+      { width: 400, height: 80 },
+    );
+    expect(layout.watermark).toBe(false);
+  });
+
+  it('sparkline mode respects explicit watermark: true', () => {
+    const layout = compileChart(
+      { ...lineSpec, display: 'sparkline' as const, watermark: true },
+      { width: 400, height: 80 },
+    );
+    expect(layout.watermark).toBe(true);
+  });
+
+  it('sparkline mode forces crosshair off when not user-explicit', () => {
+    const layout = compileChart(
+      { ...lineSpec, display: 'sparkline' as const },
+      { width: 400, height: 80 },
+    );
+    expect(layout.crosshair).toBe(false);
+  });
+
+  it('sparkline mode respects explicit crosshair: true', () => {
+    const layout = compileChart(
+      { ...lineSpec, display: 'sparkline' as const, crosshair: true },
+      { width: 400, height: 80 },
+    );
+    expect(layout.crosshair).toBe(true);
+  });
+
+  // ---------------------------------------------------------------------------
+  // Sparkline layout profile (dimensions, axes, legend)
+  // ---------------------------------------------------------------------------
+
+  it('sparkline produces near-edge-to-edge chart area (margins <= 4px per side)', () => {
+    const layout = compileChart(
+      { ...lineSpec, chrome: undefined, display: 'sparkline' as const },
+      { width: 400, height: 80 },
+    );
+
+    // No chrome, no axes, no legend by default. Mark area should be tight.
+    expect(layout.area.x).toBeLessThanOrEqual(4);
+    expect(layout.area.y).toBeLessThanOrEqual(4);
+    const rightMargin = 400 - (layout.area.x + layout.area.width);
+    const bottomMargin = 80 - (layout.area.y + layout.area.height);
+    expect(rightMargin).toBeLessThanOrEqual(4);
+    expect(bottomMargin).toBeLessThanOrEqual(4);
+  });
+
+  it('sparkline returns no axes by default', () => {
+    const layout = compileChart(
+      { ...lineSpec, chrome: undefined, display: 'sparkline' as const },
+      { width: 400, height: 80 },
+    );
+    expect(layout.axes.x).toBeUndefined();
+    expect(layout.axes.y).toBeUndefined();
+  });
+
+  it('sparkline + explicit encoding.x.axis still reserves x-axis', () => {
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        chrome: undefined,
+        display: 'sparkline' as const,
+        encoding: {
+          ...lineSpec.encoding,
+          x: { ...lineSpec.encoding.x, axis: { title: 'date' } },
+        },
+      },
+      { width: 400, height: 200 },
+    );
+    expect(layout.axes.x).toBeDefined();
+  });
+
+  it('sparkline + explicit chrome.title still renders chrome', () => {
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        chrome: { title: 'Q4 Revenue' },
+        display: 'sparkline' as const,
+      },
+      { width: 400, height: 200 },
+    );
+    expect(layout.chrome.title).toBeDefined();
+    expect(layout.chrome.title?.text).toBe('Q4 Revenue');
+  });
+
+  it('sparkline hides legend by default even with color encoding', () => {
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        chrome: undefined,
+        display: 'sparkline' as const,
+      },
+      { width: 400, height: 80 },
+    );
+    expect('entries' in layout.legend && layout.legend.entries.length).toBe(0);
+  });
+
+  it('sparkline + explicit legend.show: true renders legend', () => {
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        chrome: undefined,
+        display: 'sparkline' as const,
+        legend: { show: true },
+      },
+      { width: 400, height: 200 },
+    );
+    expect('entries' in layout.legend && layout.legend.entries.length).toBeGreaterThan(0);
+  });
+
+  it('sparkline works at heights as low as 30px', () => {
+    const layout = compileChart(
+      { ...lineSpec, chrome: undefined, display: 'sparkline' as const },
+      { width: 200, height: 30 },
+    );
+    expect(layout.area.height).toBeGreaterThan(0);
+    expect(layout.area.width).toBeGreaterThan(0);
+  });
+
+  it('chrome: {} does not count as user-explicit chrome (still stripped in sparkline)', () => {
+    // Empty chrome object is the idiom for "silence defaults" — should not
+    // opt-in to chrome rendering in sparkline mode.
+    const layout = compileChart(
+      { ...lineSpec, chrome: {}, display: 'sparkline' as const },
+      { width: 400, height: 80 },
+    );
+    expect(layout.chrome.title).toBeUndefined();
+    expect(layout.chrome.topHeight).toBe(0);
+  });
+
+  // ---------------------------------------------------------------------------
+  // Explicit-at-any-level wins (precedence matrix)
+  // ---------------------------------------------------------------------------
+
+  it('top-level animation: true wins even when breakpoint flips to sparkline', () => {
+    const spec = {
+      ...lineSpec,
+      animation: true as const,
+      overrides: { compact: { display: 'sparkline' as const } },
+    };
+    const layout = compileChart(spec, { width: 320, height: 200 });
+    expect(layout.display).toBe('sparkline');
+    expect(layout.animation?.enabled).toBe(true);
+  });
+
+  it('breakpoint chrome wins when top-level is sparkline', () => {
+    const spec = {
+      ...lineSpec,
+      chrome: undefined,
+      display: 'sparkline' as const,
+      overrides: { full: { chrome: { title: 'Q4 revenue' } } },
+    };
+    const layout = compileChart(spec, { width: 1200, height: 600 });
+    // At full breakpoint, chrome.title from override should render even
+    // though display is sparkline at top-level.
+    expect(layout.chrome.title?.text).toBe('Q4 revenue');
+  });
+
+  it('top-level display: sparkline + breakpoint display: full restores all defaults', () => {
+    const spec = {
+      ...lineSpec,
+      display: 'sparkline' as const,
+      overrides: { full: { display: 'full' as const } },
+    };
+    const layout = compileChart(spec, { width: 1200, height: 600 });
+    expect(layout.display).toBe('full');
+    // Watermark default is true in full mode.
+    expect(layout.watermark).toBe(true);
+  });
+
+  it('explicit watermark: true in sparkline mode actually paints the watermark', () => {
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        chrome: undefined,
+        display: 'sparkline' as const,
+        watermark: true,
+      },
+      { width: 400, height: 200 },
+    );
+    expect(layout.watermark).toBe(true);
+  });
+
+  it('breakpoint encoding.x.axis opts back into x-axis at that breakpoint', () => {
+    const spec = {
+      ...lineSpec,
+      chrome: undefined,
+      display: 'sparkline' as const,
+      overrides: {
+        full: {
+          encoding: {
+            x: { field: 'date', type: 'temporal' as const, axis: { title: 'date' } },
+          },
+        },
+      },
+    };
+    const layoutFull = compileChart(spec, { width: 1200, height: 600 });
+    expect(layoutFull.axes.x).toBeDefined();
+    const layoutCompact = compileChart(spec, { width: 320, height: 200 });
+    expect(layoutCompact.axes.x).toBeUndefined();
+  });
+
+  // ---------------------------------------------------------------------------
+  // Animation duration: sparkline mode bumps the entrance to 1100ms when on
+  // ---------------------------------------------------------------------------
+
+  it('sparkline + animation: true bumps entrance duration to 1100ms', () => {
+    const layout = compileChart(
+      { ...lineSpec, display: 'sparkline' as const, animation: true },
+      { width: 400, height: 80 },
+    );
+    expect(layout.animation?.enabled).toBe(true);
+    expect(layout.animation?.duration).toBe(1100);
+  });
+
+  it('sparkline + animation: { enter: { duration: 500 } } respects user duration', () => {
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        display: 'sparkline' as const,
+        animation: { enter: { duration: 500 } },
+      },
+      { width: 400, height: 80 },
+    );
+    expect(layout.animation?.duration).toBe(500);
+  });
+
+  it('full mode + animation: true uses default 500ms (sparkline bump does not leak)', () => {
+    const layout = compileChart({ ...lineSpec, animation: true }, { width: 600, height: 400 });
+    expect(layout.animation?.duration).toBe(500);
+  });
+
+  // ---------------------------------------------------------------------------
+  // Breakpoint encoding deep-merge: nested axis state survives an override that
+  // only touches one axis property.
+  // ---------------------------------------------------------------------------
+
+  it('breakpoint encoding.x.axis deep-merges with base axis config', () => {
+    const spec = {
+      ...lineSpec,
+      encoding: {
+        ...lineSpec.encoding,
+        x: {
+          field: 'date',
+          type: 'temporal' as const,
+          axis: { title: 'date', tickCount: 8, format: '%b' },
+        },
+      },
+      overrides: {
+        compact: {
+          encoding: {
+            x: { axis: { title: 'd' } },
+          },
+        },
+      },
+    };
+    const layout = compileChart(spec, { width: 320, height: 200 });
+    // The compact override only touched axis.title; tickCount and format
+    // should survive the deep merge.
+    expect(layout.axes.x).toBeDefined();
+    expect(layout.axes.x?.label).toBe('d');
+    // Tick count flows from base spec — if shallow-merged, tickCount would be lost.
+    expect(layout.axes.x?.ticks.length).toBeGreaterThan(0);
+  });
 });
 
 describe('compileTable', () => {

package/src/charts/line/area.ts

@@ -151,7 +151,7 @@ function computeSingleArea(
       fill: fillValue,
       fillOpacity: fillOpacity,
       stroke: getRepresentativeColor(isGradientDef(fillValue) ? color : fillValue),
-      strokeWidth: 2,
+      strokeWidth: spec.display === 'sparkline' ? 1.25 : 2,
       seriesKey: seriesKey === '__default__' ? undefined : seriesKey,
       data: validPoints.map((p) => p.row),
       dataPoints: validPoints.map((p) => ({ x: p.x, y: p.yTop, datum: p.row })),

package/src/charts/line/compute.ts

@@ -32,6 +32,10 @@ import { resolveCurve } from './curves';
 /** Default stroke width for line marks. */
 const DEFAULT_STROKE_WIDTH = 2.5;
 
+/** Sparkline mode uses a thinner stroke since the chart area is tiny and a
+ *  2.5px line reads as clunky. 1.25px keeps the trend legible without dominating. */
+const SPARKLINE_STROKE_WIDTH = 1.25;
+
 /** Default radius for point marks (hover targets). */
 const DEFAULT_POINT_RADIUS = 3;
 
@@ -174,7 +178,9 @@ export function computeLineMarks(
       points: allPoints,
       path: combinedPath,
       stroke: strokeColor,
-      strokeWidth: styleOverride?.strokeWidth ?? DEFAULT_STROKE_WIDTH,
+      strokeWidth:
+        styleOverride?.strokeWidth ??
+        (spec.display === 'sparkline' ? SPARKLINE_STROKE_WIDTH : DEFAULT_STROKE_WIDTH),
       strokeDasharray,
       opacity: styleOverride?.opacity,
       seriesKey: seriesStyleKey,

package/src/compile.ts

@@ -199,7 +199,7 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
 
   // Resolve watermark: explicit spec value wins, then options fallback, then default true.
   const rawWatermark = (expandedSpec as Record<string, unknown>).watermark;
-  const watermark = rawWatermark !== undefined ? chartSpec.watermark : (options.watermark ?? true);
+  let watermark = rawWatermark !== undefined ? chartSpec.watermark : (options.watermark ?? true);
 
   // Run data transforms (filter, bin, calculate, timeUnit) before any other data processing.
   // Transforms are defined on the expanded spec (which includes any auto-generated
@@ -223,10 +223,49 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
     | Partial<
         Record<
           string,
-          { chrome?: unknown; labels?: unknown; legend?: unknown; annotations?: unknown }
+          {
+            chrome?: unknown;
+            labels?: unknown;
+            legend?: unknown;
+            annotations?: unknown;
+            animation?: unknown;
+            display?: unknown;
+            encoding?: unknown;
+            watermark?: unknown;
+            crosshair?: unknown;
+          }
         >
       >
     | undefined;
+
+  // Build userExplicit descriptor BEFORE applying any overrides so we capture
+  // the union of "user wrote this at top-level" and "user wrote this in the
+  // active breakpoint override." Sparkline display mode reads this to decide
+  // whether to suppress chrome/axes/legend/etc. by default vs. respecting an
+  // explicit user opt-in. Precedence: explicit at any level wins.
+  const rawEncoding = rawSpec.encoding as
+    | { x?: { axis?: unknown }; y?: { axis?: unknown } }
+    | undefined;
+  const bpForExplicit = overrides?.[breakpoint];
+  const bpEncoding = bpForExplicit?.encoding as
+    | { x?: { axis?: unknown }; y?: { axis?: unknown } }
+    | undefined;
+  // chrome: {} (empty object) is not "explicit" — it's an idiom users write to
+  // silence defaults. Require at least one chrome key set to count as opt-in.
+  const hasChromeKeys = (v: unknown): boolean =>
+    !!v && typeof v === 'object' && Object.keys(v as Record<string, unknown>).length > 0;
+  const userExplicit = {
+    chrome: hasChromeKeys(rawSpec.chrome) || hasChromeKeys(bpForExplicit?.chrome),
+    legend: rawSpec.legend !== undefined || bpForExplicit?.legend !== undefined,
+    xAxis: rawEncoding?.x?.axis !== undefined || bpEncoding?.x?.axis !== undefined,
+    yAxis: rawEncoding?.y?.axis !== undefined || bpEncoding?.y?.axis !== undefined,
+    labels: rawSpec.labels !== undefined || bpForExplicit?.labels !== undefined,
+    animation: rawSpec.animation !== undefined || bpForExplicit?.animation !== undefined,
+    watermark: rawSpec.watermark !== undefined || bpForExplicit?.watermark !== undefined,
+    crosshair: rawSpec.crosshair !== undefined || bpForExplicit?.crosshair !== undefined,
+  };
+  chartSpec = { ...chartSpec, userExplicit };
+
   if (overrides?.[breakpoint]) {
     const bp = overrides[breakpoint]!;
     if (bp.chrome) {
@@ -274,14 +313,138 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
       // responsive strategy so they render inline instead of being stripped.
       strategy = { ...strategy, annotationPosition: 'inline' };
     }
+    // New override branches for sparkline mode and related fields:
+    if (bp.display !== undefined) {
+      chartSpec = {
+        ...chartSpec,
+        display: bp.display as NormalizedChartSpec['display'],
+      };
+    }
+    if (bp.encoding !== undefined) {
+      // Merge encoding so a breakpoint can flip on/off encoding.x.axis or
+      // encoding.y.axis (used by sparkline display mode to opt back in to
+      // axes at a specific breakpoint). Channels merge per-key, and `axis`
+      // and `scale` deep-merge one level so a breakpoint can set
+      // `axis: { title: 'foo' }` without dropping the base spec's
+      // `axis.tickCount` / `axis.format`.
+      const bpEnc = bp.encoding as Record<string, Record<string, unknown> | undefined>;
+      const mergedEncoding = { ...chartSpec.encoding } as Record<
+        string,
+        Record<string, unknown> | undefined
+      >;
+      const NESTED_CHANNEL_KEYS = ['axis', 'scale'];
+      for (const channel of Object.keys(bpEnc)) {
+        const baseCh = mergedEncoding[channel];
+        const bpCh = bpEnc[channel];
+        if (bpCh && baseCh) {
+          const merged: Record<string, unknown> = { ...baseCh, ...bpCh };
+          for (const key of NESTED_CHANNEL_KEYS) {
+            const baseNested = baseCh[key];
+            const bpNested = bpCh[key];
+            if (
+              baseNested &&
+              bpNested &&
+              typeof baseNested === 'object' &&
+              typeof bpNested === 'object' &&
+              !Array.isArray(baseNested) &&
+              !Array.isArray(bpNested)
+            ) {
+              merged[key] = { ...baseNested, ...bpNested };
+            }
+          }
+          mergedEncoding[channel] = merged;
+        } else if (bpCh) {
+          mergedEncoding[channel] = bpCh;
+        }
+      }
+      chartSpec = {
+        ...chartSpec,
+        encoding: mergedEncoding as unknown as NormalizedChartSpec['encoding'],
+      };
+    }
+    if (typeof bp.watermark === 'boolean') {
+      // Update the resolved watermark value used downstream. ChartSpec carries
+      // this in its normalized shape; the local `watermark` variable controls
+      // chrome computation and rendering.
+      watermark = bp.watermark;
+      chartSpec = { ...chartSpec, watermark };
+    }
+  }
+
+  // Sparkline mode: default labels off. Mark renderers draw value labels per
+  // labels.density (default 'auto'), which fills tiny sparklines with text and
+  // is never what you want. Explicit user labels at any level wins via
+  // userExplicit.labels.
+  if (chartSpec.display === 'sparkline' && !chartSpec.userExplicit.labels) {
+    chartSpec = {
+      ...chartSpec,
+      labels: { ...chartSpec.labels, density: 'none' },
+    };
   }
 
   // Resolve animation spec. Breakpoint override wins over base spec (matching
   // chrome, labels, legend, and annotation override precedence).
-  const rawAnimationSpec = ((overrides?.[breakpoint] as Record<string, unknown> | undefined)
+  // Precedence rule for sparkline mode: an explicit user animation at ANY
+  // level (top-level OR breakpoint) always wins, regardless of display mode.
+  // resolveAnimation handles the explicit-user value; the sparkline default-off
+  // behavior is applied below when no explicit value exists.
+  let rawAnimationSpec = ((overrides?.[breakpoint] as Record<string, unknown> | undefined)
     ?.animation ?? rawSpec.animation) as AnimationSpec | undefined;
+  if (rawAnimationSpec === undefined && chartSpec.display === 'sparkline') {
+    // Sparkline mode: animation defaults to false. User-explicit (top OR bp)
+    // already short-circuits this branch via userExplicit.animation.
+    rawAnimationSpec = false;
+  }
+  // Sparkline mode: when animation is on but the user didn't specify duration,
+  // bump to 1100ms so the line/area reveal feels paced rather than mechanical.
+  // The CSS override pairs this with an expo-out easing curve. AnimationConfig
+  // nests duration under `enter`, so we set it there.
+  if (
+    chartSpec.display === 'sparkline' &&
+    rawAnimationSpec !== false &&
+    rawAnimationSpec !== undefined
+  ) {
+    const SPARK_DURATION = 1100;
+    if (rawAnimationSpec === true) {
+      rawAnimationSpec = { enter: { duration: SPARK_DURATION } } as AnimationSpec;
+    } else if (typeof rawAnimationSpec === 'object') {
+      const cfg = rawAnimationSpec as { enter?: unknown; annotationDelay?: number };
+      const enter = cfg.enter;
+      if (enter === undefined || enter === true) {
+        rawAnimationSpec = {
+          ...cfg,
+          enter: { duration: SPARK_DURATION },
+        } as AnimationSpec;
+      } else if (
+        typeof enter === 'object' &&
+        enter !== null &&
+        (enter as { duration?: number }).duration === undefined
+      ) {
+        rawAnimationSpec = {
+          ...cfg,
+          enter: { ...(enter as object), duration: SPARK_DURATION },
+        } as AnimationSpec;
+      }
+    }
+  }
   const resolvedAnimation = resolveAnimation(rawAnimationSpec);
 
+  // Crosshair: explicit user value at any level wins. In sparkline mode the
+  // default is off, otherwise default is off too (crosshair is opt-in). The
+  // value is plumbed through ChartLayout so the renderer doesn't need to
+  // re-inspect the raw spec.
+  const rawCrosshair = (bpForExplicit?.crosshair ?? rawSpec.crosshair) as boolean | undefined;
+  const crosshair =
+    chartSpec.display === 'sparkline' && !chartSpec.userExplicit.crosshair
+      ? false
+      : rawCrosshair === true;
+
+  // Watermark default-off in sparkline mode unless user-explicit.
+  if (chartSpec.display === 'sparkline' && !chartSpec.userExplicit.watermark) {
+    watermark = false;
+    chartSpec = { ...chartSpec, watermark: false };
+  }
+
   // Resolve theme: merge spec-level theme with options-level overrides
   const mergedThemeConfig = options.theme
     ? { ...chartSpec.theme, ...options.theme }
@@ -365,12 +528,18 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // Arc charts (pie/donut) don't use axes or gridlines
   const isRadial = chartSpec.markType === 'arc';
 
-  // Compute axes (skip for radial charts)
+  // Compute axes (skip for radial charts).
+  // Sparkline mode skips axes by default unless the user explicitly opted into
+  // an axis on a specific channel.
+  const skipX = chartSpec.display === 'sparkline' && !chartSpec.userExplicit.xAxis;
+  const skipY = chartSpec.display === 'sparkline' && !chartSpec.userExplicit.yAxis;
   const axes = isRadial
     ? { x: undefined, y: undefined }
     : computeAxes(scales, chartArea, strategy, theme, options.measureText, {
         data: renderSpec.data,
         encoding: renderSpec.encoding as Encoding,
+        skipX,
+        skipY,
       });
 
   // INVARIANT 2 — computeGridlines mutates `axes` in place. Downstream consumers read
@@ -464,6 +633,8 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
     },
     animation: resolvedAnimation,
     watermark,
+    display: chartSpec.display,
+    crosshair,
     measureText: options.measureText,
   };
 }