@opendata-ai/openchart-engine 6.27.0 → 6.28.2

package/src/charts/line/compute.ts

@@ -30,7 +30,7 @@ import { resolveCurve } from './curves';
 // ---------------------------------------------------------------------------
 
 /** Default stroke width for line marks. */
-const DEFAULT_STROKE_WIDTH = 2.5;
+const DEFAULT_STROKE_WIDTH = 1.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. */
@@ -180,6 +180,7 @@ export function computeLineMarks(
       stroke: strokeColor,
       strokeWidth:
         styleOverride?.strokeWidth ??
+        spec.markDef.strokeWidth ??
         (spec.display === 'sparkline' ? SPARKLINE_STROKE_WIDTH : DEFAULT_STROKE_WIDTH),
       strokeDasharray,
       opacity: styleOverride?.opacity,
@@ -194,29 +195,38 @@ export function computeLineMarks(
     // Emit PointMark objects when markDef.point is truthy, or when sequential
     // color is active (points carry the gradient since SVG paths are single-color).
     const markPoint = spec.markDef.point;
-    const showPoints = markPoint === true || markPoint === 'transparent' || isSequentialColor;
+    const showPoints =
+      markPoint === true ||
+      markPoint === 'transparent' ||
+      markPoint === 'endpoints' ||
+      isSequentialColor;
 
     if (showPoints) {
       const isTransparent = markPoint === 'transparent';
+      const isEndpoints = markPoint === 'endpoints';
       // Also respect per-series showPoints override
       const seriesShowPoints = styleOverride?.showPoints !== false;
+      const lastIdx = pointsWithData.length - 1;
 
       for (let i = 0; i < pointsWithData.length; i++) {
         const p = pointsWithData[i];
-        const visible = seriesShowPoints && !isTransparent;
+        const isEndpoint = i === 0 || i === lastIdx;
+        const visible = seriesShowPoints && !isTransparent && (!isEndpoints || isEndpoint);
         // Sequential color: each point gets colored by its data value
         let pointColor = color;
         if (isSequentialColor) {
           const val = Number(p.row[sequentialColorField!]);
           pointColor = Number.isFinite(val) ? getSequentialColor(scales, val) : color;
         }
+        const hollow = isEndpoints && visible;
+        const pointColorStr = getRepresentativeColor(pointColor);
         const pointMark: PointMark = {
           type: 'point',
           cx: p.x,
           cy: p.y,
           r: visible ? DEFAULT_POINT_RADIUS : 0,
-          fill: pointColor,
-          stroke: visible ? '#ffffff' : 'transparent',
+          fill: hollow ? 'transparent' : pointColorStr,
+          stroke: hollow ? pointColorStr : visible ? '#ffffff' : 'transparent',
           strokeWidth: visible ? 1.5 : 0,
           fillOpacity: isTransparent ? 0 : 1,
           data: p.row,

package/src/compile.ts

@@ -55,6 +55,7 @@ import { computeAnnotations } from './annotations/compute';
 // registry on module load. Tests that clear the registry can import
 // `registerBuiltinRenderers` from `./charts/builtin` to restore defaults.
 import './charts/builtin';
+import { compileBarList as compileBarListImpl } from './barlist/compile-barlist';
 import {
   assignAnimationIndices,
   computeMarkObstacles,
@@ -816,7 +817,8 @@ function compileLayerIndependent(
   const theme = resolveTheme(layerSpec.theme ?? leaf1.theme);
   const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
   const rightAxisWidth = estimateYAxisLabelWidth(leaf1.data, leaf1.encoding, axisFontSize);
-  const hasRightAxisTitle = !!leaf1.encoding?.y?.axis?.title;
+  const yAxisConfig = leaf1.encoding?.y?.axis || undefined;
+  const hasRightAxisTitle = !!yAxisConfig?.title;
   const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
   const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
   const axisTitleOffset = getAxisTitleOffset(options.width);
@@ -1316,3 +1318,26 @@ export function compileTileMap(
 ): import('@opendata-ai/openchart-core').TileMapLayout {
   return compileTileMapImpl(spec, options);
 }
+
+// ---------------------------------------------------------------------------
+// BarList compilation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compile a barlist spec into a BarListLayout.
+ *
+ * Takes a raw barlist spec, validates, normalizes, resolves theme and chrome,
+ * computes row layout with proportional bars, builds tooltips, and returns
+ * a BarListLayout ready for rendering.
+ *
+ * @param spec - Raw barlist spec (validated and normalized internally).
+ * @param options - Compile options (width, height, theme, darkMode).
+ * @returns BarListLayout with computed positions and visual properties.
+ * @throws Error if spec is invalid or not a barlist type.
+ */
+export function compileBarList(
+  spec: unknown,
+  options: CompileOptions,
+): import('@opendata-ai/openchart-core').BarListLayout {
+  return compileBarListImpl(spec, options);
+}

package/src/compiler/normalize.ts

@@ -10,6 +10,7 @@
 
 import type {
   Annotation,
+  BarListSpec,
   ChartSpec,
   Chrome,
   ChromeText,
@@ -25,6 +26,7 @@ import type {
   VizSpec,
 } from '@opendata-ai/openchart-core';
 import {
+  isBarListSpec,
   isChartSpec,
   isGraphSpec,
   isLayerSpec,
@@ -34,6 +36,7 @@ import {
   resolveMarkDef,
   resolveMarkType,
 } from '@opendata-ai/openchart-core';
+import type { NormalizedBarListSpec } from '../barlist/types';
 import type { NormalizedSankeySpec } from '../sankey/types';
 import { STATE_CODE_SET } from '../tilemap/layout';
 import type { NormalizedTileMapSpec } from '../tilemap/types';
@@ -206,6 +209,7 @@ function normalizeLabels(labels?: LabelSpec): NormalizedChartSpec['labels'] {
     format: labels.format ?? '',
     prefix: labels.prefix ?? '',
     offsets: labels.offsets,
+    color: labels.color,
   };
 }
 
@@ -382,6 +386,23 @@ function normalizeTileMapSpec(spec: TileMapSpec, warnings: string[]): Normalized
   };
 }
 
+function normalizeBarListSpec(spec: BarListSpec, _warnings: string[]): NormalizedBarListSpec {
+  return {
+    type: 'barlist',
+    data: spec.data,
+    encoding: spec.encoding,
+    barHeight: spec.barHeight ?? 6,
+    cornerRadius: spec.cornerRadius ?? 'pill',
+    maxItems: spec.maxItems ?? 20,
+    chrome: normalizeChrome(spec.chrome),
+    theme: spec.theme ?? {},
+    darkMode: spec.darkMode ?? 'off',
+    watermark: spec.watermark ?? true,
+    animation: spec.animation ?? true,
+    valueFormat: spec.valueFormat,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -419,9 +440,12 @@ export function normalizeSpec(spec: VizSpec, warnings: string[] = []): Normalize
   if (isTileMapSpec(spec)) {
     return normalizeTileMapSpec(spec, warnings);
   }
+  if (isBarListSpec(spec)) {
+    return normalizeBarListSpec(spec, warnings);
+  }
   // Should never happen after validation
   throw new Error(
-    `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', type: 'sankey', or type: 'tilemap'.`,
+    `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', type: 'sankey', type: 'tilemap', or type: 'barlist'.`,
   );
 }
 

package/src/compiler/types.ts

@@ -29,6 +29,7 @@ import type {
   ScaleConfig,
   ThemeConfig,
 } from '@opendata-ai/openchart-core';
+import type { NormalizedBarListSpec } from '../barlist/types';
 import type { NormalizedSankeySpec } from '../sankey/types';
 import type { NormalizedTileMapSpec } from '../tilemap/types';
 
@@ -101,9 +102,9 @@ export interface NormalizedChartSpec {
   encoding: Encoding;
   chrome: NormalizedChrome;
   annotations: Annotation[];
-  /** Normalized label configuration with defaults applied. density, format, and prefix are always set; offsets stays optional. */
+  /** Normalized label configuration with defaults applied. density, format, and prefix are always set; offsets and color stay optional. */
   labels: Required<Pick<LabelConfig, 'density' | 'format' | 'prefix'>> &
-    Pick<LabelConfig, 'offsets'>;
+    Pick<LabelConfig, 'offsets' | 'color'>;
   /** Legend configuration (position override). */
   legend?: LegendConfig;
   responsive: boolean;
@@ -164,7 +165,8 @@ export type NormalizedSpec =
   | NormalizedTableSpec
   | NormalizedGraphSpec
   | NormalizedSankeySpec
-  | NormalizedTileMapSpec;
+  | NormalizedTileMapSpec
+  | NormalizedBarListSpec;
 
 // ---------------------------------------------------------------------------
 // Validation types

package/src/compiler/validate.ts

@@ -759,6 +759,117 @@ function validateTileMapSpec(spec: Record<string, unknown>, errors: ValidationEr
   }
 }
 
+// ---------------------------------------------------------------------------
+// BarList validation
+// ---------------------------------------------------------------------------
+
+function validateBarListSpec(spec: Record<string, unknown>, errors: ValidationError[]): void {
+  if (!Array.isArray(spec.data)) {
+    errors.push({
+      message: 'Spec error: barlist spec requires a "data" array',
+      path: 'data',
+      code: 'INVALID_TYPE',
+      suggestion:
+        'Provide data as an array of objects, e.g. data: [{ label: "Category A", value: 42 }]',
+    });
+    return;
+  }
+
+  if (spec.data.length === 0) {
+    errors.push({
+      message: 'Spec error: "data" array must be non-empty',
+      path: 'data',
+      code: 'EMPTY_DATA',
+      suggestion: 'Add at least one data row',
+    });
+    return;
+  }
+
+  const firstRow = spec.data[0] as unknown;
+  if (typeof firstRow !== 'object' || firstRow === null || Array.isArray(firstRow)) {
+    errors.push({
+      message: 'Spec error: each item in "data" must be a plain object',
+      path: 'data[0]',
+      code: 'INVALID_TYPE',
+      suggestion: 'Each data item should be an object, e.g. { label: "Category A", value: 42 }',
+    });
+    return;
+  }
+
+  if (!spec.encoding || typeof spec.encoding !== 'object') {
+    errors.push({
+      message:
+        'Spec error: barlist spec requires an "encoding" object with label and value channels',
+      path: 'encoding',
+      code: 'MISSING_FIELD',
+      suggestion:
+        'Add an encoding object, e.g. encoding: { label: { field: "name", type: "nominal" }, value: { field: "count", type: "quantitative" } }',
+    });
+    return;
+  }
+
+  const encoding = spec.encoding as Record<string, unknown>;
+  const dataColumns = new Set(Object.keys(firstRow as Record<string, unknown>));
+  const availableColumns = [...dataColumns].join(', ');
+
+  for (const channel of ['label', 'value'] as const) {
+    const ch = encoding[channel] as Record<string, unknown> | undefined;
+    if (!ch || typeof ch !== 'object') {
+      errors.push({
+        message: `Spec error: barlist encoding requires "${channel}" channel`,
+        path: `encoding.${channel}`,
+        code: 'MISSING_FIELD',
+        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? 'myField'}", type: "${channel === 'value' ? 'quantitative' : 'nominal'}" }`,
+      });
+      continue;
+    }
+
+    if (!ch.field || typeof ch.field !== 'string') {
+      errors.push({
+        message: `Spec error: encoding.${channel} must have a "field" string`,
+        path: `encoding.${channel}.field`,
+        code: 'MISSING_FIELD',
+        suggestion: `Add a field name from your data columns: ${availableColumns}`,
+      });
+      continue;
+    }
+
+    if (!dataColumns.has(ch.field as string)) {
+      errors.push({
+        message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
+        path: `encoding.${channel}.field`,
+        code: 'DATA_FIELD_MISSING',
+        suggestion: `Use one of the available data columns: ${availableColumns}`,
+      });
+    }
+  }
+
+  // Validate optional encoding channels
+  for (const channel of ['subtitle', 'color', 'tooltip'] as const) {
+    const ch = encoding[channel] as Record<string, unknown> | undefined;
+    if (!ch) continue;
+    const field = ch.field;
+    if (field && typeof field === 'string' && !dataColumns.has(field)) {
+      errors.push({
+        message: `Spec error: encoding.${channel}.field "${field}" does not exist in data. Available columns: ${availableColumns}`,
+        path: `encoding.${channel}.field`,
+        code: 'DATA_FIELD_MISSING',
+        suggestion: `Use one of the available data columns: ${availableColumns}`,
+      });
+    }
+  }
+
+  if (spec.darkMode !== undefined && !VALID_DARK_MODES.has(spec.darkMode as string)) {
+    errors.push({
+      message: 'Spec error: darkMode must be "auto", "force", or "off"',
+      path: 'darkMode',
+      code: 'INVALID_VALUE',
+      suggestion:
+        'Use one of: "auto" (system preference), "force" (always dark), or "off" (always light)',
+    });
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Layer validation
 // ---------------------------------------------------------------------------
@@ -897,19 +1008,21 @@ export function validateSpec(spec: unknown): ValidationResult {
   const isGraph = obj.type === 'graph';
   const isSankey = obj.type === 'sankey';
   const isTileMap = obj.type === 'tilemap';
-  const isLayer = hasLayer && !isTable && !isGraph && !isSankey && !isTileMap;
-  const isChart = hasMark && !hasLayer && !isTable && !isGraph && !isSankey && !isTileMap;
+  const isBarList = obj.type === 'barlist';
+  const isLayer = hasLayer && !isTable && !isGraph && !isSankey && !isTileMap && !isBarList;
+  const isChart =
+    hasMark && !hasLayer && !isTable && !isGraph && !isSankey && !isTileMap && !isBarList;
 
-  if (!isChart && !isTable && !isGraph && !isSankey && !isTileMap && !isLayer) {
+  if (!isChart && !isTable && !isGraph && !isSankey && !isTileMap && !isBarList && !isLayer) {
     return {
       valid: false,
       errors: [
         {
           message:
-            'Spec error: spec must have a "mark" field for charts, a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap',
+            'Spec error: spec must have a "mark" field for charts, a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap/barlist',
           path: 'mark',
           code: 'MISSING_FIELD',
-          suggestion: `Add a "mark" field for charts (e.g. mark: "bar"), a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap (type: "table", type: "graph", type: "sankey", or type: "tilemap"). Valid mark types: ${[...MARK_TYPES].join(', ')}`,
+          suggestion: `Add a "mark" field for charts (e.g. mark: "bar"), a "layer" array for layered charts, or a "type" field (type: "table", type: "graph", type: "sankey", type: "tilemap", or type: "barlist"). Valid mark types: ${[...MARK_TYPES].join(', ')}`,
         },
       ],
       normalized: null,
@@ -956,6 +1069,8 @@ export function validateSpec(spec: unknown): ValidationResult {
     validateSankeySpec(obj, errors);
   } else if (isTileMap) {
     validateTileMapSpec(obj, errors);
+  } else if (isBarList) {
+    validateBarListSpec(obj, errors);
   }
 
   if (errors.length > 0) {

package/src/index.ts

@@ -13,6 +13,7 @@
 // ---------------------------------------------------------------------------
 
 export {
+  compileBarList,
   compileChart,
   compileGraph,
   compileLayer,
@@ -48,6 +49,8 @@ export type { NormalizedSankeySpec } from './sankey/types';
 // TileMap compilation types
 // ---------------------------------------------------------------------------
 
+export type { NormalizedBarListSpec } from './barlist/types';
+
 export type { NormalizedTileMapSpec } from './tilemap/types';
 
 // ---------------------------------------------------------------------------
@@ -102,6 +105,8 @@ export {
 // ---------------------------------------------------------------------------
 
 export type {
+  BarListLayout,
+  BarListSpec,
   ChartLayout,
   ChartSpec,
   CompileOptions,

package/src/layout/axes/ticks.ts

@@ -38,13 +38,18 @@ import type { D3CategoricalScale, D3ContinuousScale, ResolvedScale } from '../sc
  * "full" is the publication-ready default; "reduced" and "minimal" step down as the
  * responsive breakpoint system shifts to smaller containers.
  *
+ * Y full is set to 40px/tick (tighter than Observable Plot's 50) because chart areas
+ * are measured after chrome subtraction. A 400px container with title+subtitle leaves
+ * ~270px of chart area; 55px/tick would only produce 4 ticks. 40px/tick reaches 5-6
+ * on typical chart areas (150-300px) and the overlap check acts as a safety net.
+ *
  * @internal — these are tuning constants, not part of the configuration API.
  * Consumers should configure tick density through `axis.tickCount` on the spec.
  */
 const Y_PX_PER_TICK: Record<AxisLabelDensity, number> = {
-  full: 55,
-  reduced: 90,
-  minimal: 140,
+  full: 40,
+  reduced: 70,
+  minimal: 120,
 };
 
 const X_PX_PER_TICK: Record<AxisLabelDensity, number> = {
@@ -125,7 +130,8 @@ const TEMPORAL_SCALE_TYPES = new Set(['time', 'utc']);
 
 /** Format a tick value based on the scale type. */
 function formatTickLabel(value: unknown, resolvedScale: ResolvedScale): string {
-  const formatStr = resolvedScale.channel.axis?.format;
+  const axisConfig = resolvedScale.channel.axis || undefined;
+  const formatStr = axisConfig?.format;
 
   if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
     const temporalFmt = buildTemporalFormatter(formatStr);
@@ -174,8 +180,8 @@ export function continuousTicks(
     }));
   }
 
-  const explicitCount = resolvedScale.channel.axis?.tickCount;
-  const count = explicitCount ?? targetCount ?? TICK_COUNTS[density];
+  const axCfg = resolvedScale.channel.axis || undefined;
+  const count = axCfg?.tickCount ?? targetCount ?? TICK_COUNTS[density];
   return buildContinuousTicks(resolvedScale, count);
 }
 
@@ -194,7 +200,29 @@ export function buildContinuousTicks(resolvedScale: ResolvedScale, count: number
     return continuousTicks(resolvedScale, 'full');
   }
   const raw: unknown[] = scale.ticks(count);
-  return raw.map((value: unknown) => ({
+
+  // D3 log scales ignore the count hint and return ticks at every sub-power
+  // position (e.g. 5, 6, 7, 8, 9, 10, 20, 30... for a domain of [5, 25000]).
+  // Filter down to powers of the base only when the raw set overshoots.
+  let ticks = raw;
+  if (resolvedScale.type === 'log' && raw.length > count) {
+    const base = resolvedScale.channel.scale?.base ?? 10;
+    const logBase = Math.log(base);
+    const powered = raw.filter((v) => {
+      const n = v as number;
+      if (n <= 0) return false;
+      const exp = Math.log(n) / logBase;
+      return Math.abs(exp - Math.round(exp)) < 1e-9;
+    });
+    // Only use the filtered set if it has at least 2 ticks; otherwise fall back
+    // to raw ticks. This handles domains like [5, 9] (no powers of 10 at all) or
+    // [5, 50] (only one power: 10) where filtering would leave too few meaningful ticks.
+    if (powered.length >= 2) {
+      ticks = powered;
+    }
+  }
+
+  return ticks.map((value: unknown) => ({
     value,
     position: scale(value as number & Date) as number,
     label: formatTickLabel(value, resolvedScale),
@@ -230,7 +258,8 @@ export function categoricalTicks(
 ): AxisTick[] {
   const scale = resolvedScale.scale as D3CategoricalScale;
   const domain: string[] = scale.domain();
-  const explicitTickCount = resolvedScale.channel.axis?.tickCount;
+  const catAxisCfg = resolvedScale.channel.axis || undefined;
+  const explicitTickCount = catAxisCfg?.tickCount;
 
   let selectedValues = domain;
 

package/src/layout/axes.ts

@@ -44,9 +44,16 @@ export { thinTicksUntilFit, ticksOverlap } from './axes/thinning';
  * Below these pixel heights, we step down the density regardless of the
  * width-based strategy. This prevents overlapping y-axis labels in short
  * containers like thumbnail previews.
+ *
+ * These thresholds apply to the chart area height (after chrome/margins),
+ * not the total container height. A 400px container with title+subtitle
+ * leaves ~270px of chart area; a 320px container leaves ~186px. The old
+ * HEIGHT_REDUCED_THRESHOLD of 200 kicked in on nearly every common chart
+ * size, producing only 3 ticks. Lowering to 100 keeps 'full' density for
+ * all but the most compact thumbnail-style containers.
  */
-const HEIGHT_MINIMAL_THRESHOLD = 120;
-const HEIGHT_REDUCED_THRESHOLD = 200;
+const HEIGHT_MINIMAL_THRESHOLD = 80;
+const HEIGHT_REDUCED_THRESHOLD = 100;
 
 /**
  * Width thresholds for reducing x-axis tick density.
@@ -264,7 +271,7 @@ export function computeAxes(
   const { fontSize } = tickLabelStyle;
   const { fontWeight } = tickLabelStyle;
 
-  if (scales.x && !dataContext?.skipX) {
+  if (scales.x && !dataContext?.skipX && scales.x.channel.axis !== false) {
     const axisConfig = scales.x.channel.axis;
     const isContinuousX =
       scales.x.type !== 'band' && scales.x.type !== 'point' && scales.x.type !== 'ordinal';
@@ -366,7 +373,7 @@ export function computeAxes(
     };
   }
 
-  if (scales.y && !dataContext?.skipY) {
+  if (scales.y && !dataContext?.skipY && scales.y.channel.axis !== false) {
     const axisConfig = scales.y.channel.axis;
     const isContinuousY =
       scales.y.type !== 'band' && scales.y.type !== 'point' && scales.y.type !== 'ordinal';

package/src/layout/dimensions.ts

@@ -114,7 +114,9 @@ function getMinChartDims(display: import('@opendata-ai/openchart-core').Display)
  */
 function getSparklinePad(spec: NormalizedChartSpec): number {
   const strokeWidth = (spec.markDef as { strokeWidth?: number }).strokeWidth ?? 2;
-  return Math.max(strokeWidth / 2 + 1, 2);
+  const hasPoints = !!(spec.markDef as { point?: unknown }).point;
+  const pointRadius = hasPoints ? 3 : 0;
+  return Math.max(strokeWidth / 2 + 1, pointRadius + 1, 2);
 }
 
 // ---------------------------------------------------------------------------
@@ -222,12 +224,15 @@ export function computeDimensions(
   // Estimate x-axis height below chart area: tick labels sit 14px below,
   // axis title sits 35px below. These extend past the chart area bottom
   // and source/footer chrome must be positioned below them.
-  const xAxis = encoding.x?.axis as (Record<string, unknown> & { labelAngle?: number }) | undefined;
+  const xAxisSuppressed = encoding.x?.axis === false;
+  const xAxis = (!xAxisSuppressed && encoding.x?.axis) as
+    | (Record<string, unknown> & { labelAngle?: number })
+    | undefined;
   const hasXAxisLabel = !!xAxis?.title;
   const xTickAngle = xAxis?.labelAngle;
 
   let xAxisHeight: number;
-  if (isRadial) {
+  if (isRadial || xAxisSuppressed) {
     xAxisHeight = 0;
   } else if (xTickAngle && Math.abs(xTickAngle) > 10) {
     // Rotated labels: estimate height from the longest label text.
@@ -339,7 +344,8 @@ export function computeDimensions(
   }
 
   // Dynamic left margin for y-axis labels
-  if (encoding.y && !isRadial) {
+  const yAxisSuppressed = encoding.y?.axis === false;
+  if (encoding.y && !isRadial && !yAxisSuppressed) {
     if (
       spec.markType === 'bar' ||
       spec.markType === 'circle' ||

package/src/layout/scales.ts

@@ -256,6 +256,16 @@ function buildLinearScale(
 
   if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
+
+    // nice() can round the domain min down to 0 even when zero: false.
+    // Re-nice with more ticks to tighten the domain around the data range.
+    if (channel.scale?.zero === false) {
+      const [nicedMin, nicedMax] = scale.domain();
+      if (nicedMin < domainMin || nicedMax > domainMax) {
+        scale.domain([domainMin, domainMax]);
+        scale.nice(20);
+      }
+    }
   }
   applyContinuousConfig(scale, channel);
 

package/src/legend/wrap.ts

@@ -32,7 +32,7 @@ export const ENTRY_GAP = 16;
 export const ENTRY_GAP_COMPACT = 10;
 
 /** Default gap between legend bounds and chart area. Zero on narrow viewports. */
-export const LEGEND_GAP = 4;
+export const LEGEND_GAP = 8;
 
 /** Gap between legend and chart area, responsive to container width. */
 export function legendGap(width: number): number {

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

@@ -112,7 +112,7 @@ describe('compileTileMap', () => {
     }
   });
 
-  it('data tiles have fill colors from the sequential palette', () => {
+  it('data tiles use opacity-based encoding with a single base color', () => {
     const result = compileTileMap(basicSpec, defaultOptions);
 
     const dataTiles = result.tiles.filter((t) => t.hasData);
@@ -122,7 +122,10 @@ describe('compileTileMap', () => {
     }
 
     const fills = new Set(dataTiles.map((t) => t.fill));
-    expect(fills.size).toBeGreaterThan(1);
+    expect(fills.size).toBe(1);
+
+    const opacities = new Set(dataTiles.map((t) => t.fillOpacity));
+    expect(opacities.size).toBeGreaterThan(1);
   });
 
   it('compiles tabular DataRow[] data with encoding', () => {