@opendata-ai/openchart-engine 6.23.1 → 6.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.23.1",
+  "version": "6.24.1",
   "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.23.1",
+    "@opendata-ai/openchart-core": "6.24.1",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/axes.test.ts

@@ -418,7 +418,7 @@ describe('text-aware tick density', () => {
     expect(axesNarrow.x!.ticks.length).toBeLessThanOrEqual(axesWide.x!.ticks.length);
   });
 
-  it('does not thin x-axis ticks when explicit tickCount is set', () => {
+  it('still thins x-axis ticks when tickCount is set but D3 overshoots', () => {
     const narrowArea = { x: 50, y: 50, width: 200, height: 300 };
     const specWithTickCount: NormalizedChartSpec = {
       ...lineSpec,
@@ -431,12 +431,33 @@ describe('text-aware tick density', () => {
     const scales = computeScales(specWithTickCount, narrowArea, specWithTickCount.data);
     const axes = computeAxes(scales, narrowArea, fullStrategy, theme);
 
-    // With explicit tickCount, the engine should not thin
-    // D3 may return fewer than 8 for this small dataset, but the point is
-    // thinTicksUntilFit should not be called
+    // tickCount is advisory for D3 - if it overshoots, thinning still applies
+    // to prevent overlap. The result should still have ticks, just not more
+    // than the narrow area can display without overlap.
     expect(axes.x!.ticks.length).toBeGreaterThan(0);
   });
 
+  it('does not thin x-axis ticks when explicit values are set', () => {
+    const narrowArea = { x: 50, y: 50, width: 200, height: 300 };
+    const specWithValues: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: {
+          field: 'date',
+          type: 'temporal',
+          axis: { values: ['2020-01-01', '2021-01-01', '2022-01-01'] },
+        },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const scales = computeScales(specWithValues, narrowArea, specWithValues.data);
+    const axes = computeAxes(scales, narrowArea, fullStrategy, theme);
+
+    // Explicit values should be preserved exactly as specified
+    expect(axes.x!.ticks.length).toBe(3);
+  });
+
   it('band scale shows all categories regardless of width', () => {
     const categories = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'];
     const barSpec: NormalizedChartSpec = {

package/src/__tests__/dimensions.test.ts

@@ -265,4 +265,52 @@ describe('computeDimensions', () => {
     // Tooltip-only should NOT reserve extra margin (annotations are hidden)
     expect(dimsTooltipOnly.margins.right).toBe(dimsNoAnnotations.margins.right);
   });
+
+  it('clamps y-axis label margin on narrow containers to preserve chart area', () => {
+    const longLabelSpec: NormalizedChartSpec = {
+      ...baseSpec,
+      markType: 'bar',
+      markDef: { type: 'bar' },
+      data: [
+        {
+          category: 'This is a very long category label that would consume lots of space',
+          value: 10,
+        },
+        { category: 'Another extremely verbose category name', value: 20 },
+      ],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+
+    const narrowDims = computeDimensions(
+      longLabelSpec,
+      { width: 350, height: 300 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // On narrow viewports, left margin should be clamped so the chart area
+    // retains at least ~45% of the container width
+    expect(narrowDims.chartArea.width).toBeGreaterThanOrEqual(350 * 0.4);
+  });
+
+  it('tightens legend gap on narrow viewports', () => {
+    const wideDims = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      topLegend,
+      lightTheme,
+    );
+    const narrowDims = computeDimensions(
+      baseSpec,
+      { width: 360, height: 400 },
+      topLegend,
+      lightTheme,
+    );
+
+    // Narrow viewport should have more chart height available (smaller legend gap)
+    expect(narrowDims.chartArea.height).toBeGreaterThanOrEqual(wideDims.chartArea.height - 10);
+  });
 });

package/src/__tests__/legend.test.ts

@@ -276,6 +276,30 @@ describe('computeLegend', () => {
     expect(deEntry.color).toBe('#00ff00');
   });
 
+  it('orders legend entries by explicit domain, not data order', () => {
+    const specExplicit: NormalizedChartSpec = {
+      ...specWithColor,
+      data: [
+        { date: '2020', value: 10, country: 'Germany' },
+        { date: '2021', value: 20, country: 'UK' },
+        { date: '2022', value: 30, country: 'US' },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+        color: {
+          field: 'country',
+          type: 'nominal',
+          scale: {
+            domain: ['US', 'UK', 'Germany'],
+          },
+        },
+      },
+    };
+    const legend = computeLegend(specExplicit, compactStrategy, theme, chartArea);
+    expect(legend.entries.map((e) => e.label)).toEqual(['US', 'UK', 'Germany']);
+  });
+
   it('uses correct swatch shape for chart type', () => {
     const lineLegend = computeLegend(specWithColor, fullStrategy, theme, chartArea);
     expect(lineLegend.entries[0].shape).toBe('line');
@@ -330,6 +354,17 @@ describe('computeLegend', () => {
       expect(legend.entries).toHaveLength(3);
     });
 
+    it('preserves legend when any legend config is present (e.g. position)', () => {
+      const spec: NormalizedChartSpec = {
+        ...lineWithLabels,
+        legend: { position: 'top' },
+        hiddenSeries: [],
+        seriesStyles: {},
+      };
+      const legend = computeLegend(spec, fullStrategy, theme, chartArea);
+      expect(legend.entries).toHaveLength(3);
+    });
+
     it('preserves legend when labels density is none', () => {
       const spec: NormalizedChartSpec = {
         ...lineWithLabels,
@@ -395,32 +430,25 @@ describe('computeLegend', () => {
     });
   });
 
-  // ---------------------------------------------------------------------------
-  // Characterization test (refactor/v7-cohesion step 1):
-  // Pins the 4px gap between a top-positioned legend and the chart area,
-  // as enforced at packages/engine/src/compile.ts:331. Refactor step 4 will
-  // consolidate legend row-wrapping geometry; this test guards the spacing
-  // invariant through that change.
-  // ---------------------------------------------------------------------------
   describe('top legend spacing', () => {
-    it('places the legend exactly 4px above the chart area', () => {
-      const spec = {
-        mark: 'bar' as const,
-        data: [
-          { name: 'A', value: 10, group: 'X' },
-          { name: 'A', value: 20, group: 'Y' },
-          { name: 'B', value: 30, group: 'X' },
-          { name: 'B', value: 25, group: 'Y' },
-        ],
-        encoding: {
-          x: { field: 'name', type: 'nominal' as const },
-          y: { field: 'value', type: 'quantitative' as const },
-          color: { field: 'group', type: 'nominal' as const },
-        },
-        legend: { position: 'top' as const },
-      };
+    const topLegendSpec = {
+      mark: 'bar' as const,
+      data: [
+        { name: 'A', value: 10, group: 'X' },
+        { name: 'A', value: 20, group: 'Y' },
+        { name: 'B', value: 30, group: 'X' },
+        { name: 'B', value: 25, group: 'Y' },
+      ],
+      encoding: {
+        x: { field: 'name', type: 'nominal' as const },
+        y: { field: 'value', type: 'quantitative' as const },
+        color: { field: 'group', type: 'nominal' as const },
+      },
+      legend: { position: 'top' as const },
+    };
 
-      const layout = compileChart(spec, { width: 600, height: 400 });
+    it('places the legend exactly 4px above the chart area at standard width', () => {
+      const layout = compileChart(topLegendSpec, { width: 600, height: 400 });
 
       expect(layout.legend.position).toBe('top');
       expect(layout.legend.entries.length).toBeGreaterThan(0);
@@ -428,8 +456,18 @@ describe('computeLegend', () => {
 
       const legendBottom = layout.legend.bounds.y + layout.legend.bounds.height;
       const gap = layout.area.y - legendBottom;
-      // Pin value matches the literal at compile.ts:331 (legendArea.y -= legendLayout.bounds.height + 4)
       expect(gap).toBe(4);
     });
+
+    it('eliminates legend gap on narrow viewports (< 420px)', () => {
+      const layout = compileChart(topLegendSpec, { width: 360, height: 400 });
+
+      expect(layout.legend.position).toBe('top');
+      expect(layout.legend.entries.length).toBeGreaterThan(0);
+
+      const legendBottom = layout.legend.bounds.y + layout.legend.bounds.height;
+      const gap = layout.area.y - legendBottom;
+      expect(gap).toBe(0);
+    });
   });
 });

package/src/annotations/compute.ts

@@ -45,14 +45,15 @@ export function computeAnnotations(
   obstacles: Rect[] = [],
   svgDimensions?: { width: number; height: number },
 ): ResolvedAnnotation[] {
-  // At compact breakpoints, skip all annotations
-  if (strategy.annotationPosition === 'tooltip-only') {
-    return [];
-  }
+  const isCompact = strategy.annotationPosition === 'tooltip-only';
 
   const annotations: ResolvedAnnotation[] = [];
 
   for (const annotation of spec.annotations) {
+    // At compact breakpoints, skip annotations unless they opt out with responsive: false
+    if (isCompact && annotation.responsive !== false) {
+      continue;
+    }
     let resolved: ResolvedAnnotation | null = null;
 
     switch (annotation.type) {

package/src/annotations/resolve-refline.ts

@@ -43,9 +43,11 @@ export function resolveRefLineAnnotation(
     return null;
   }
 
-  // Determine dash pattern from style
+  // Determine dash pattern: strokeDash array wins, then style string
   let strokeDasharray: string | undefined;
-  if (annotation.style === 'dashed' || annotation.style === undefined) {
+  if (annotation.strokeDash && annotation.strokeDash.length > 0) {
+    strokeDasharray = annotation.strokeDash.join(' ');
+  } else if (annotation.style === 'dashed' || annotation.style === undefined) {
     strokeDasharray = DEFAULT_REFLINE_DASH;
   } else if (annotation.style === 'dotted') {
     strokeDasharray = '2 2';

package/src/charts/bar/labels.ts

@@ -20,6 +20,7 @@ import type {
 import {
   buildD3Formatter,
   estimateTextWidth,
+  findAccessibleColor,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
@@ -137,6 +138,8 @@ export function computeBarLabels(
 
     // Determine if label goes inside or outside the bar
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
+    const isNegative = Number.isFinite(rawNum) ? rawNum < 0 : false;
+    const bgColor = getRepresentativeColor(mark.fill);
 
     let anchorX: number;
     let fill: string;
@@ -145,18 +148,32 @@ export function computeBarLabels(
     if (isStacked && isInside) {
       // Stacked: centered within segment
       anchorX = mark.x + mark.width / 2;
-      fill = '#ffffff';
+      fill = findAccessibleColor('#ffffff', bgColor, 4.5);
       textAnchor = 'middle';
     } else if (isInside) {
-      // Simple: right-aligned within bar
-      anchorX = mark.x + mark.width - LABEL_PADDING;
-      fill = '#ffffff';
-      textAnchor = 'end';
+      if (isNegative) {
+        // Negative bar: left-aligned within bar (bar extends leftward)
+        anchorX = mark.x + LABEL_PADDING;
+        fill = findAccessibleColor('#ffffff', bgColor, 4.5);
+        textAnchor = 'start';
+      } else {
+        // Positive bar: right-aligned within bar
+        anchorX = mark.x + mark.width - LABEL_PADDING;
+        fill = findAccessibleColor('#ffffff', bgColor, 4.5);
+        textAnchor = 'end';
+      }
     } else {
-      // Outside: just past the bar's right edge
-      anchorX = mark.x + mark.width + LABEL_PADDING;
-      fill = getRepresentativeColor(mark.fill);
-      textAnchor = 'start';
+      if (isNegative) {
+        // Outside negative bar: just past the bar's left edge
+        anchorX = mark.x - LABEL_PADDING;
+        fill = getRepresentativeColor(mark.fill);
+        textAnchor = 'end';
+      } else {
+        // Outside positive bar: just past the bar's right edge
+        anchorX = mark.x + mark.width + LABEL_PADDING;
+        fill = getRepresentativeColor(mark.fill);
+        textAnchor = 'start';
+      }
     }
 
     // anchorY = bar vertical center. With dominant-baseline: central,

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

@@ -264,6 +264,37 @@ describe('computeDotMarks', () => {
     });
   });
 
+  describe('baseline clamping', () => {
+    it('clamps stems to the plot area when domain does not include zero', () => {
+      const spec: NormalizedChartSpec = {
+        markType: 'circle',
+        markDef: { type: 'circle' },
+        data: [
+          { country: 'USA', score: 50 },
+          { country: 'UK', score: 80 },
+        ],
+        encoding: {
+          x: { field: 'score', type: 'quantitative', scale: { domain: [40, 100] } },
+          y: { field: 'country', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeDotMarks(spec, scales, chartArea, fullStrategy);
+
+      const stems = marks.filter((m): m is RectMark => m.type === 'rect');
+      for (const stem of stems) {
+        expect(stem.x).toBeGreaterThanOrEqual(chartArea.x);
+        expect(stem.x + stem.width).toBeLessThanOrEqual(chartArea.x + chartArea.width);
+      }
+    });
+  });
+
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {

package/src/charts/dot/compute.ts

@@ -67,7 +67,12 @@ export function computeDotMarks(
   }
 
   const bandwidth = yScale.bandwidth();
-  const baseline = xScale(0);
+  // Clamp baseline to the scale range so stems never extend past the plot area
+  // (e.g., when domain doesn't include zero, xScale(0) would land outside).
+  const [rangeStart, rangeEnd] = xScale.range();
+  const rangeMin = Math.min(rangeStart, rangeEnd);
+  const rangeMax = Math.max(rangeStart, rangeEnd);
+  const baseline = Math.max(rangeMin, Math.min(rangeMax, xScale(0)));
   const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
   const isSequentialColor = colorEnc?.type === 'quantitative';
   const colorField = isSequentialColor ? undefined : colorEnc?.field;

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

@@ -477,6 +477,34 @@ describe('computeAreaMarks', () => {
     expect(marks[0].fillOpacity).toBeLessThanOrEqual(1);
   });
 
+  it('area with y2 encoding uses y2 field as bottom boundary instead of baseline', () => {
+    const spec: NormalizedChartSpec = {
+      ...makeSingleSeriesSpec(),
+      data: [
+        { date: '2020-01-01', value: 80, value_low: 60 },
+        { date: '2021-01-01', value: 90, value_low: 70 },
+        { date: '2022-01-01', value: 85, value_low: 65 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+        y2: { field: 'value_low', type: 'quantitative' },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea);
+
+    expect(marks).toHaveLength(1);
+    // Bottom points should NOT all be at the same baseline y coordinate
+    const bottomYValues = marks[0].bottomPoints.map((p) => p.y);
+    const allSame = bottomYValues.every((y) => y === bottomYValues[0]);
+    expect(allSame).toBe(false);
+    // Each bottom point should be between the top point and the chart bottom
+    for (let i = 0; i < marks[0].topPoints.length; i++) {
+      expect(marks[0].bottomPoints[i].y).toBeGreaterThan(marks[0].topPoints[i].y); // SVG coords: larger y = lower on screen
+    }
+  });
+
   it('stacked areas: produces multiple AreaMarks for multi-series', () => {
     const spec = makeMultiSeriesSpec();
     const scales = computeScales(spec, chartArea, spec.data);

package/src/charts/line/area.ts

@@ -84,16 +84,24 @@ function computeSingleArea(
     // Compute points, filtering out null values
     const validPoints: { x: number; yTop: number; yBottom: number; row: DataRow }[] = [];
 
+    // Check for y2 channel (band between y and y2)
+    const y2Channel = (encoding as Encoding & { y2?: { field: string; type: string } }).y2;
+
     for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
       const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
 
       if (xVal === null || yVal === null) continue;
 
+      const yBottomVal =
+        y2Channel && row[y2Channel.field] != null
+          ? scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field])
+          : null;
+
       validPoints.push({
         x: xVal,
         yTop: yVal,
-        yBottom: baselineY,
+        yBottom: yBottomVal ?? baselineY,
         row,
       });
     }
@@ -127,6 +135,8 @@ function computeSingleArea(
 
     const aria: MarkAria = { label: ariaLabel };
 
+    const fillOpacity = y2Channel ? 0.25 : DEFAULT_FILL_OPACITY;
+
     marks.push({
       type: 'area',
       topPoints,
@@ -134,7 +144,7 @@ function computeSingleArea(
       path: pathStr,
       topPath: topPathStr,
       fill: color,
-      fillOpacity: DEFAULT_FILL_OPACITY,
+      fillOpacity: fillOpacity,
       stroke: getRepresentativeColor(color),
       strokeWidth: 2,
       seriesKey: seriesKey === '__default__' ? undefined : seriesKey,

package/src/compile.ts

@@ -64,6 +64,7 @@ import { computeDimensions } from './layout/dimensions';
 import { computeGridlines } from './layout/gridlines';
 import { computeScales } from './layout/scales';
 import { computeLegend } from './legend/compute';
+import { legendGap } from './legend/wrap';
 import { compileSankey as compileSankeyImpl } from './sankey/compile-sankey';
 import { compileTableLayout } from './tables/compile-table';
 import { computeTooltipDescriptors } from './tooltips/compute';
@@ -291,13 +292,14 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // the data area (in the margin) instead of overlapping data marks.
   const legendArea: Rect = { ...chartArea };
   if (legendLayout.entries.length > 0) {
+    const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case 'top':
-        legendArea.y -= legendLayout.bounds.height + 4;
-        legendArea.height += legendLayout.bounds.height + 4;
+        legendArea.y -= legendLayout.bounds.height + gap;
+        legendArea.height += legendLayout.bounds.height + gap;
         break;
       case 'bottom':
-        legendArea.height += legendLayout.bounds.height + 4;
+        legendArea.height += legendLayout.bounds.height + gap;
         break;
       case 'right':
       case 'bottom-right':

package/src/compiler/normalize.ts

@@ -174,8 +174,10 @@ function normalizeAnnotations(annotations: Annotation[] | undefined): Annotation
           fill: ann.fill ?? '#000000',
         };
       case 'refline':
+      case 'rule':
         return {
           ...ann,
+          type: 'refline' as const,
           style: ann.style ?? 'dashed',
           strokeWidth: ann.strokeWidth ?? 1,
           stroke: ann.stroke ?? '#666666',

package/src/layout/axes.ts

@@ -272,8 +272,11 @@ export function computeAxes(
     }));
 
     // Thin tick labels to prevent overlap (skip for band scales which use
-    // auto-rotation, and when the user set an explicit tickCount or values).
-    const shouldThin = scales.x.type !== 'band' && !axisConfig?.tickCount && !axisConfig?.values;
+    // auto-rotation, and when the user set explicit tick values).
+    // When tickCount is set, we still thin if D3 overshot the requested count
+    // (common with log scales where ticks(4) can return 26 values).
+    const hasExplicitValues = !!axisConfig?.values;
+    const shouldThin = scales.x.type !== 'band' && !hasExplicitValues;
     let ticks: AxisTick[];
     if (!shouldThin) {
       ticks = allTicks;
@@ -352,10 +355,12 @@ export function computeAxes(
       allTicks = continuousTicks(scales.y, yDensity, yTargetCount);
     }
 
-    // Thin tick labels to prevent overlap (skip for band scales, explicit tickCount, and values).
-    const shouldThin = scales.y.type !== 'band' && !axisConfig?.tickCount && !axisConfig?.values;
+    // Thin tick labels to prevent overlap (skip for band scales and explicit tick values).
+    // When tickCount is set, we still thin if D3 overshot the requested count
+    // (common with log scales where ticks(4) can return 26 values).
+    const shouldThinY = scales.y.type !== 'band' && !axisConfig?.values;
     let ticks: AxisTick[];
-    if (!shouldThin) {
+    if (!shouldThinY) {
       ticks = allTicks;
     } else if (isContinuousY) {
       // Continuous y-axis: re-request ticks at a lower count on overlap so

package/src/layout/dimensions.ts

@@ -25,6 +25,7 @@ import { computeChrome, estimateTextWidth } from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
 
 import type { NormalizedChartSpec, NormalizedChrome } from '../compiler/types';
+import { legendGap } from '../legend/wrap';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -167,9 +168,14 @@ export function computeDimensions(
   };
 
   // Dynamic right margin for line/area end-of-line labels.
-  // Only reserve space when labels will actually render (density != 'none').
+  // Only reserve space when labels will actually render.
   const labelDensity = spec.labels.density;
-  if ((spec.markType === 'line' || spec.markType === 'area') && labelDensity !== 'none') {
+  const labelsHiddenByStrategy = strategy?.labelMode === 'none';
+  if (
+    (spec.markType === 'line' || spec.markType === 'area') &&
+    labelDensity !== 'none' &&
+    !labelsHiddenByStrategy
+  ) {
     // Estimate label width from longest series name (color encoding domain)
     const colorEnc = encoding.color;
     const colorField = colorEnc && 'field' in colorEnc ? colorEnc.field : undefined;
@@ -251,7 +257,15 @@ export function computeDimensions(
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
-        margins.left = Math.max(margins.left, padding + maxLabelWidth + 12);
+        // Tighter label-to-chart gap on narrow containers
+        const labelGap = width < 500 ? 8 : 12;
+        // Clamp reservation so bars keep at least ~45% of container width on
+        // narrow viewports. Labels that exceed the cap will be truncated by
+        // the axis renderer (see axes.ts).
+        const maxLeftFraction = width < 400 ? 0.45 : width < 600 ? 0.55 : 1;
+        const maxLeftReserved = Math.floor(width * maxLeftFraction);
+        const reserved = Math.min(padding + maxLabelWidth + labelGap, maxLeftReserved);
+        margins.left = Math.max(margins.left, reserved);
       }
     } else if (encoding.y.type === 'quantitative' || encoding.y.type === 'temporal') {
       // Numeric tick labels on the left. Estimate width from the data range.
@@ -305,12 +319,13 @@ export function computeDimensions(
 
   // Reserve legend space
   if (legendLayout.entries.length > 0) {
+    const gap = legendGap(width);
     if (legendLayout.position === 'right' || legendLayout.position === 'bottom-right') {
       margins.right += legendLayout.bounds.width + 8;
     } else if (legendLayout.position === 'top') {
-      margins.top += legendLayout.bounds.height + 4;
+      margins.top += legendLayout.bounds.height + gap;
     } else if (legendLayout.position === 'bottom') {
-      margins.bottom += legendLayout.bounds.height + 4;
+      margins.bottom += legendLayout.bounds.height + gap;
     }
   }
 
@@ -347,10 +362,11 @@ export function computeDimensions(
     const bottomDelta = margins.bottom - newBottom;
 
     if (topDelta > 0 || bottomDelta > 0) {
+      const gap = legendGap(width);
       margins.top =
         newTop +
         (legendLayout.entries.length > 0 && legendLayout.position === 'top'
-          ? legendLayout.bounds.height + 4
+          ? legendLayout.bounds.height + gap
           : 0);
       margins.bottom = newBottom;