@opendata-ai/openchart-engine 2.9.1 → 2.11.0

package/dist/index.js

@@ -1,15 +1,18 @@
 // src/compile.ts
 import {
   adaptTheme as adaptTheme2,
+  BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2,
+  computeLabelBounds,
   generateAltText,
   generateDataTable,
   getBreakpoint,
+  getHeightClass,
   getLayoutStrategy,
   resolveTheme as resolveTheme2
 } from "@opendata-ai/openchart-core";
 
 // src/annotations/compute.ts
-import { estimateTextWidth } from "@opendata-ai/openchart-core";
+import { detectCollision, estimateTextWidth } from "@opendata-ai/openchart-core";
 var DEFAULT_ANNOTATION_FONT_SIZE = 12;
 var DEFAULT_ANNOTATION_FONT_WEIGHT = 400;
 var DEFAULT_LINE_HEIGHT = 1.3;
@@ -324,41 +327,34 @@ function estimateLabelBounds(label) {
   const fontWeight = label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
   return computeTextBounds(label.x, label.y, label.text, fontSize, fontWeight);
 }
-function rectsOverlap(a, b) {
-  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-}
 var NUDGE_PADDING = 6;
+function generateNudgeCandidates(selfBounds, obstacles, padding) {
+  const candidates = [];
+  for (const obs of obstacles) {
+    const belowDy = obs.y + obs.height + padding - selfBounds.y;
+    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
+    const aboveDy = obs.y - padding - (selfBounds.y + selfBounds.height);
+    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
+    const leftDx = obs.x - padding - (selfBounds.x + selfBounds.width);
+    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
+    const rightDx = obs.x + obs.width + padding - selfBounds.x;
+    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
+  }
+  candidates.sort((a, b) => a.distance - b.distance);
+  return candidates;
+}
 function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, chartArea, obstacles) {
   if (annotation.type !== "text" || !annotation.label) return false;
   const labelBounds = estimateLabelBounds(annotation.label);
   const collidingObs = obstacles.filter(
-    (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(labelBounds, obs)
+    (obs) => obs.width > 0 && obs.height > 0 && detectCollision(labelBounds, obs)
   );
   if (collidingObs.length === 0) return false;
   const px = resolvePosition(originalAnnotation.x, scales.x);
   const py = resolvePosition(originalAnnotation.y, scales.y);
   if (px === null || py === null) return false;
-  const candidates = [];
+  const candidates = generateNudgeCandidates(labelBounds, collidingObs, NUDGE_PADDING);
   const fontSize = labelBounds.height / Math.max(1, annotation.label.text.split("\n").length);
-  for (const obs of collidingObs) {
-    const currentLabelTop = labelBounds.y;
-    const targetLabelTop = obs.y + obs.height + NUDGE_PADDING;
-    const belowDy = targetLabelTop - currentLabelTop;
-    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
-    const currentLabelBottom = labelBounds.y + labelBounds.height;
-    const targetLabelBottom = obs.y - NUDGE_PADDING;
-    const aboveDy = targetLabelBottom - currentLabelBottom;
-    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
-    const currentLabelRight = labelBounds.x + labelBounds.width;
-    const targetLabelRight = obs.x - NUDGE_PADDING;
-    const leftDx = targetLabelRight - currentLabelRight;
-    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
-    const currentLabelLeft = labelBounds.x;
-    const targetLabelLeft = obs.x + obs.width + NUDGE_PADDING;
-    const rightDx = targetLabelLeft - currentLabelLeft;
-    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
-  }
-  candidates.sort((a, b) => a.distance - b.distance);
   for (const { dx, dy } of candidates) {
     const newLabelX = annotation.label.x + dx;
     const newLabelY = annotation.label.y + dy;
@@ -387,12 +383,12 @@ function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, ch
     };
     const candidateBounds = estimateLabelBounds(candidateLabel);
     const stillCollides = obstacles.some(
-      (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(candidateBounds, obs)
+      (obs) => obs.width > 0 && obs.height > 0 && detectCollision(candidateBounds, obs)
     );
     if (stillCollides) continue;
     const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
     const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
-    const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 100 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize;
+    const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 100 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize * 3;
     if (inBounds) {
       if (candidateLabel.connector && dx === 0 && dy !== 0) {
         candidateLabel.connector = {
@@ -406,6 +402,74 @@ function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, ch
   }
   return false;
 }
+function resolveAnnotationCollisions(annotations, originalSpecs, scales, chartArea) {
+  const placedBounds = [];
+  for (let i = 0; i < annotations.length; i++) {
+    const annotation = annotations[i];
+    if (annotation.type !== "text" || !annotation.label) {
+      continue;
+    }
+    const bounds = estimateLabelBounds(annotation.label);
+    const collidingBounds = placedBounds.filter(
+      (pb) => pb.width > 0 && pb.height > 0 && detectCollision(bounds, pb)
+    );
+    if (collidingBounds.length > 0) {
+      const originalSpec = originalSpecs[i];
+      if (originalSpec?.type === "text") {
+        const px = resolvePosition(originalSpec.x, scales.x);
+        const py = resolvePosition(originalSpec.y, scales.y);
+        if (px !== null && py !== null) {
+          const candidates = generateNudgeCandidates(bounds, collidingBounds, NUDGE_PADDING);
+          const fontSize = bounds.height / Math.max(1, annotation.label.text.split("\n").length);
+          for (const { dx, dy } of candidates) {
+            const newLabelX = annotation.label.x + dx;
+            const newLabelY = annotation.label.y + dy;
+            const candidateLabel = {
+              ...annotation.label,
+              x: newLabelX,
+              y: newLabelY
+            };
+            const candidateBounds = estimateLabelBounds(candidateLabel);
+            const stillCollides = placedBounds.some(
+              (pb) => pb.width > 0 && pb.height > 0 && detectCollision(candidateBounds, pb)
+            );
+            if (stillCollides) continue;
+            const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
+            const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
+            const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 100 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize;
+            if (inBounds) {
+              let newConnector = annotation.label.connector;
+              if (newConnector) {
+                const annFontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+                const annFontWeight = annotation.label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+                const connStyle = newConnector.style === "curve" ? "curve" : "straight";
+                const newFrom = computeConnectorOrigin(
+                  newLabelX,
+                  newLabelY,
+                  annotation.label.text,
+                  annFontSize,
+                  annFontWeight,
+                  px,
+                  py,
+                  connStyle
+                );
+                newConnector = { ...newConnector, from: newFrom };
+              }
+              annotation.label = {
+                ...annotation.label,
+                x: newLabelX,
+                y: newLabelY,
+                connector: newConnector
+              };
+              break;
+            }
+          }
+        }
+      }
+    }
+    placedBounds.push(estimateLabelBounds(annotation.label));
+  }
+}
 function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, obstacles = []) {
   if (strategy.annotationPosition === "tooltip-only") {
     return [];
@@ -431,6 +495,7 @@ function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, o
       annotations.push(resolved);
     }
   }
+  resolveAnnotationCollisions(annotations, spec.annotations, scales, chartArea);
   annotations.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   return annotations;
 }
@@ -5979,6 +6044,7 @@ var DEFAULT_COLLISION_PADDING = 5;
 import {
   abbreviateNumber as abbreviateNumber3,
   buildD3Formatter as buildD3Formatter3,
+  estimateTextWidth as estimateTextWidth7,
   formatDate,
   formatNumber as formatNumber3
 } from "@opendata-ai/openchart-core";
@@ -5991,6 +6057,8 @@ var HEIGHT_MINIMAL_THRESHOLD = 120;
 var HEIGHT_REDUCED_THRESHOLD = 200;
 var WIDTH_MINIMAL_THRESHOLD = 150;
 var WIDTH_REDUCED_THRESHOLD = 300;
+var MIN_TICK_GAP_FACTOR = 1;
+var MIN_TICK_COUNT = 2;
 var DENSITY_ORDER = ["full", "reduced", "minimal"];
 function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThreshold) {
   let density = baseDensity;
@@ -6003,17 +6071,49 @@ function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThre
   }
   return density;
 }
-function continuousTicks(resolvedScale, density) {
+function measureLabel(text, fontSize, fontWeight, measureText) {
+  return measureText ? measureText(text, fontSize, fontWeight).width : estimateTextWidth7(text, fontSize, fontWeight);
+}
+function ticksOverlap(ticks2, fontSize, fontWeight, measureText) {
+  if (ticks2.length < 2) return false;
+  const minGap = fontSize * MIN_TICK_GAP_FACTOR;
+  for (let i = 0; i < ticks2.length - 1; i++) {
+    const aWidth = measureLabel(ticks2[i].label, fontSize, fontWeight, measureText);
+    const bWidth = measureLabel(ticks2[i + 1].label, fontSize, fontWeight, measureText);
+    const aRight = ticks2[i].position + aWidth / 2;
+    const bLeft = ticks2[i + 1].position - bWidth / 2;
+    if (aRight + minGap > bLeft) return true;
+  }
+  return false;
+}
+function thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText) {
+  if (!ticksOverlap(ticks2, fontSize, fontWeight, measureText)) return ticks2;
+  let current = ticks2;
+  while (current.length > MIN_TICK_COUNT) {
+    const thinned = [current[0]];
+    for (let i = 2; i < current.length - 1; i += 2) {
+      thinned.push(current[i]);
+    }
+    if (current.length > 1) thinned.push(current[current.length - 1]);
+    current = thinned;
+    if (!ticksOverlap(current, fontSize, fontWeight, measureText)) break;
+  }
+  return current;
+}
+function continuousTicks(resolvedScale, density, fontSize, fontWeight, measureText) {
   const scale = resolvedScale.scale;
-  const count = resolvedScale.channel.axis?.tickCount ?? TICK_COUNTS[density];
-  const ticks2 = scale.ticks(count);
-  return ticks2.map((value) => ({
+  const explicitCount = resolvedScale.channel.axis?.tickCount;
+  const count = explicitCount ?? TICK_COUNTS[density];
+  const rawTicks = scale.ticks(count);
+  const ticks2 = rawTicks.map((value) => ({
     value,
     position: scale(value),
     label: formatTickLabel(value, resolvedScale)
   }));
+  if (explicitCount) return ticks2;
+  return thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText);
 }
-function categoricalTicks(resolvedScale, density) {
+function categoricalTicks(resolvedScale, density, fontSize, fontWeight, measureText) {
   const scale = resolvedScale.scale;
   const domain = scale.domain();
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
@@ -6023,7 +6123,7 @@ function categoricalTicks(resolvedScale, density) {
     const step = Math.ceil(domain.length / maxTicks);
     selectedValues = domain.filter((_, i) => i % step === 0);
   }
-  return selectedValues.map((value) => {
+  const ticks2 = selectedValues.map((value) => {
     const bandScale = resolvedScale.type === "band" ? scale : null;
     const pos = bandScale ? (bandScale(value) ?? 0) + bandScale.bandwidth() / 2 : scale(value) ?? 0;
     return {
@@ -6032,6 +6132,10 @@ function categoricalTicks(resolvedScale, density) {
       label: value
     };
   });
+  if (resolvedScale.type !== "band" && !explicitTickCount) {
+    return thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText);
+  }
+  return ticks2;
 }
 function formatTickLabel(value, resolvedScale) {
   const formatStr = resolvedScale.channel.axis?.format;
@@ -6050,7 +6154,7 @@ function formatTickLabel(value, resolvedScale) {
   }
   return String(value);
 }
-function computeAxes(scales, chartArea, strategy, theme) {
+function computeAxes(scales, chartArea, strategy, theme, measureText) {
   const result = {};
   const baseDensity = strategy.axisLabelDensity;
   const yDensity = effectiveDensity(
@@ -6080,25 +6184,39 @@ function computeAxes(scales, chartArea, strategy, theme) {
     fill: theme.colors.text,
     lineHeight: 1.3
   };
+  const { fontSize } = tickLabelStyle;
+  const { fontWeight } = tickLabelStyle;
   if (scales.x) {
-    const ticks2 = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, xDensity) : continuousTicks(scales.x, xDensity);
+    const ticks2 = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, xDensity, fontSize, fontWeight, measureText) : continuousTicks(scales.x, xDensity, fontSize, fontWeight, measureText);
     const gridlines = ticks2.map((t) => ({
       position: t.position,
       major: true
     }));
+    let tickAngle = scales.x.channel.axis?.tickAngle;
+    if (tickAngle === void 0 && scales.x.type === "band" && ticks2.length > 1) {
+      const bandwidth = scales.x.scale.bandwidth();
+      let maxLabelWidth = 0;
+      for (const t of ticks2) {
+        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+      if (maxLabelWidth > bandwidth * 0.85) {
+        tickAngle = -45;
+      }
+    }
     result.x = {
       ticks: ticks2,
       gridlines: scales.x.channel.axis?.grid ? gridlines : [],
       label: scales.x.channel.axis?.label,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
-      tickAngle: scales.x.channel.axis?.tickAngle,
+      tickAngle,
       start: { x: chartArea.x, y: chartArea.y + chartArea.height },
       end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height }
     };
   }
   if (scales.y) {
-    const ticks2 = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, yDensity) : continuousTicks(scales.y, yDensity);
+    const ticks2 = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, yDensity, fontSize, fontWeight, measureText) : continuousTicks(scales.y, yDensity, fontSize, fontWeight, measureText);
     const gridlines = ticks2.map((t) => ({
       position: t.position,
       major: true
@@ -6119,7 +6237,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
 }
 
 // src/layout/dimensions.ts
-import { computeChrome as computeChrome2, estimateTextWidth as estimateTextWidth7 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome2, estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
 function chromeToInput(chrome) {
   return {
     title: chrome.title,
@@ -6129,11 +6247,28 @@ function chromeToInput(chrome) {
     footer: chrome.footer
   };
 }
-function computeDimensions(spec, options, legendLayout, theme) {
+function scalePadding(basePadding, width, height) {
+  const minDim = Math.min(width, height);
+  if (minDim >= 500) return basePadding;
+  if (minDim <= 200) return Math.max(Math.round(basePadding * 0.5), 4);
+  const t = (minDim - 200) / 300;
+  return Math.max(Math.round(basePadding * (0.5 + t * 0.5)), 4);
+}
+var MIN_CHART_WIDTH = 60;
+var MIN_CHART_HEIGHT = 40;
+function computeDimensions(spec, options, legendLayout, theme, strategy) {
   const { width, height } = options;
-  const padding = theme.spacing.padding;
+  const padding = scalePadding(theme.spacing.padding, width, height);
   const axisMargin = theme.spacing.axisMargin;
-  const chrome = computeChrome2(chromeToInput(spec.chrome), theme, width, options.measureText);
+  const chromeMode = strategy?.chromeMode ?? "full";
+  const chrome = computeChrome2(
+    chromeToInput(spec.chrome),
+    theme,
+    width,
+    options.measureText,
+    chromeMode,
+    padding
+  );
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.type === "pie" || spec.type === "donut";
   const encoding = spec.encoding;
@@ -6150,7 +6285,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
     if (xField) {
       for (const row of spec.data) {
         const label = String(row[xField] ?? "");
-        const w = estimateTextWidth7(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth8(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
     }
@@ -6176,7 +6311,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
         const label = String(row[colorField] ?? "");
         if (!seen.has(label)) {
           seen.add(label);
-          const w = estimateTextWidth7(label, 11, 600);
+          const w = estimateTextWidth8(label, 11, 600);
           if (w > maxLabelWidth) maxLabelWidth = w;
         }
       }
@@ -6191,7 +6326,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
       let maxLabelWidth = 0;
       for (const row of spec.data) {
         const label = String(row[yField] ?? "");
-        const w = estimateTextWidth7(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth8(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
@@ -6213,7 +6348,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
       else sampleLabel = "0.0";
       const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? "-" : "";
       const labelEst = negPrefix + sampleLabel;
-      const labelWidth = estimateTextWidth7(
+      const labelWidth = estimateTextWidth8(
         labelEst,
         theme.fonts.sizes.axisTick,
         theme.fonts.weights.normal
@@ -6234,12 +6369,38 @@ function computeDimensions(spec, options, legendLayout, theme) {
       margins.bottom += legendLayout.bounds.height + 4;
     }
   }
-  const chartArea = {
+  let chartArea = {
     x: margins.left,
     y: margins.top,
     width: Math.max(0, width - margins.left - margins.right),
     height: Math.max(0, height - margins.top - margins.bottom)
   };
+  if ((chartArea.width < MIN_CHART_WIDTH || chartArea.height < MIN_CHART_HEIGHT) && chromeMode !== "hidden") {
+    const fallbackMode = chromeMode === "full" ? "compact" : "hidden";
+    const fallbackChrome = computeChrome2(
+      chromeToInput(spec.chrome),
+      theme,
+      width,
+      options.measureText,
+      fallbackMode,
+      padding
+    );
+    const newTop = padding + fallbackChrome.topHeight + axisMargin;
+    const topDelta = margins.top - newTop;
+    const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
+    const bottomDelta = margins.bottom - newBottom;
+    if (topDelta > 0 || bottomDelta > 0) {
+      margins.top = newTop + (legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + 4 : 0);
+      margins.bottom = newBottom;
+      chartArea = {
+        x: margins.left,
+        y: margins.top,
+        width: Math.max(0, width - margins.left - margins.right),
+        height: Math.max(0, height - margins.top - margins.bottom)
+      };
+      return { total, chrome: fallbackChrome, chartArea, margins, theme };
+    }
+  }
   return { total, chrome, chartArea, margins, theme };
 }
 
@@ -6482,12 +6643,14 @@ function computeScales(spec, chartArea, data) {
 }
 
 // src/legend/compute.ts
-import { estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
+import { BRAND_RESERVE_WIDTH, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
 var SWATCH_SIZE2 = 12;
 var SWATCH_GAP2 = 6;
 var ENTRY_GAP2 = 16;
 var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
+var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
+var TOP_LEGEND_MAX_ROWS = 2;
 function swatchShapeForType(chartType) {
   switch (chartType) {
     case "line":
@@ -6513,8 +6676,41 @@ function extractColorEntries(spec, theme) {
     active: true
   }));
 }
+function entriesThatFit(entries, maxWidth, maxRows, labelStyle) {
+  let row = 1;
+  let rowWidth = 0;
+  for (let i = 0; i < entries.length; i++) {
+    const labelWidth = estimateTextWidth9(
+      entries[i].label,
+      labelStyle.fontSize,
+      labelStyle.fontWeight
+    );
+    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
+    if (rowWidth + entryWidth > maxWidth && rowWidth > 0) {
+      row++;
+      rowWidth = entryWidth;
+      if (row > maxRows) return i;
+    } else {
+      rowWidth += entryWidth;
+    }
+  }
+  return entries.length;
+}
+function truncateEntries(entries, maxCount) {
+  if (maxCount >= entries.length || maxCount <= 0) return entries;
+  const truncated = entries.slice(0, maxCount);
+  const remaining = entries.length - maxCount;
+  truncated.push({
+    label: `+${remaining} more`,
+    color: "#999999",
+    shape: "square",
+    active: false,
+    overflow: true
+  });
+  return truncated;
+}
 function computeLegend(spec, strategy, theme, chartArea) {
-  if (spec.legend?.show === false) {
+  if (spec.legend?.show === false || strategy.legendMaxHeight === 0) {
     return {
       position: "top",
       entries: [],
@@ -6531,7 +6727,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entryGap: ENTRY_GAP2
     };
   }
-  const entries = extractColorEntries(spec, theme);
+  let entries = extractColorEntries(spec, theme);
   const labelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.small,
@@ -6553,13 +6749,22 @@ function computeLegend(spec, strategy, theme, chartArea) {
   }
   if (resolvedPosition === "right" || resolvedPosition === "bottom-right") {
     const maxLabelWidth = Math.max(
-      ...entries.map((e) => estimateTextWidth8(e.label, labelStyle.fontSize, labelStyle.fontWeight))
+      ...entries.map((e) => estimateTextWidth9(e.label, labelStyle.fontSize, labelStyle.fontWeight))
     );
     const legendWidth = Math.min(
       LEGEND_RIGHT_WIDTH,
       SWATCH_SIZE2 + SWATCH_GAP2 + maxLabelWidth + LEGEND_PADDING * 2
     );
     const entryHeight = Math.max(SWATCH_SIZE2, labelStyle.fontSize * labelStyle.lineHeight);
+    const maxHeightRatio = strategy.legendMaxHeight > 0 ? strategy.legendMaxHeight : RIGHT_LEGEND_MAX_HEIGHT_RATIO;
+    const maxLegendHeight = chartArea.height * maxHeightRatio;
+    const maxEntries = Math.max(
+      1,
+      Math.floor((maxLegendHeight - LEGEND_PADDING * 2) / (entryHeight + 4))
+    );
+    if (entries.length > maxEntries) {
+      entries = truncateEntries(entries, maxEntries);
+    }
     const legendHeight2 = entries.length * entryHeight + (entries.length - 1) * 4 + LEGEND_PADDING * 2;
     const clampedHeight = Math.min(legendHeight2, chartArea.height);
     const legendY = resolvedPosition === "bottom-right" ? chartArea.y + chartArea.height - clampedHeight : chartArea.y;
@@ -6580,11 +6785,29 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entryGap: 4
     };
   }
+  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - BRAND_RESERVE_WIDTH;
+  const maxFit = entriesThatFit(entries, availableWidth, TOP_LEGEND_MAX_ROWS, labelStyle);
+  if (maxFit < entries.length) {
+    entries = truncateEntries(entries, maxFit);
+  }
   const totalWidth = entries.reduce((sum, entry) => {
-    const labelWidth = estimateTextWidth8(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    const labelWidth = estimateTextWidth9(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
     return sum + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
   }, 0);
-  const legendHeight = SWATCH_SIZE2 + LEGEND_PADDING * 2;
+  let rowCount = 1;
+  let rowWidth = 0;
+  for (const entry of entries) {
+    const labelWidth = estimateTextWidth9(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
+    if (rowWidth + entryWidth > availableWidth && rowWidth > 0) {
+      rowCount++;
+      rowWidth = entryWidth;
+    } else {
+      rowWidth += entryWidth;
+    }
+  }
+  const rowHeight = SWATCH_SIZE2 + 4;
+  const legendHeight = rowCount * rowHeight + LEGEND_PADDING * 2;
   const offsetDx = spec.legend?.offset?.dx ?? 0;
   const offsetDy = spec.legend?.offset?.dy ?? 0;
   return {
@@ -6593,7 +6816,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
     bounds: {
       x: chartArea.x + offsetDx,
       y: (resolvedPosition === "bottom" ? chartArea.y + chartArea.height - legendHeight : chartArea.y) + offsetDy,
-      width: Math.min(totalWidth, chartArea.width),
+      width: Math.min(totalWidth, availableWidth),
       height: legendHeight
     },
     labelStyle,
@@ -6604,7 +6827,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
 }
 
 // src/tables/compile-table.ts
-import { computeChrome as computeChrome3, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome3, estimateTextWidth as estimateTextWidth10 } from "@opendata-ai/openchart-core";
 
 // src/tables/bar-column.ts
 var NEGATIVE_BAR_COLOR = "#c44e52";
@@ -7011,13 +7234,13 @@ function estimateColumnWidth(col, data, fontSize) {
   if (col.image) return (col.image.width ?? 24) + PADDING;
   if (col.flag) return 60;
   const label = col.label ?? col.key;
-  const headerWidth = estimateTextWidth9(label, fontSize, 600) + PADDING;
+  const headerWidth = estimateTextWidth10(label, fontSize, 600) + PADDING;
   const sampleSize = Math.min(100, data.length);
   let maxDataWidth = 0;
   for (let i = 0; i < sampleSize; i++) {
     const val = data[i][col.key];
     const text = val == null ? "" : String(val);
-    const width = estimateTextWidth9(text, fontSize, 400) + PADDING;
+    const width = estimateTextWidth10(text, fontSize, 400) + PADDING;
     if (width > maxDataWidth) maxDataWidth = width;
   }
   return Math.max(MIN_WIDTH, headerWidth, maxDataWidth);
@@ -7374,8 +7597,28 @@ var builtinRenderers = {
 for (const [type, renderer] of Object.entries(builtinRenderers)) {
   registerChartRenderer(type, renderer);
 }
-function computeRowObstacles(marks, scales) {
-  if (!scales.y || scales.y.type !== "band") return [];
+function computeMarkObstacles(marks, scales) {
+  if (scales.y?.type === "band") {
+    return computeBandRowObstacles(marks, scales);
+  }
+  const obstacles = [];
+  for (const mark of marks) {
+    if (mark.type === "rect") {
+      const rm = mark;
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
+    } else if (mark.type === "point") {
+      const pm = mark;
+      obstacles.push({
+        x: pm.cx - pm.r,
+        y: pm.cy - pm.r,
+        width: pm.r * 2,
+        height: pm.r * 2
+      });
+    }
+  }
+  return obstacles;
+}
+function computeBandRowObstacles(marks, scales) {
   const rows = /* @__PURE__ */ new Map();
   for (const mark of marks) {
     let cy;
@@ -7427,7 +7670,8 @@ function compileChart(spec, options) {
   }
   let chartSpec = normalized;
   const breakpoint = getBreakpoint(options.width);
-  const strategy = getLayoutStrategy(breakpoint);
+  const heightClass = getHeightClass(options.height);
+  const strategy = getLayoutStrategy(breakpoint, heightClass);
   const rawSpec = spec;
   const overrides = rawSpec.overrides;
   if (overrides?.[breakpoint]) {
@@ -7478,7 +7722,7 @@ function compileChart(spec, options) {
     height: options.height
   };
   const legendLayout = computeLegend(chartSpec, strategy, theme, preliminaryArea);
-  const dims = computeDimensions(chartSpec, options, legendLayout, theme);
+  const dims = computeDimensions(chartSpec, options, legendLayout, theme, strategy);
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
   if (legendLayout.entries.length > 0) {
@@ -7533,7 +7777,7 @@ function compileChart(spec, options) {
   }
   scales.defaultColor = theme.colors.categorical[0];
   const isRadial = chartSpec.type === "pie" || chartSpec.type === "donut";
-  const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme);
+  const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme, options.measureText);
   if (!isRadial) {
     computeGridlines(axes, chartArea);
   }
@@ -7543,7 +7787,18 @@ function compileChart(spec, options) {
   if (finalLegend.bounds.width > 0) {
     obstacles.push(finalLegend.bounds);
   }
-  obstacles.push(...computeRowObstacles(marks, scales));
+  obstacles.push(...computeMarkObstacles(marks, scales));
+  for (const mark of marks) {
+    if (mark.type !== "area" && mark.label?.visible) {
+      obstacles.push(computeLabelBounds(mark.label));
+    }
+  }
+  const brandPadding = theme.spacing.padding;
+  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
+  const xAxisExtent = axes.x?.label ? 48 : axes.x ? 26 : 0;
+  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
+  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
+  obstacles.push({ x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: 30 });
   const annotations = computeAnnotations(
     chartSpec,
     scales,