graphein 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -1371,6 +1371,12 @@ interface BarSpec extends BaseSpec {
         x: FieldDef;
         y: FieldDef;
     };
+    /**
+     * Bar direction. `'vertical'` (default) draws columns growing up from the
+     * x-axis; `'horizontal'` draws bars growing rightward from the y-axis, with the
+     * `x` categories listed down the left — ideal when category names are long.
+     * The `encoding` is unchanged either way (`x` = category, `y` = value).
+     */
     orientation?: 'vertical' | 'horizontal';
     /** Stack series (default false). */
     stack?: boolean;
@@ -3100,6 +3106,23 @@ interface CartesianModel {
     series: ResolvedSeries[];
     seriesField?: string;
     stacked: boolean;
+    /**
+     * Bar orientation. Only `bar` ever sets `'horizontal'`; every other chart is
+     * `'vertical'`. In horizontal mode the `x` (category/band) axis runs vertically
+     * and the `y` (value) axis runs horizontally — so `x.pixel`/`x.bandwidth` are
+     * vertical extents and `y.pixel`/`y.baseline` are horizontal ones. Consumers map
+     * an (category-axis, value-axis) pixel pair to screen coords via {@link project}.
+     */
+    orientation: 'vertical' | 'horizontal';
+    /**
+     * Map a (category-axis pixel, value-axis pixel) pair to screen `{x, y}`,
+     * accounting for orientation. Vertical is the identity; horizontal swaps the
+     * pair (value → screen x, category → screen y).
+     */
+    project(catPixel: number, valPixel: number): {
+        x: number;
+        y: number;
+    };
     xTicks: Tick[];
     yTicks: Tick[];
     colorOf(key: string): string;

package/dist/index.js

@@ -6245,6 +6245,10 @@ function yGridEnabled(model) {
   return model.spec.axes?.y?.grid !== false;
 }
 function drawAxesUnderlay(surface, model) {
+  if (model.orientation === "horizontal") {
+    drawHorizontalAxesUnderlay(surface, model);
+    return;
+  }
   const ctx = surface.marks.ctx;
   const { plot, tokens } = model;
   const x0 = plot.x;
@@ -6318,6 +6322,58 @@ function drawAxesUnderlay(surface, model) {
   }
   ctx.restore();
 }
+function drawHorizontalAxesUnderlay(surface, model) {
+  const ctx = surface.marks.ctx;
+  const { plot, tokens } = model;
+  const x0 = plot.x;
+  const y0 = plot.y;
+  const y1 = plot.y + plot.height;
+  ctx.save();
+  ctx.lineWidth = 1;
+  const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;
+  const seg = (sx0, sy0, sx1, sy1, stroke) => {
+    pen.polyline([{ x: sx0, y: sy0 }, { x: sx1, y: sy1 }], {
+      stroke,
+      strokeWidth: 1,
+      roughness: model.sketch.roughness * 0.5,
+      bowing: model.sketch.bowing * 0.55
+    });
+  };
+  if (yGridEnabled(model)) {
+    if (pen) {
+      for (const t of model.yTicks) seg(t.pos, y0, t.pos, y1, tokens.color.grid);
+    } else {
+      ctx.strokeStyle = tokens.color.grid;
+      ctx.beginPath();
+      for (const t of model.yTicks) {
+        const x = crisp(t.pos);
+        ctx.moveTo(x, y0);
+        ctx.lineTo(x, y1);
+      }
+      ctx.stroke();
+    }
+  }
+  if (model.spec.axes?.x?.show !== false) {
+    if (pen) {
+      seg(x0, y0, x0, y1, tokens.color.axis);
+      for (const t of model.xTicks) seg(x0 - TICK_SIZE, t.pos, x0, t.pos, tokens.color.axis);
+    } else {
+      ctx.strokeStyle = tokens.color.axis;
+      ctx.beginPath();
+      ctx.moveTo(crisp(x0), y0);
+      ctx.lineTo(crisp(x0), y1);
+      ctx.stroke();
+      ctx.beginPath();
+      for (const t of model.xTicks) {
+        const y = crisp(t.pos);
+        ctx.moveTo(x0 - TICK_SIZE, y);
+        ctx.lineTo(x0, y);
+      }
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+}
 function thinXTicks(model, avgCharPx) {
   const ticks2 = model.xTicks;
   if (ticks2.length <= 1) return ticks2;
@@ -6388,9 +6444,12 @@ function drawOverlay(surface, model) {
   const { plot, tokens, frame } = model;
   const f = tokens.font;
   const smallFont = fontString(f.size.small, f.family, f.weight.normal);
-  if (model.spec.axes?.y?.labels !== false) {
+  const horizontal = model.orientation === "horizontal";
+  const gutterTicks = horizontal ? model.xTicks : model.yTicks;
+  const gutterLabelsOn = horizontal ? model.spec.axes?.x?.labels !== false : model.spec.axes?.y?.labels !== false;
+  if (gutterLabelsOn) {
     const gutterRight = plot.x - TICK_SIZE - 4;
-    for (const t of model.yTicks) {
+    for (const t of gutterTicks) {
       addText(surface, smallFont, {
         left: 0,
         top: t.pos,
@@ -6403,20 +6462,34 @@ function drawOverlay(surface, model) {
       });
     }
   }
-  if (model.spec.axes?.x?.labels !== false) {
+  const bottomLabelsOn = horizontal ? model.spec.axes?.y?.labels !== false : model.spec.axes?.x?.labels !== false;
+  if (bottomLabelsOn) {
     const top = plot.y + plot.height + TICK_SIZE + 3;
-    const rotated = frame.xLabelAngle > 0;
-    for (const p of resolveXLabels(model)) {
-      addText(surface, smallFont, {
-        left: p.left,
-        top,
-        text: p.text,
-        color: tokens.color.textMuted,
-        size: f.size.small,
-        align: rotated ? "right" : void 0,
-        transform: p.transform,
-        transformOrigin: rotated ? "100% 0%" : void 0
-      });
+    if (horizontal) {
+      for (const p of placeXLabels(model.yTicks, frame.originX, frame.width, smallFont)) {
+        addText(surface, smallFont, {
+          left: p.left,
+          top,
+          text: p.text,
+          color: tokens.color.textMuted,
+          size: f.size.small,
+          transform: p.transform
+        });
+      }
+    } else {
+      const rotated = frame.xLabelAngle > 0;
+      for (const p of resolveXLabels(model)) {
+        addText(surface, smallFont, {
+          left: p.left,
+          top,
+          text: p.text,
+          color: tokens.color.textMuted,
+          size: f.size.small,
+          align: rotated ? "right" : void 0,
+          transform: p.transform,
+          transformOrigin: rotated ? "100% 0%" : void 0
+        });
+      }
     }
   }
   drawAxisTitles(surface, model);
@@ -6428,6 +6501,32 @@ function drawAxisTitles(surface, model) {
   const f = tokens.font;
   const baseFont = fontString(f.size.base, f.family, f.weight.medium);
   const xTitle = model.spec.axes?.x?.title ?? model.spec.encoding.x.title;
+  const yTitle = model.spec.axes?.y?.title ?? model.spec.encoding.y.title;
+  if (model.orientation === "horizontal") {
+    if (yTitle) {
+      addText(surface, baseFont, {
+        left: plot.x + plot.width / 2,
+        top: frame.originY + frame.height - Math.round(f.size.base * 1.35),
+        text: yTitle,
+        color: tokens.color.text,
+        size: f.size.base,
+        weight: f.weight.medium,
+        transform: "translateX(-50%)"
+      });
+    }
+    if (xTitle) {
+      addText(surface, baseFont, {
+        left: frame.originX + Math.round(f.size.base * 0.4),
+        top: plot.y + plot.height / 2,
+        text: xTitle,
+        color: tokens.color.text,
+        size: f.size.base,
+        weight: f.weight.medium,
+        transform: "translate(-50%, -50%) rotate(-90deg)"
+      });
+    }
+    return;
+  }
   if (xTitle) {
     addText(surface, baseFont, {
       left: plot.x + plot.width / 2,
@@ -6439,7 +6538,6 @@ function drawAxisTitles(surface, model) {
       transform: "translateX(-50%)"
     });
   }
-  const yTitle = model.spec.axes?.y?.title ?? model.spec.encoding.y.title;
   if (yTitle) {
     addText(surface, baseFont, {
       left: frame.originX + Math.round(f.size.base * 0.4),
@@ -6642,6 +6740,7 @@ function buildCartesianModel(spec, tokens, opts) {
   const yField = enc.y.field;
   const xType = fieldType(spec, enc.x, "nominal");
   const xKind = xKindFor(spec, xType);
+  const horizontal = spec.type === "bar" && spec.orientation === "horizontal";
   const seriesField = resolveSeriesField(spec);
   const rawSeries = groupBySeries(data, seriesField);
   const seriesKeys = rawSeries.map((s) => s.key);
@@ -6797,6 +6896,19 @@ function buildCartesianModel(spec, tokens, opts) {
   }));
   const padding = { ...DEFAULT_PADDING, ...spec.padding };
   const titleInput4 = resolveTitle(spec);
+  const categoryAxisInput = {
+    show: xShow,
+    labels: xLabels,
+    title: resolveAxisTitle(enc.x, xAxisCfg),
+    edgeAnchored: !categories,
+    labelAngle: xAxisCfg.labelAngle
+  };
+  const valueAxisInput = {
+    show: yShow,
+    labels: yLabels,
+    title: resolveAxisTitle(enc.y, yAxisCfg),
+    edgeAnchored: true
+  };
   const frame = computeFrame({
     width: opts.width,
     height: opts.height,
@@ -6806,8 +6918,8 @@ function buildCartesianModel(spec, tokens, opts) {
     font: tokens.font,
     title: titleInput4,
     legend: legend.show && legendItems.length > 1 ? { items: legendItems, position: legend.position } : void 0,
-    xAxis: { show: xShow, labels: xLabels, title: resolveAxisTitle(enc.x, xAxisCfg), edgeAnchored: !categories, labelAngle: xAxisCfg.labelAngle },
-    yAxis: { show: yShow, labels: yLabels, title: resolveAxisTitle(enc.y, yAxisCfg) }
+    xAxis: horizontal ? valueAxisInput : categoryAxisInput,
+    yAxis: horizontal ? categoryAxisInput : valueAxisInput
   });
   const legendHits = legendInteractive(spec) && seriesField && frame.legendItems ? frame.legendItems.map((item, i) => {
     const rowH = Math.max(LEGEND_SWATCH2, Math.round(tokens.font.size.small * 1.35));
@@ -6825,16 +6937,18 @@ function buildCartesianModel(spec, tokens, opts) {
     };
   }) : void 0;
   const plot = frame.plot;
-  const yRange = [plot.y + plot.height, plot.y];
-  const yScale = yIsLog ? logScale({ domain: yDomain, range: yRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: yRange, clamp: yClamp });
+  const valueRange = horizontal ? [plot.x, plot.x + plot.width] : [plot.y + plot.height, plot.y];
+  const yScale = yIsLog ? logScale({ domain: yDomain, range: valueRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: valueRange, clamp: yClamp });
   const yPixel = (value) => yScale.map(toNumber(value));
-  const baseline = yIsLog ? plot.y + plot.height : clampPx(yScale.map(0), plot.y, plot.y + plot.height);
+  const valueMin = horizontal ? plot.x : plot.y;
+  const valueMax = horizontal ? plot.x + plot.width : plot.y + plot.height;
+  const baseline = yIsLog ? horizontal ? plot.x : plot.y + plot.height : clampPx(yScale.map(0), valueMin, valueMax);
   const xModel = buildXModel(xKind, {
     field: xField,
     type: xType,
     categories,
     domainNum: xDomainNum,
-    range: [plot.x, plot.x + plot.width],
+    range: horizontal ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width],
     paddingInner: spec.type === "bar" ? 0.2 : spec.type === "box" ? 0.32 : 0.5,
     scaleCfg: enc.x.scale
   });
@@ -6857,6 +6971,8 @@ function buildCartesianModel(spec, tokens, opts) {
     series,
     seriesField,
     stacked,
+    orientation: horizontal ? "horizontal" : "vertical",
+    project: horizontal ? (catPixel, valPixel) => ({ x: valPixel, y: catPixel }) : (catPixel, valPixel) => ({ x: catPixel, y: valPixel }),
     xTicks,
     yTicks,
     colorOf,
@@ -7254,14 +7370,11 @@ function finite2(value) {
 function defaultRadius(model, spec) {
   return Math.max(0, spec.cornerRadius ?? Math.min(4, model.tokens.radius.sm));
 }
-function cornerSideFor(baseY, valueY) {
-  if (valueY < baseY) return "top";
-  if (valueY > baseY) return "bottom";
-  return "none";
-}
 function makeRadii(side, radius) {
   if (side === "top") return [radius, radius, 0, 0];
   if (side === "bottom") return [0, 0, radius, radius];
+  if (side === "right") return [0, radius, radius, 0];
+  if (side === "left") return [radius, 0, 0, radius];
   return 0;
 }
 function drawRect(ctx, rect, radius, pen, alpha = 1) {
@@ -7281,28 +7394,39 @@ function drawRect(ctx, rect, radius, pen, alpha = 1) {
   ctx.fill();
   if (alpha !== 1) ctx.globalAlpha = prevAlpha;
 }
-function barRect(x, width, baseY, valueY, color) {
-  if (!finite2(x) || !finite2(width) || !finite2(baseY) || !finite2(valueY)) return null;
-  const y = Math.min(baseY, valueY);
-  const height = Math.abs(valueY - baseY);
-  if (width <= 0 || height <= 0) return null;
+function orientedRect(horizontal, catStart, catThick, base, value, color) {
+  if (!finite2(catStart) || !finite2(catThick) || !finite2(base) || !finite2(value)) return null;
+  const lo = Math.min(base, value);
+  const len = Math.abs(value - base);
+  if (catThick <= 0 || len <= 0) return null;
+  if (horizontal) {
+    return {
+      x: lo,
+      y: catStart,
+      width: len,
+      height: catThick,
+      color,
+      cornerSide: value > base ? "right" : value < base ? "left" : "none"
+    };
+  }
   return {
-    x,
-    y,
-    width,
-    height,
+    x: catStart,
+    y: lo,
+    width: catThick,
+    height: len,
     color,
-    cornerSide: cornerSideFor(baseY, valueY)
+    cornerSide: value < base ? "top" : value > base ? "bottom" : "none"
   };
 }
 function drawGroupedBars(ctx, model, radius, pen) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
+  const horizontal = model.orientation === "horizontal";
   const seriesCount = model.series.length;
   const bandWidth = model.x.bandwidth;
   const subWidth = seriesCount > 1 ? bandWidth / seriesCount : bandWidth;
   const gap = seriesCount > 1 && subWidth > 3 ? Math.min(1, subWidth * 0.15) : 0;
-  const barWidth = Math.max(0, subWidth - gap);
+  const barThick = Math.max(0, subWidth - gap);
   model.series.forEach((series, seriesIndex) => {
     ctx.fillStyle = series.color;
     for (const row of series.rows) {
@@ -7311,8 +7435,8 @@ function drawGroupedBars(ctx, model, radius, pen) {
       if (raw == null || raw === "" || !finite2(value)) continue;
       const center2 = model.x.pixel(readX(row));
       if (center2 == null) continue;
-      const left = center2 - bandWidth / 2 + seriesIndex * subWidth + gap / 2;
-      const rect = barRect(left, barWidth, model.y.baseline, model.y.pixel(value), series.color);
+      const catStart = center2 - bandWidth / 2 + seriesIndex * subWidth + gap / 2;
+      const rect = orientedRect(horizontal, catStart, barThick, model.y.baseline, model.y.pixel(value), series.color);
       if (rect) drawRect(ctx, rect, radius, pen, rowAlpha(model.emphasis, row));
     }
   });
@@ -7320,6 +7444,7 @@ function drawGroupedBars(ctx, model, radius, pen) {
 function drawStackedBars(ctx, model, radius, pen) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
+  const horizontal = model.orientation === "horizontal";
   const positiveTotals = /* @__PURE__ */ new Map();
   const negativeTotals = /* @__PURE__ */ new Map();
   const segments = [];
@@ -7339,7 +7464,7 @@ function drawStackedBars(ctx, model, radius, pen) {
       const base = totals.get(categoryKey2) ?? 0;
       const top = base + value;
       totals.set(categoryKey2, top);
-      const rect = barRect(center2 - bandWidth / 2, bandWidth, model.y.pixel(base), model.y.pixel(top), series.color);
+      const rect = orientedRect(horizontal, center2 - bandWidth / 2, bandWidth, model.y.pixel(base), model.y.pixel(top), series.color);
       if (!rect) continue;
       segments.push({ ...rect, stackEndKey, alpha: rowAlpha(model.emphasis, row) });
       roundedEnds.set(stackEndKey, segments.length - 1);
@@ -12454,6 +12579,7 @@ function indexInteraction(model) {
   const xFormat = model.spec.encoding.x?.format;
   const yFormat = model.spec.encoding.y?.format;
   const band = x.kind === "band";
+  const horizontal = model.orientation === "horizontal";
   const showDots = !model.stacked && !band;
   const stopByKey = /* @__PURE__ */ new Map();
   const lookups = [];
@@ -12488,7 +12614,7 @@ function indexInteraction(model) {
   };
   const hitTest = (px, py) => {
     if (!inside(plot, px, py, 6)) return null;
-    const best = nearestStop(px);
+    const best = nearestStop(horizontal ? py : px);
     const rows = [];
     const dots = [];
     let nearestDy = Infinity;
@@ -12516,15 +12642,19 @@ function indexInteraction(model) {
     const anchorY = showDots && nearestIdx >= 0 ? dots[nearestIdx].py : py;
     return {
       key: best.key,
-      anchorX: best.px,
-      anchorY,
+      anchorX: horizontal ? px : best.px,
+      anchorY: horizontal ? best.px : anchorY,
       content: { title: formatValue(best.value, xFormat), rows },
       draw: (ctx) => {
         ctx.save();
         if (band) {
           const half = x.bandwidth / 2;
           ctx.fillStyle = withAlpha(model.tokens.color.text, 0.06);
-          ctx.fillRect(best.px - half, plot.y, x.bandwidth, plot.height);
+          if (horizontal) {
+            ctx.fillRect(plot.x, best.px - half, plot.width, x.bandwidth);
+          } else {
+            ctx.fillRect(best.px - half, plot.y, x.bandwidth, plot.height);
+          }
         } else {
           ctx.strokeStyle = withAlpha(model.tokens.color.text, 0.28);
           ctx.lineWidth = 1;
@@ -12553,7 +12683,7 @@ function indexInteraction(model) {
   };
   const pick = (px, py) => {
     if (!inside(plot, px, py, 6)) return null;
-    const best = nearestStop(px);
+    const best = nearestStop(horizontal ? py : px);
     return { kind: "point", fields: [xField], tuples: [[best.value]] };
   };
   return { region: plot, hitTest, pick };
@@ -12920,6 +13050,8 @@ function buildComboModel(spec, tokens, opts) {
       series: [{ key: "", label: name, color, value: name, rows: data }],
       seriesField: void 0,
       stacked: false,
+      orientation: "vertical",
+      project: (c, v) => ({ x: c, y: v }),
       xTicks,
       yTicks: sideTicks,
       colorOf: () => color,
@@ -12947,6 +13079,8 @@ function buildComboModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks: leftTicks,
     colorOf: () => "",
@@ -13184,6 +13318,8 @@ function buildHistogramModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => color,
@@ -14387,6 +14523,8 @@ function buildWaterfallModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => incColor,
@@ -14648,6 +14786,8 @@ function buildSlopeModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => tokens.color.text,
@@ -15122,9 +15262,14 @@ function toPixel(model, axis, value) {
   return px != null && Number.isFinite(px) ? px : void 0;
 }
 function pointPixels(model, ann) {
-  const px = toPixel(model, "x", ann.x);
-  const py = toPixel(model, "y", ann.y);
-  return px === void 0 || py === void 0 ? void 0 : { px, py };
+  const cat = toPixel(model, "x", ann.x);
+  const val = toPixel(model, "y", ann.y);
+  if (cat === void 0 || val === void 0) return void 0;
+  const { x, y } = model.project(cat, val);
+  return { px: x, py: y };
+}
+function drawsHorizontalRule(model, axis) {
+  return model.orientation === "horizontal" ? axis === "x" : axis === "y";
 }
 function anchorPixel(model, ann, axis, kind) {
   if (kind === "line") return toPixel(model, axis, ann.value);
@@ -15173,6 +15318,7 @@ function drawAnnotations(surface, model) {
     }
     const axis = ann.axis === "x" ? "x" : "y";
     const color = ann.color ?? tokens.color.textMuted;
+    const ruleHorizontal = drawsHorizontalRule(model, axis);
     if (kindOf(ann) === "line") {
       const p = toPixel(model, axis, ann.value);
       if (p === void 0) continue;
@@ -15181,7 +15327,7 @@ function drawAnnotations(surface, model) {
       ctx.lineWidth = ann.strokeWidth ?? 1.5;
       ctx.setLineDash(ann.strokeDash ?? DEFAULT_DASH);
       ctx.beginPath();
-      if (axis === "y") {
+      if (ruleHorizontal) {
         const y = crisp(p);
         ctx.moveTo(plot.x, y);
         ctx.lineTo(x1, y);
@@ -15202,7 +15348,7 @@ function drawAnnotations(surface, model) {
     ctx.save();
     ctx.globalAlpha = ann.fillOpacity ?? DEFAULT_FILL_OPACITY;
     ctx.fillStyle = color;
-    if (axis === "y") ctx.fillRect(plot.x, lo, plot.width, hi - lo);
+    if (ruleHorizontal) ctx.fillRect(plot.x, lo, plot.width, hi - lo);
     else ctx.fillRect(lo, plot.y, hi - lo, plot.height);
     ctx.restore();
     ctx.save();
@@ -15211,7 +15357,7 @@ function drawAnnotations(surface, model) {
     ctx.lineWidth = 1;
     ctx.setLineDash(ann.strokeDash ?? [4, 4]);
     ctx.beginPath();
-    if (axis === "y") {
+    if (ruleHorizontal) {
       ctx.moveTo(plot.x, crisp(lo));
       ctx.lineTo(x1, crisp(lo));
       ctx.moveTo(plot.x, crisp(hi));
@@ -15227,10 +15373,10 @@ function drawAnnotations(surface, model) {
   }
   ctx.restore();
 }
-function labelBox(model, axis, pos, p) {
+function labelBox(model, horizontalRule, pos, p) {
   const { plot } = model;
   const inset = 6;
-  if (axis === "y") {
+  if (horizontalRule) {
     const top = p - 3;
     const transform3 = "translateY(-100%)";
     if (pos === "start") return { left: plot.x + inset, top, width: plot.width - inset, align: "left", transform: transform3 };
@@ -15266,7 +15412,7 @@ function drawAnnotationLabels(surface, model) {
       const axis = ann.axis === "x" ? "x" : "y";
       const p = anchorPixel(model, ann, axis, kindOf(ann));
       if (p === void 0) continue;
-      box = labelBox(model, axis, ann.labelPosition ?? "end", p);
+      box = labelBox(model, drawsHorizontalRule(model, axis), ann.labelPosition ?? "end", p);
     }
     const color = ann.color ?? tokens.color.text;
     const pill = { background: withAlpha4(tokens.color.background, 0.72), radius: 3, padX: 3, padY: 1 };
@@ -16087,7 +16233,8 @@ function checkClippedMarks(model, spec, add) {
   const pHi = model.y.pixel(hi);
   const pLo = model.y.pixel(lo);
   const EPS = 0.75;
-  if (pHi < top - EPS || pLo > bottom + EPS) {
+  const clipped = model.orientation === "horizontal" ? pLo < model.plot.x - EPS || pHi > model.plot.x + model.plot.width + EPS : pHi < top - EPS || pLo > bottom + EPS;
+  if (clipped) {
     add({
       code: "marks-clipped",
       severity: "warning",
@@ -16103,7 +16250,8 @@ function checkClippedMarks(model, spec, add) {
 function checkAxisLabelOverlap(model, spec, tokens, add) {
   const ticks2 = model.xTicks;
   if (ticks2.length < 2) return;
-  if (model.frame.xLabelAngle > 0) return;
+  const horizontal = model.orientation === "horizontal";
+  if (!horizontal && model.frame.xLabelAngle > 0) return;
   const font = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.normal);
   const GAP3 = 4;
   let collisions = 0;
@@ -16111,7 +16259,7 @@ function checkAxisLabelOverlap(model, spec, tokens, add) {
     const prev = ticks2[i - 1];
     const cur = ticks2[i];
     const spacing = Math.abs(cur.pos - prev.pos);
-    const half = (measureText(prev.label, font).width + measureText(cur.label, font).width) / 2;
+    const half = horizontal ? tokens.font.size.small : (measureText(prev.label, font).width + measureText(cur.label, font).width) / 2;
     if (half + GAP3 > spacing) collisions++;
   }
   if (collisions > 0) {