@opendata-ai/openchart-engine 6.9.0 → 6.11.0

package/package.json

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

package/src/charts/bar/__tests__/compute.test.ts

@@ -203,6 +203,98 @@ describe('computeBarMarks', () => {
     });
   });
 
+  describe('grouped bars (stack: null)', () => {
+    function makeDodgedBarSpec(): NormalizedChartSpec {
+      const spec = makeGroupedBarSpec();
+      (spec.encoding.x as { stack?: boolean | null }).stack = null;
+      return spec;
+    }
+
+    it('produces marks for all data rows', () => {
+      const spec = makeDodgedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      expect(marks).toHaveLength(6);
+    });
+
+    it('grouped bars within a category have different y positions', () => {
+      const spec = makeDodgedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const q1East = marks.find(
+        (m) => m.aria.label.includes('Q1') && m.aria.label.includes('East'),
+      )!;
+      const q1West = marks.find(
+        (m) => m.aria.label.includes('Q1') && m.aria.label.includes('West'),
+      )!;
+
+      expect(q1East.y).not.toBe(q1West.y);
+    });
+
+    it('grouped bars all start from baseline (not cumulative)', () => {
+      const spec = makeDodgedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const q1East = marks.find(
+        (m) => m.aria.label.includes('Q1') && m.aria.label.includes('East'),
+      )!;
+      const q1West = marks.find(
+        (m) => m.aria.label.includes('Q1') && m.aria.label.includes('West'),
+      )!;
+
+      // Both bars start at the same x position (baseline)
+      expect(q1East.x).toBe(q1West.x);
+    });
+
+    it('grouped bars have cornerRadius 2', () => {
+      const spec = makeDodgedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      for (const mark of marks) {
+        expect(mark.cornerRadius).toBe(2);
+      }
+    });
+
+    it('grouped bars do not set stackGroup', () => {
+      const spec = makeDodgedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      for (const mark of marks) {
+        expect(mark.stackGroup).toBeUndefined();
+      }
+    });
+
+    it('sub-band heights are smaller than full bandwidth', () => {
+      const spec = makeDodgedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      // With 2 groups, each sub-bar should be less than the full bandwidth
+      const stackedSpec = makeGroupedBarSpec();
+      const stackedScales = computeScales(stackedSpec, chartArea, stackedSpec.data);
+      const stackedMarks = computeBarMarks(stackedSpec, stackedScales, chartArea, fullStrategy);
+
+      expect(marks[0].height).toBeLessThan(stackedMarks[0].height);
+      expect(marks[0].height).toBeGreaterThan(0);
+    });
+
+    it('scale domain covers max individual value, not stacked sum', () => {
+      const spec = makeDodgedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+
+      // Max individual value is 70 (Q3 West), not 115 (Q3 stacked sum)
+      const xScale = scales.x!.scale;
+      const domain = xScale.domain() as number[];
+      // Domain should not extend to the stacked sum (115)
+      expect(domain[1]).toBeLessThanOrEqual(80); // some nice rounding above 70
+    });
+  });
+
   describe('colored (non-stacked) bars', () => {
     it('renders colored bars when each category has one row with color encoding', () => {
       const spec: NormalizedChartSpec = {

package/src/charts/bar/compute.ts

@@ -10,12 +10,13 @@ import type {
   ConditionalValueDef,
   DataRow,
   Encoding,
+  GradientDef,
   LayoutStrategy,
   MarkAria,
   Rect,
   RectMark,
 } from '@opendata-ai/openchart-core';
-import { abbreviateNumber, formatNumber } from '@opendata-ai/openchart-core';
+import { abbreviateNumber, formatNumber, isGradientDef } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
@@ -99,6 +100,22 @@ export function computeBarMarks(
   const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
 
   if (needsStacking) {
+    const stackDisabled = xChannel.stack === null || xChannel.stack === false;
+
+    if (stackDisabled) {
+      return computeGroupedBars(
+        spec.data,
+        xChannel.field,
+        yChannel.field,
+        colorField,
+        xScale,
+        yScale,
+        bandwidth,
+        baseline,
+        scales,
+      );
+    }
+
     return computeStackedBars(
       spec.data,
       xChannel.field,
@@ -184,6 +201,73 @@ function computeStackedBars(
   return marks;
 }
 
+/** Compute grouped (dodged) horizontal bars -- side-by-side within each category band. */
+function computeGroupedBars(
+  data: DataRow[],
+  valueField: string,
+  categoryField: string,
+  colorField: string,
+  xScale: ScaleLinear<number, number>,
+  yScale: ScaleBand<string>,
+  bandwidth: number,
+  baseline: number,
+  scales: ResolvedScales,
+): RectMark[] {
+  const marks: RectMark[] = [];
+  const categoryGroups = groupByField(data, categoryField);
+
+  // Build a stable group order from first appearance in data (Map for O(1) lookup)
+  const groupIndexMap = new Map<string, number>();
+  for (const row of data) {
+    const key = String(row[colorField] ?? '');
+    if (!groupIndexMap.has(key)) {
+      groupIndexMap.set(key, groupIndexMap.size);
+    }
+  }
+  const groupCount = groupIndexMap.size;
+  if (groupCount === 0) return marks;
+
+  // Subdivide the band height by group count with a small gap
+  const gap = Math.min(1, bandwidth * 0.05);
+  const subBandHeight = Math.max((bandwidth - gap * (groupCount - 1)) / groupCount, MIN_BAR_WIDTH);
+
+  for (const [category, rows] of categoryGroups) {
+    const bandY = yScale(category);
+    if (bandY === undefined) continue;
+
+    for (const row of rows) {
+      const groupKey = String(row[colorField] ?? '');
+      const value = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(value)) continue;
+
+      const groupIndex = groupIndexMap.get(groupKey) ?? 0;
+      const color = getColor(scales, groupKey);
+      const xPos = value >= 0 ? baseline : xScale(value);
+      const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
+      const subY = bandY + groupIndex * (subBandHeight + gap);
+
+      const aria: MarkAria = {
+        label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+      };
+
+      marks.push({
+        type: 'rect',
+        x: xPos,
+        y: subY,
+        width: barWidth,
+        height: subBandHeight,
+        fill: color,
+        cornerRadius: 2,
+        data: row as Record<string, unknown>,
+        aria,
+        orient: 'horizontal',
+      });
+    }
+  }
+
+  return marks;
+}
+
 /** Compute colored (non-stacked) horizontal bars. Used when color encoding
  *  is present but each category has only one row (e.g., diverging charts). */
 function computeColoredBars(
@@ -256,11 +340,14 @@ function computeSimpleBars(
     const bandY = yScale(category);
     if (bandY === undefined) continue;
 
-    let color: string;
+    let color: string | GradientDef;
     if (conditionalColor) {
-      color = String(
-        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, '__default__'),
-      );
+      const resolved = resolveConditionalValue(row, conditionalColor);
+      if (resolved != null) {
+        color = isGradientDef(resolved) ? resolved : String(resolved);
+      } else {
+        color = getColor(scales, '__default__');
+      }
     } else if (sequentialColor) {
       color = getSequentialColor(scales, value);
     } else {

package/src/charts/bar/labels.ts

@@ -20,6 +20,7 @@ import type {
 import {
   buildD3Formatter,
   estimateTextWidth,
+  getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
 
@@ -141,7 +142,7 @@ export function computeBarLabels(
     } else {
       // Outside: just past the bar's right edge
       anchorX = mark.x + mark.width + LABEL_PADDING;
-      fill = mark.fill;
+      fill = getRepresentativeColor(mark.fill);
       textAnchor = 'start';
     }
 

package/src/charts/column/__tests__/compute.test.ts

@@ -187,6 +187,72 @@ describe('computeColumnMarks', () => {
     });
   });
 
+  describe('grouped columns (stack: null)', () => {
+    function makeDodgedColumnSpec(): NormalizedChartSpec {
+      const spec = makeGroupedColumnSpec();
+      (spec.encoding.y as { stack?: boolean | null }).stack = null;
+      return spec;
+    }
+
+    it('produces marks for all data rows', () => {
+      const spec = makeDodgedColumnSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+      expect(marks).toHaveLength(6);
+    });
+
+    it('grouped columns within a category have different x positions', () => {
+      const spec = makeDodgedColumnSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+      const janNorth = marks.find(
+        (m) => m.aria.label.includes('Jan') && m.aria.label.includes('North'),
+      )!;
+      const janSouth = marks.find(
+        (m) => m.aria.label.includes('Jan') && m.aria.label.includes('South'),
+      )!;
+
+      expect(janNorth.x).not.toBe(janSouth.x);
+    });
+
+    it('grouped columns have subdivided widths', () => {
+      const spec = makeDodgedColumnSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+      // With 2 groups, each sub-column should be narrower than full bandwidth
+      const stackedSpec = makeGroupedColumnSpec();
+      const stackedScales = computeScales(stackedSpec, chartArea, stackedSpec.data);
+      const stackedMarks = computeColumnMarks(stackedSpec, stackedScales, chartArea, fullStrategy);
+
+      expect(marks[0].width).toBeLessThan(stackedMarks[0].width);
+      expect(marks[0].width).toBeGreaterThan(0);
+    });
+
+    it('grouped columns have cornerRadius 2 and no stackGroup', () => {
+      const spec = makeDodgedColumnSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+      for (const mark of marks) {
+        expect(mark.cornerRadius).toBe(2);
+        expect(mark.stackGroup).toBeUndefined();
+      }
+    });
+
+    it('scale domain covers max individual value, not stacked sum', () => {
+      const spec = makeDodgedColumnSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+
+      // Max individual value is 150 (Mar North), not 280 (Mar stacked sum)
+      const yScale = scales.y!.scale;
+      const domain = yScale.domain() as number[];
+      expect(domain[1]).toBeLessThanOrEqual(170); // some nice rounding above 150
+    });
+  });
+
   describe('negative values', () => {
     it('negative columns extend downward from baseline', () => {
       const spec = makeNegativeColumnSpec();

package/src/charts/column/compute.ts

@@ -3,7 +3,8 @@
  *
  * Takes a normalized chart spec with resolved scales and produces
  * RectMark[] for rendering vertical columns. When a color encoding
- * is present, columns are stacked (cumulative heights per category).
+ * is present, columns are either stacked (cumulative heights) or grouped
+ * (side-by-side) based on the `stack` property of the quantitative channel.
  *
  * Shares conceptual logic with bar chart but axes are swapped:
  * x-axis is categorical (band scale), y-axis is quantitative.
@@ -13,12 +14,13 @@ import type {
   ConditionalValueDef,
   DataRow,
   Encoding,
+  GradientDef,
   LayoutStrategy,
   MarkAria,
   Rect,
   RectMark,
 } from '@opendata-ai/openchart-core';
-import { abbreviateNumber, formatNumber } from '@opendata-ai/openchart-core';
+import { abbreviateNumber, formatNumber, isGradientDef } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -88,6 +90,22 @@ export function computeColumnMarks(
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
 
     if (needsStacking) {
+      const stackDisabled = yChannel.stack === null || yChannel.stack === false;
+
+      if (stackDisabled) {
+        return computeGroupedColumns(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales,
+        );
+      }
+
       return computeStackedColumns(
         spec.data,
         xChannel.field,
@@ -152,11 +170,14 @@ function computeSimpleColumns(
     const bandX = xScale(category);
     if (bandX === undefined) continue;
 
-    let color: string;
+    let color: string | GradientDef;
     if (conditionalColor) {
-      color = String(
-        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, '__default__'),
-      );
+      const resolved = resolveConditionalValue(row, conditionalColor);
+      if (resolved != null) {
+        color = isGradientDef(resolved) ? resolved : String(resolved);
+      } else {
+        color = getColor(scales, '__default__');
+      }
     } else if (sequentialColor) {
       color = getSequentialColor(scales, value);
     } else {
@@ -241,6 +262,77 @@ function computeColoredColumns(
   return marks;
 }
 
+/** Compute grouped (dodged) vertical columns -- side-by-side within each category band. */
+function computeGroupedColumns(
+  data: DataRow[],
+  categoryField: string,
+  valueField: string,
+  colorField: string,
+  xScale: ScaleBand<string>,
+  yScale: ScaleLinear<number, number>,
+  bandwidth: number,
+  baseline: number,
+  scales: ResolvedScales,
+): RectMark[] {
+  const marks: RectMark[] = [];
+  const categoryGroups = groupByField(data, categoryField);
+
+  // Build a stable group order from first appearance in data (Map for O(1) lookup)
+  const groupIndexMap = new Map<string, number>();
+  for (const row of data) {
+    const key = String(row[colorField] ?? '');
+    if (!groupIndexMap.has(key)) {
+      groupIndexMap.set(key, groupIndexMap.size);
+    }
+  }
+  const groupCount = groupIndexMap.size;
+  if (groupCount === 0) return marks;
+
+  // Subdivide the band width by group count with a small gap
+  const gap = Math.min(1, bandwidth * 0.05);
+  const subBandWidth = Math.max(
+    (bandwidth - gap * (groupCount - 1)) / groupCount,
+    MIN_COLUMN_HEIGHT,
+  );
+
+  for (const [category, rows] of categoryGroups) {
+    const bandX = xScale(category);
+    if (bandX === undefined) continue;
+
+    for (const row of rows) {
+      const groupKey = String(row[colorField] ?? '');
+      const value = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(value)) continue;
+
+      const groupIndex = groupIndexMap.get(groupKey) ?? 0;
+      const color = getColor(scales, groupKey);
+      const yPos = yScale(value);
+      const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
+      const y = value >= 0 ? yPos : baseline;
+      const subX = bandX + groupIndex * (subBandWidth + gap);
+
+      const aria: MarkAria = {
+        label: `${category}, ${groupKey}: ${formatColumnValue(value)}`,
+      };
+
+      marks.push({
+        type: 'rect',
+        x: subX,
+        y,
+        width: subBandWidth,
+        height: columnHeight,
+        fill: color,
+        cornerRadius: 2,
+        data: row as Record<string, unknown>,
+        aria,
+        orient: 'vertical',
+      });
+    }
+  }
+
+  return marks;
+}
+
 /** Compute stacked vertical columns. */
 function computeStackedColumns(
   data: DataRow[],

package/src/charts/column/labels.ts

@@ -20,6 +20,7 @@ import type {
 import {
   buildD3Formatter,
   estimateTextWidth,
+  getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
 
@@ -99,7 +100,7 @@ export function computeColumnLabels(
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: LABEL_FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
-        fill: mark.fill,
+        fill: getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'middle',
         dominantBaseline: isNegative ? 'hanging' : 'auto',

package/src/charts/dot/labels.ts

@@ -17,7 +17,11 @@ import type {
   Rect,
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
-import { estimateTextWidth, resolveCollisions } from '@opendata-ai/openchart-core';
+import {
+  estimateTextWidth,
+  getRepresentativeColor,
+  resolveCollisions,
+} from '@opendata-ai/openchart-core';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -74,7 +78,7 @@ export function computeDotLabels(
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: LABEL_FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
-        fill: mark.fill,
+        fill: getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'start',
         dominantBaseline: 'central',

package/src/charts/line/area.ts

@@ -7,6 +7,7 @@
  */
 
 import type { AreaMark, DataRow, Encoding, MarkAria, Rect } from '@opendata-ai/openchart-core';
+import { getRepresentativeColor } from '@opendata-ai/openchart-core';
 import type { ScaleLinear } from 'd3-scale';
 import { area, line, stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
 
@@ -122,7 +123,7 @@ function computeSingleArea(
       topPath: topPathStr,
       fill: color,
       fillOpacity: DEFAULT_FILL_OPACITY,
-      stroke: color,
+      stroke: getRepresentativeColor(color),
       strokeWidth: 2,
       seriesKey: seriesKey === '__default__' ? undefined : seriesKey,
       data: validPoints.map((p) => p.row),
@@ -258,7 +259,7 @@ function computeStackedArea(
       topPath: topPathStr,
       fill: color,
       fillOpacity: 0.7, // Higher opacity for stacked so layers are visible
-      stroke: color,
+      stroke: getRepresentativeColor(color),
       strokeWidth: 1,
       seriesKey,
       data: layer.map((d) => {

package/src/charts/line/compute.ts

@@ -10,12 +10,14 @@
 import type {
   DataRow,
   Encoding,
+  GradientDef,
   LayoutStrategy,
   LineMark,
   MarkAria,
   PointMark,
   Rect,
 } from '@opendata-ai/openchart-core';
+import { getRepresentativeColor } from '@opendata-ai/openchart-core';
 import { line } from 'd3-shape';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
@@ -68,9 +70,10 @@ export function computeLineMarks(
 
   for (const [seriesKey, rows] of groups) {
     // For sequential color, use a mid-range color for the line stroke
-    const color = isSequentialColor
+    const color: string | GradientDef = isSequentialColor
       ? getSequentialColor(scales, _getMidValue(rows, sequentialColorField!))
       : getColor(scales, seriesKey);
+    const strokeColor = getRepresentativeColor(color);
 
     // Sort rows by x-axis field so lines draw left-to-right
     const sortedRows = sortByField(rows, xChannel.field);
@@ -165,7 +168,7 @@ export function computeLineMarks(
       type: 'line',
       points: allPoints,
       path: combinedPath,
-      stroke: color,
+      stroke: strokeColor,
       strokeWidth: styleOverride?.strokeWidth ?? DEFAULT_STROKE_WIDTH,
       strokeDasharray,
       opacity: styleOverride?.opacity,

package/src/charts/pie/compute.ts

@@ -8,17 +8,21 @@
 
 import type {
   ArcMark,
+  ConditionalValueDef,
   DataRow,
   Encoding,
+  GradientDef,
   LayoutStrategy,
   MarkAria,
   Rect,
 } from '@opendata-ai/openchart-core';
+import { isConditionalDef, isGradientDef } from '@opendata-ai/openchart-core';
 import type { PieArcDatum } from 'd3-shape';
 import { arc as d3Arc, pie as d3Pie } from 'd3-shape';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
+import { resolveConditionalValue } from '../../transforms/conditional';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -109,6 +113,10 @@ export function computePieMarks(
   const valueChannel = encoding.y ?? encoding.x;
   const categoryField =
     encoding.color && 'field' in encoding.color ? encoding.color.field : undefined;
+  const conditionalColor =
+    encoding.color && isConditionalDef(encoding.color)
+      ? (encoding.color as ConditionalValueDef)
+      : undefined;
 
   if (!valueChannel) return [];
 
@@ -190,9 +198,22 @@ export function computePieMarks(
     const arcDatum = arcs[i];
     const slice = arcDatum.data;
 
-    // Get color from scale or default palette
-    let color: string;
-    if (scales.color && categoryField) {
+    // Get color: conditional (supports gradients) > scale > default palette
+    let color: string | GradientDef;
+    if (conditionalColor) {
+      const resolved = resolveConditionalValue(
+        slice.originalRow as Record<string, unknown>,
+        conditionalColor,
+      );
+      if (resolved != null) {
+        color = isGradientDef(resolved) ? resolved : String(resolved);
+      } else if (scales.color && categoryField) {
+        const colorScale = scales.color.scale as (v: string) => string;
+        color = colorScale(slice.label);
+      } else {
+        color = DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
+      }
+    } else if (scales.color && categoryField) {
       const colorScale = scales.color.scale as (v: string) => string;
       color = colorScale(slice.label);
     } else {

package/src/charts/rule/index.ts

@@ -7,6 +7,7 @@
  */
 
 import type { Encoding, Mark, MarkAria, Rect, RuleMarkLayout } from '@opendata-ai/openchart-core';
+import { getRepresentativeColor } from '@opendata-ai/openchart-core';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -84,9 +85,11 @@ export function computeRuleMarks(
       if (y2Val != null) y2 = y2Val;
     }
 
-    const color = colorField
-      ? getColor(scales, String(row[colorField] ?? '__default__'))
-      : getColor(scales, '__default__');
+    const color = getRepresentativeColor(
+      colorField
+        ? getColor(scales, String(row[colorField] ?? '__default__'))
+        : getColor(scales, '__default__'),
+    );
 
     const strokeDashEncoding =
       encoding.strokeDash && 'field' in encoding.strokeDash ? encoding.strokeDash : undefined;

package/src/charts/scatter/compute.ts

@@ -10,6 +10,7 @@
 import type {
   Encoding,
   FieldType,
+  GradientDef,
   LayoutStrategy,
   MarkAria,
   PointMark,
@@ -139,7 +140,7 @@ export function computeScatterMarks(
     if (cx === undefined || cy === undefined) continue;
 
     const category = colorField && !isSequentialColor ? String(row[colorField] ?? '') : undefined;
-    let color: string;
+    let color: string | GradientDef;
     if (isSequentialColor && colorField) {
       const val = Number(row[colorField]);
       color = Number.isFinite(val)