@opendata-ai/openchart-engine 7.3.0 → 7.4.0

package/dist/index.d.ts

@@ -556,10 +556,11 @@ declare function compile(spec: unknown): CompileResult;
  * A chart renderer function.
  *
  * Takes a normalized spec, resolved scales, chart area, layout strategy,
- * and the resolved theme for theme-aware styling (e.g. label colors).
- * Returns an array of marks to render.
+ * the resolved theme for theme-aware styling (e.g. label colors), and the
+ * full container width (used by geometry gates that must key off the
+ * container, not the derived plot width). Returns an array of marks to render.
  */
-type ChartRenderer = (spec: NormalizedChartSpec, scales: ResolvedScales, chartArea: Rect, strategy: LayoutStrategy, theme: ResolvedTheme) => Mark[];
+type ChartRenderer = (spec: NormalizedChartSpec, scales: ResolvedScales, chartArea: Rect, strategy: LayoutStrategy, theme: ResolvedTheme, containerWidth: number) => Mark[];
 /**
  * Register a chart renderer for a specific chart type.
  *

package/dist/index.js

@@ -1925,7 +1925,7 @@ function computeEndpointLabels(spec, marks, theme, chartArea, strategy) {
 }
 
 // src/charts/bar/compute.ts
-import { isGradientDef } from "@opendata-ai/openchart-core";
+import { isGradientDef, NARROW_VIEWPORT_MAX } from "@opendata-ai/openchart-core";
 
 // src/transforms/predicates.ts
 function isFieldPredicate(pred) {
@@ -2094,7 +2094,8 @@ function orientGradientForHorizontalBar(grad) {
   return { ...lg, x1: 0, y1: 0, x2: 1, y2: 0 };
 }
 var MIN_BAR_WIDTH = 1;
-function computeBarMarks(spec, scales, _chartArea, _strategy) {
+var MIN_GROUPED_BAR_THICKNESS = 8;
+function computeBarMarks(spec, scales, _chartArea, _strategy, containerWidth) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
@@ -2143,7 +2144,8 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
           yScale,
           bandwidth,
           baseline,
-          scales
+          scales,
+          containerWidth
         );
       } else {
         const stackMode = xChannel.stack === "normalize" ? "normalize" : xChannel.stack === "center" ? "center" : "zero";
@@ -2218,7 +2220,7 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
   }
   return marks;
 }
-function computeGroupedBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, baseline, scales) {
+function computeGroupedBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, baseline, scales, containerWidth) {
   const marks = [];
   const categoryGroups = groupByField(data, categoryField);
   const groupIndexMap = /* @__PURE__ */ new Map();
@@ -2231,7 +2233,17 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
   const groupCount = groupIndexMap.size;
   if (groupCount === 0) return marks;
   const gap = Math.min(1, bandwidth * 0.05);
-  const subBandHeight = Math.max((bandwidth - gap * (groupCount - 1)) / groupCount, MIN_BAR_WIDTH);
+  let groupHeight = bandwidth;
+  let subBandHeight = (groupHeight - gap * (groupCount - 1)) / groupCount;
+  const step = typeof yScale.step === "function" ? yScale.step() : bandwidth;
+  const maxGroupHeight = Math.max(bandwidth, step - MIN_BAR_WIDTH);
+  if (containerWidth < NARROW_VIEWPORT_MAX && subBandHeight < MIN_GROUPED_BAR_THICKNESS && maxGroupHeight > bandwidth) {
+    const needed = MIN_GROUPED_BAR_THICKNESS * groupCount + gap * (groupCount - 1);
+    groupHeight = Math.min(Math.max(groupHeight, needed), maxGroupHeight);
+    subBandHeight = (groupHeight - gap * (groupCount - 1)) / groupCount;
+  }
+  subBandHeight = Math.max(subBandHeight, MIN_BAR_WIDTH);
+  const groupOffset = (bandwidth - groupHeight) / 2;
   for (const [category, rows] of categoryGroups) {
     const bandY = yScale(category);
     if (bandY === void 0) continue;
@@ -2243,7 +2255,7 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
       const color2 = getColor(scales, groupKey3);
       const xPos = value2 >= 0 ? baseline : xScale(value2);
       const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
-      const subY = bandY + groupIndex * (subBandHeight + gap);
+      const subY = bandY + groupOffset + groupIndex * (subBandHeight + gap);
       const aria = {
         label: `${category}, ${groupKey3}: ${formatLabelValue(value2)}`
       };
@@ -2422,6 +2434,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
   const targetMarks = filterByDensity(marks, density);
   const candidates = [];
   const fitsInSegment = [];
+  const displayAnchorX = [];
   const formatter = buildD3Formatter(labelFormat);
   for (const mark of targetMarks) {
     let valuePart;
@@ -2479,12 +2492,15 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
         textAnchor = "start";
       }
     }
-    const anchorY = mark.y + mark.height / 2;
+    const centerY = mark.y + mark.height / 2;
+    const anchorY = centerY - textHeight / 2;
+    const leftEdgeX = textAnchor === "end" ? anchorX - textWidth : textAnchor === "middle" ? anchorX - textWidth / 2 : anchorX;
     const fits = !(isStacked2 && textWidth > mark.width - 2 * LABEL_PADDING);
+    displayAnchorX.push(anchorX);
     fitsInSegment.push(fits);
     candidates.push({
       text: valuePart,
-      anchorX,
+      anchorX: leftEdgeX,
       anchorY,
       width: textWidth,
       height: textHeight,
@@ -2501,46 +2517,61 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     });
   }
   if (candidates.length === 0) return [];
-  if (density === "all") {
-    return candidates.map((c, i) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: fitsInSegment[i] !== false
-    }));
-  }
   const fittingCandidates = [];
   const unfittingIndices = /* @__PURE__ */ new Set();
   for (let i = 0; i < candidates.length; i++) {
     if (fitsInSegment[i] === false) {
       unfittingIndices.add(i);
     } else {
-      fittingCandidates.push(candidates[i]);
+      fittingCandidates.push({ ...candidates[i], index: i });
     }
   }
-  const resolved = resolveCollisions(fittingCandidates);
+  const resolvedByOrig = /* @__PURE__ */ new Map();
+  for (const r of resolveCollisions(fittingCandidates)) {
+    if (r.index !== void 0) resolvedByOrig.set(r.index, r);
+  }
+  const halfHeight = FONT_SIZE * 1.2 * 0.5;
   const results = [];
-  let resolvedIdx = 0;
   for (let i = 0; i < candidates.length; i++) {
     if (unfittingIndices.has(i)) {
       results.push({
         text: candidates[i].text,
-        x: candidates[i].anchorX,
-        y: candidates[i].anchorY,
+        x: displayAnchorX[i],
+        y: candidates[i].anchorY + halfHeight,
         style: candidates[i].style,
         visible: false
       });
     } else {
-      results.push(resolved[resolvedIdx++]);
+      const r = resolvedByOrig.get(i);
+      if (!r) continue;
+      const dx = displayAnchorX[i] - candidates[i].anchorX;
+      const { index: _index, ...rest } = r;
+      results.push({
+        ...rest,
+        x: r.x + dx,
+        y: r.y + halfHeight,
+        connector: r.connector ? {
+          ...r.connector,
+          from: {
+            ...r.connector.from,
+            x: r.connector.from.x + dx,
+            y: r.connector.from.y + halfHeight
+          },
+          to: {
+            ...r.connector.to,
+            x: r.connector.to.x + dx,
+            y: r.connector.to.y + halfHeight
+          }
+        } : void 0
+      });
     }
   }
   return results;
 }
 
 // src/charts/bar/index.ts
-var barRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computeBarMarks(spec, scales, chartArea, strategy);
+var barRenderer = (spec, scales, chartArea, strategy, theme, containerWidth) => {
+  const marks = computeBarMarks(spec, scales, chartArea, strategy, containerWidth);
   const valueField = spec.encoding?.x && "field" in spec.encoding.x ? spec.encoding.x.field : void 0;
   const labels = computeBarLabels(
     marks,
@@ -2852,7 +2883,8 @@ import {
   buildD3Formatter as buildD3Formatter2,
   estimateTextWidth as estimateTextWidth4,
   getRepresentativeColor as getRepresentativeColor2,
-  resolveCollisions as resolveCollisions2
+  resolveCollisions as resolveCollisions2,
+  textAscent
 } from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE2 = 10;
 var LABEL_FONT_WEIGHT2 = 600;
@@ -2903,22 +2935,22 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
         fontWeight: LABEL_FONT_WEIGHT2,
         fill: labelColor ?? getRepresentativeColor2(mark.fill),
         lineHeight: 1.2,
-        textAnchor: "middle",
-        dominantBaseline: "hanging"
+        textAnchor: "middle"
       }
     });
   }
   if (candidates.length === 0) return [];
-  if (density === "all") {
-    return candidates.map((c) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: true
-    }));
-  }
-  return resolveCollisions2(candidates);
+  const ascent = textAscent(FONT_SIZE);
+  return resolveCollisions2(candidates).map((label) => ({
+    ...label,
+    y: label.y + ascent,
+    // The connector originates at the label; shift its start to the baseline
+    // too so the leader stays glued to the shifted text.
+    connector: label.connector ? {
+      ...label.connector,
+      from: { ...label.connector.from, y: label.connector.from.y + ascent }
+    } : void 0
+  }));
 }
 
 // src/charts/column/index.ts
@@ -9534,7 +9566,7 @@ import {
   MAX_LEFT_LABEL_FRACTION_DEFAULT,
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
-  NARROW_VIEWPORT_MAX,
+  NARROW_VIEWPORT_MAX as NARROW_VIEWPORT_MAX2,
   TOP_PAD_EXTRA_NARROW
 } from "@opendata-ai/openchart-core";
 
@@ -9875,6 +9907,15 @@ function placeLegend(content, chartArea, containerWidth, _theme, xAxisHeight) {
   };
 }
 
+// src/layout/axes/rotation.ts
+var BAND_FIT_FRACTION = 0.85;
+var AUTO_ROTATE_ANGLE = -45;
+function resolveBandTickAngle(explicitAngle, maxLabelWidth, bandwidth, labelCount) {
+  if (explicitAngle !== void 0) return explicitAngle;
+  if (labelCount < 2) return void 0;
+  return maxLabelWidth > bandwidth * BAND_FIT_FRACTION ? AUTO_ROTATE_ANGLE : void 0;
+}
+
 // src/layout/axes/ticks.ts
 import {
   abbreviateNumber as abbreviateNumber2,
@@ -10259,6 +10300,16 @@ function evenRange(start, end, count) {
   const step = (end - start) / (count - 1);
   return Array.from({ length: count }, (_, i) => start + step * i);
 }
+function estimateBandwidth(scaleConfig, plotWidth, n) {
+  if (n <= 0) return 0;
+  const padding = scaleConfig?.padding ?? 0.35;
+  const paddingInner = scaleConfig?.paddingInner ?? padding;
+  const paddingOuter = scaleConfig?.paddingOuter ?? padding;
+  const denom = n - paddingInner + 2 * paddingOuter;
+  if (denom <= 0) return 0;
+  const step = plotWidth / denom;
+  return step * (1 - paddingInner);
+}
 function buildBandScale(channel, data, rangeStart, rangeEnd) {
   const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
   const padding = channel.scale?.padding ?? 0.35;
@@ -10630,7 +10681,7 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
-        const labelGap = width < NARROW_VIEWPORT_MAX ? LABEL_GAP_COMPACT : LABEL_GAP_DEFAULT;
+        const labelGap = width < NARROW_VIEWPORT_MAX2 ? LABEL_GAP_COMPACT : LABEL_GAP_DEFAULT;
         const maxLeftFraction = width < BREAKPOINT_COMPACT_MAX ? MAX_LEFT_LABEL_FRACTION_COMPACT : width < MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX ? MAX_LEFT_LABEL_FRACTION_MEDIUM : MAX_LEFT_LABEL_FRACTION_DEFAULT;
         const maxLeftReserved = Math.floor(width * maxLeftFraction);
         const reserved = Math.min(hPad + maxLabelWidth + labelGap, maxLeftReserved);
@@ -10705,16 +10756,33 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
       watermark,
       bottomLegendReservation
     );
+    let effectiveXTickAngle = xTickAngle;
+    if (xTickAngle === void 0 && xLabels.length > 1) {
+      const rightMarginEst = hPad + (isRadial ? hPad : axisMargin);
+      const plotWidth = Math.max(0, width - leftGutter - Math.max(rightMarginEst, hPad));
+      const bandwidth = estimateBandwidth(encoding.x?.scale, plotWidth, xLabels.length);
+      let maxXLabelWidth = 0;
+      for (const label of xLabels) {
+        const w = measure(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        if (w > maxXLabelWidth) maxXLabelWidth = w;
+      }
+      effectiveXTickAngle = resolveBandTickAngle(
+        void 0,
+        maxXLabelWidth,
+        bandwidth,
+        xLabels.length
+      );
+    }
     const xAxisExtent = isRadial || xAxisSuppressed ? 0 : computeXAxisExtentFromLabels({
       labels: xLabels,
-      tickAngle: xTickAngle,
+      tickAngle: effectiveXTickAngle,
       hasTitle: hasXAxisTitle,
       tickFontSize: theme.fonts.sizes.axisTick,
       tickFontWeight: theme.fonts.weights.normal,
       xAxisHeight: theme.spacing.xAxisHeight,
       measure
     });
-    const topPad = width < NARROW_VIEWPORT_MAX ? padding + TOP_PAD_EXTRA_NARROW : padding;
+    const topPad = width < NARROW_VIEWPORT_MAX2 ? padding + TOP_PAD_EXTRA_NARROW : padding;
     const hasTopLegend = legendContent.entries.length > 0 && legendContent.position === "top";
     const gap = legendGap(width);
     const inlineTickOverhang = yIsInline ? theme.fonts.sizes.axisTick + INLINE_TICK_OVERHANG_PAD : 0;
@@ -11793,12 +11861,25 @@ function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThre
 }
 var CONTINUOUS_TICK_FLOOR = 4;
 var OVERSHOOT_TOLERANCE = 1.5;
+var MIN_QUANTITATIVE_TICKS = 2;
+function ensureMinContinuousTicks(scale, ticks2, requestedCount) {
+  if (ticks2.length >= MIN_QUANTITATIVE_TICKS) return ticks2;
+  if (!scale || !scaleSupportsTickCount(scale)) return ticks2;
+  let best = ticks2;
+  for (let n = Math.max(requestedCount, MIN_QUANTITATIVE_TICKS) + 1; n <= 10; n++) {
+    const candidate = buildContinuousTicks(scale, n);
+    if (candidate.length >= MIN_QUANTITATIVE_TICKS) return candidate;
+    if (candidate.length > best.length) best = candidate;
+  }
+  return best;
+}
 function fitContinuousTicks(scale, initialTicks, initialCount, fontSize, fontWeight, axisLength, orientation, measureText) {
   if (!scale || !scaleSupportsTickCount(scale)) return initialTicks;
+  const flooredTicks = ensureMinContinuousTicks(scale, initialTicks, initialCount);
   const tolerance = initialCount * OVERSHOOT_TOLERANCE;
-  const overshoots = initialTicks.length > tolerance;
-  const overlaps = ticksOverlap(initialTicks, fontSize, fontWeight, measureText, orientation);
-  if (!overshoots && !overlaps) return initialTicks;
+  const overshoots = flooredTicks.length > tolerance;
+  const overlaps = ticksOverlap(flooredTicks, fontSize, fontWeight, measureText, orientation);
+  if (!overshoots && !overlaps) return flooredTicks;
   const minThreshold = orientation === "vertical" ? HEIGHT_MINIMAL_THRESHOLD : WIDTH_MINIMAL_THRESHOLD;
   const floor = axisLength >= minThreshold ? CONTINUOUS_TICK_FLOOR : 2;
   let bestWithinFloor;
@@ -11817,7 +11898,8 @@ function fitContinuousTicks(scale, initialTicks, initialCount, fontSize, fontWei
     }
     if (candidate.length >= floor) bestWithinFloor = candidate;
   }
-  const fallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
+  const rawFallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
+  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor);
   return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
 function bandTicksOverlapAtAngle(ticks2, angleDeg, fontSize, fontWeight, measureText) {
@@ -11904,9 +11986,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
         const w = measureLabel(t.label, fontSize, fontWeight, measureText);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
-      if (maxLabelWidth > bandwidth * 0.85) {
-        tickAngle = -45;
-      }
+      tickAngle = resolveBandTickAngle(void 0, maxLabelWidth, bandwidth, allTicks.length);
     }
     const hasExplicitValues = !!axisConfig?.values;
     let ticks2;
@@ -12026,36 +12106,21 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
   }
   const totalWidth = dataContext?.totalWidth ?? chartArea.x + chartArea.width;
   if (result.x) {
-    let rotatedHeight;
-    if (result.x.tickAngle && Math.abs(result.x.tickAngle) > 10) {
-      const angleRad = Math.abs(result.x.tickAngle) * (Math.PI / 180);
-      let maxLabelWidth = 40;
-      for (const tick of result.x.ticks) {
-        const w = estimateTextWidth14(
-          tick.label,
-          result.x.tickLabelStyle.fontSize,
-          result.x.tickLabelStyle.fontWeight
-        );
-        if (w > maxLabelWidth) maxLabelWidth = w;
-      }
-      rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
-    }
-    if (rotatedHeight != null) {
-      result.x.extent = result.x.label ? rotatedHeight + X_AXIS_TITLE_BAND_ROTATED : rotatedHeight;
-    } else {
-      result.x.extent = computeXAxisExtentFromLabels2({
-        labels: result.x.ticks.map((t) => t.label),
-        tickAngle: result.x.tickAngle,
-        hasTitle: !!result.x.label,
-        tickFontSize: result.x.tickLabelStyle.fontSize,
-        tickFontWeight: result.x.tickLabelStyle.fontWeight,
-        xAxisHeight: theme.spacing.xAxisHeight
-      });
-    }
+    const isRotated = !!result.x.tickAngle && Math.abs(result.x.tickAngle) > 10;
+    result.x.extent = computeXAxisExtentFromLabels2({
+      labels: result.x.ticks.map((t) => t.label),
+      tickAngle: result.x.tickAngle,
+      hasTitle: !!result.x.label,
+      tickFontSize: result.x.tickLabelStyle.fontSize,
+      tickFontWeight: result.x.tickLabelStyle.fontWeight,
+      xAxisHeight: theme.spacing.xAxisHeight,
+      measure: (t, fs, fw) => measureLabel(t, fs, fw, measureText)
+    });
     if (result.x.label) {
+      const rotatedBand = isRotated ? result.x.extent - X_AXIS_TITLE_BAND_ROTATED + 14 : 35;
       result.x.titlePosition = {
         x: chartArea.x + chartArea.width / 2,
-        y: chartArea.y + chartArea.height + (rotatedHeight != null ? rotatedHeight + 14 : 35)
+        y: chartArea.y + chartArea.height + rotatedBand
       };
     }
   }
@@ -12103,7 +12168,7 @@ import {
   MAX_LEFT_LABEL_FRACTION_DEFAULT as MAX_LEFT_LABEL_FRACTION_DEFAULT2,
   MAX_LEFT_LABEL_FRACTION_MEDIUM as MAX_LEFT_LABEL_FRACTION_MEDIUM2,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX as MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX2,
-  NARROW_VIEWPORT_MAX as NARROW_VIEWPORT_MAX2,
+  NARROW_VIEWPORT_MAX as NARROW_VIEWPORT_MAX3,
   TOP_PAD_EXTRA_NARROW as TOP_PAD_EXTRA_NARROW2
 } from "@opendata-ai/openchart-core";
 
@@ -12324,7 +12389,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   const yIsInlinePre = (yTickPositionExplicitPre ?? (yIsLineOrAreaPre && yIsContinuousPre && yAxisOrientPre !== "right" ? "inline" : "gutter")) === "inline";
   const inlineTickOverhang = yIsInlinePre ? theme.fonts.sizes.axisTick + INLINE_TICK_OVERHANG_PAD : 0;
   const topAxisGap = isRadial && chrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
-  const topPad = width < NARROW_VIEWPORT_MAX2 ? padding + TOP_PAD_EXTRA_NARROW2 : padding;
+  const topPad = width < NARROW_VIEWPORT_MAX3 ? padding + TOP_PAD_EXTRA_NARROW2 : padding;
   const wantsMetrics = !!spec.metrics && spec.metrics.length > 0 && chromeMode !== "hidden";
   const tentativeMetricsHeight = wantsMetrics ? metricBarHeight(metricFonts(theme)) : 0;
   const margins = {
@@ -12425,7 +12490,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
-        const labelGap = width < NARROW_VIEWPORT_MAX2 ? LABEL_GAP_COMPACT2 : LABEL_GAP_DEFAULT2;
+        const labelGap = width < NARROW_VIEWPORT_MAX3 ? LABEL_GAP_COMPACT2 : LABEL_GAP_DEFAULT2;
         const maxLeftFraction = width < BREAKPOINT_COMPACT_MAX3 ? MAX_LEFT_LABEL_FRACTION_COMPACT2 : width < MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX2 ? MAX_LEFT_LABEL_FRACTION_MEDIUM2 : MAX_LEFT_LABEL_FRACTION_DEFAULT2;
         const maxLeftReserved = Math.floor(width * maxLeftFraction);
         const reserved = Math.min(hPad + maxLabelWidth + labelGap, maxLeftReserved);
@@ -15533,7 +15598,7 @@ function compileChart(spec, options) {
     renderSpec.markDef
   );
   const renderer = getChartRenderer(rendererKey);
-  const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
+  const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme, options.width) : [];
   const endpointLabels = computeEndpointLabels(chartSpec, marks, theme, chartArea, strategy);
   const obstacles = [];
   if (finalLegend.bounds.width > 0) {