@pixerate/editor 0.162.1 → 0.163.0

package/dist/{chunk-HDGBM7EA.cjs → chunk-SBQVEBSU.cjs}

@@ -7,7 +7,12 @@
 
 
 
-var _chunkLL3H5XUHcjs = require('./chunk-LL3H5XUH.cjs');
+
+
+
+
+
+var _chunkR3P2M7HUcjs = require('./chunk-R3P2M7HU.cjs');
 
 
 var _chunk55AKPTLMcjs = require('./chunk-55AKPTLM.cjs');
@@ -507,6 +512,15 @@ function chartQuantile(sorted, q) {
   const b = _nullishCoalesce(sorted[i + 1], () => ( a));
   return a + (b - a) * (pos - i);
 }
+var roundish = (n) => Number(n.toPrecision(3));
+function suggestChartReferences(spec) {
+  const values = spec.series.filter((s) => !s.hidden && s.axis !== "secondary").flatMap((s) => s.values).filter((v) => v !== null && Number.isFinite(v)).sort((a, b) => a - b);
+  if (!values.length) return { line: { value: 0, label: "Target" }, band: { from: 0, to: 1, label: "Target range" } };
+  const mean = values.reduce((t, v) => t + v, 0) / values.length;
+  const lo = roundish(chartQuantile(values, 0.25));
+  const hi = roundish(chartQuantile(values, 0.75));
+  return { line: { value: roundish(mean), label: "Average" }, band: { from: lo, to: hi > lo ? hi : lo + 1, label: "Middle half" } };
+}
 function chartBoxStats(values) {
   const v = values.filter((x) => x !== null && Number.isFinite(x)).sort((a, b) => a - b);
   if (!v.length) return null;
@@ -822,13 +836,164 @@ function chartSupportsTrendlines(type, stacking) {
   return (type === "bar" || type === "line" || type === "area" || type === "scatter" || type === "bubble") && stacking === "none";
 }
 
+// src/chart/layout-annotations.ts
+var axisOf = (item) => _nullishCoalesce(item.axis, () => ( "y"));
+var chartAnnotationFamily = (family) => family === "cartesian" || family === "xy";
+function referenceValues(spec, axis) {
+  const out = [];
+  for (const l of spec.referenceLines) if (axisOf(l) === axis) out.push(l.value);
+  for (const b of spec.referenceBands) if (axisOf(b) === axis) out.push(b.from, b.to);
+  return out;
+}
+function drawReferences(ctx, plot, axes, layer) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const items = layer === "bands" ? spec.referenceBands : spec.referenceLines;
+  const missing = /* @__PURE__ */ new Set();
+  items.forEach((item, i) => {
+    const axis = axes[axisOf(item)];
+    if (!axis) {
+      missing.add(axisOf(item));
+      return;
+    }
+    const { info, vertical } = axis;
+    const color = _nullishCoalesce(item.color, () => ( theme.text));
+    const lo = vertical ? plot.y : plot.x;
+    const hi = vertical ? plot.y + plot.height : plot.x + plot.width;
+    const inside = (p2) => Number.isFinite(p2) && p2 >= lo - 0.5 && p2 <= hi + 0.5;
+    const at = (v) => info.logBase && !(v > 0) ? NaN : info.raw(v);
+    if ("from" in item) {
+      const a = at(item.from);
+      const b = at(item.to);
+      if (!Number.isFinite(a) || !Number.isFinite(b)) return;
+      const p0 = Math.max(lo, Math.min(a, b));
+      const p1 = Math.min(hi, Math.max(a, b));
+      if (p1 <= p0) return;
+      const rect = vertical ? { x: plot.x, y: p0, width: plot.width, height: p1 - p0 } : { x: p0, y: plot.y, width: p1 - p0, height: plot.height };
+      marks.push({ kind: "rect", key: `reference-band-${i}`, role: "reference-band", ...rect, fill: color, opacity: item.color ? 0.16 : 0.07 });
+      if (item.label) {
+        const text = truncate(item.label, (vertical ? plot.width : rect.width) - 8, fs - 1, measure);
+        marks.push({ kind: "text", key: `reference-label-band-${i}`, role: "reference-label", x: rect.x + 4, y: rect.y + 3, text, anchor: "start", baseline: "top", size: fs - 1, fill: color, opacity: 0.85 });
+      }
+      return;
+    }
+    const p = at(item.value);
+    if (!inside(p)) {
+      ctx.warn("annotations-skipped", `The reference line at ${item.value} is outside the ${axisOf(item) === "x" ? "x" : "value"} axis range and is not drawn.`);
+      return;
+    }
+    const line = vertical ? { x1: plot.x, y1: p, x2: plot.x + plot.width, y2: p } : { x1: p, y1: plot.y, x2: p, y2: plot.y + plot.height };
+    marks.push({ kind: "line", key: `reference-line-${i}`, role: "reference-line", ...line, stroke: color, strokeWidth: 1.25, dash: "5 3", opacity: 0.8 });
+    if (item.label) {
+      const text = truncate(item.label, (vertical ? plot.width : plot.width / 2) - 8, fs - 1, measure);
+      const label = vertical ? { x: plot.x + plot.width - 4, y: p - 3, anchor: "end", baseline: "bottom" } : { x: p + 4, y: plot.y + 2, anchor: "start", baseline: "top" };
+      marks.push({ kind: "text", key: `reference-label-line-${i}`, role: "reference-label", ...label, text, size: fs - 1, weight: 500, fill: color });
+    }
+  });
+  for (const axis of missing)
+    ctx.warn("annotations-skipped", axis === "x" ? "Reference lines and bands on the x axis need a scatter or bubble chart with numeric x values; they are not drawn." : "Reference lines and bands on the secondary axis need a series on that axis; they are not drawn.");
+}
+function anchorOf(mark, horizontal) {
+  if (mark.kind === "rect") return horizontal ? { x: mark.x + mark.width, y: mark.y + mark.height / 2 } : { x: mark.x + mark.width / 2, y: mark.y };
+  if (mark.kind === "circle") return { x: mark.cx, y: mark.cy - mark.r };
+  return null;
+}
+function drawCallouts(ctx, plot) {
+  const { spec, marks, theme, fs, measure } = ctx;
+  const horizontal = spec.orientation === "horizontal";
+  const placed = [];
+  const overlaps = (a) => placed.some((b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height);
+  let unplaced = 0;
+  for (const s of spec.series) {
+    if (s.hidden || !s.callouts) continue;
+    s.callouts.forEach((label, i) => {
+      if (!label) return;
+      const mark = marks.find((m) => (m.role === "bar" || m.role === "point") && _optionalChain([m, 'access', _2 => _2.target, 'optionalAccess', _3 => _3.kind]) === "point" && m.target.seriesId === s.id && m.target.index === i);
+      const anchor = mark ? anchorOf(mark, horizontal && mark.kind === "rect") : null;
+      if (!anchor) {
+        unplaced++;
+        return;
+      }
+      const size = fs - 1;
+      const text = truncate(label, plot.width * 0.6, size, measure);
+      const w = measure(text, size, 600) + 10;
+      const h = size + 8;
+      const sideways = horizontal && mark.kind === "rect";
+      let bx = sideways ? anchor.x + 14 : anchor.x - w / 2;
+      let by = sideways ? anchor.y - h / 2 : anchor.y - h - 14;
+      const clamp = () => {
+        bx = Math.max(plot.x, Math.min(plot.x + plot.width - w, bx));
+        by = Math.max(plot.y - fs / 2, Math.min(plot.y + plot.height - h, by));
+      };
+      clamp();
+      const covers = anchor.x >= bx - 2 && anchor.x <= bx + w + 2 && anchor.y >= by - 2 && anchor.y <= by + h + 2;
+      if (covers) {
+        if (sideways) bx = anchor.x - w - 14;
+        else by = anchor.y + 14;
+        clamp();
+      }
+      for (let k = 0; k < 6 && overlaps({ x: bx, y: by, width: w, height: h }); k++) {
+        if (sideways) by += h + 2;
+        else by -= h + 2;
+        clamp();
+      }
+      const box = { x: bx, y: by, width: w, height: h };
+      placed.push(box);
+      const target = { kind: "point", seriesId: s.id, index: i };
+      const ex = Math.max(bx, Math.min(bx + w, anchor.x));
+      const ey = Math.max(by, Math.min(by + h, anchor.y));
+      if (Math.hypot(ex - anchor.x, ey - anchor.y) > 2) marks.push({ kind: "line", key: `callout-leader-${s.id}-${i}`, role: "callout", x1: anchor.x, y1: anchor.y, x2: ex, y2: ey, stroke: theme.axis, strokeWidth: 1 });
+      marks.push({ kind: "rect", key: `callout-box-${s.id}-${i}`, role: "callout", ...box, fill: theme.surface, stroke: theme.axis, strokeWidth: 1, radius: 3, target });
+      marks.push({ kind: "text", key: `callout-${s.id}-${i}`, role: "callout", x: bx + w / 2, y: by + h / 2, text, anchor: "middle", baseline: "middle", size, weight: 600, fill: theme.text, target });
+    });
+  }
+  if (unplaced) ctx.warn("annotations-skipped", `${unplaced} callout${unplaced === 1 ? " points" : "s point"} at a gap or a hidden value and ${unplaced === 1 ? "is" : "are"} not drawn.`);
+}
+var MUTED = /* @__PURE__ */ new Set(["bar", "line", "area", "point", "slice", "cell", "box", "whisker", "outlier", "connector", "trendline", "trendline-label", "error-bar", "data-label", "legend-swatch", "legend-label"]);
+function applyHighlight(ctx) {
+  const { spec, marks } = ctx;
+  if (!spec.highlight.length) return;
+  const names = new Set(spec.highlight);
+  const categories = /* @__PURE__ */ new Set();
+  spec.categories.forEach((c, i) => names.has(c) && categories.add(i));
+  const series = new Set(spec.series.filter((s) => names.has(s.id) || names.has(s.name)).map((s) => s.id));
+  const unmatched = spec.highlight.filter((h) => !spec.categories.includes(h) && !spec.series.some((s) => s.id === h || s.name === h));
+  if (unmatched.length) ctx.warn("highlight-unmatched", `Highlight names ${unmatched.map((u) => `"${u}"`).join(", ")}, which ${unmatched.length === 1 ? "is" : "are"} neither a category nor a series.`);
+  if (!categories.size && !series.size) return;
+  const bright = (t) => {
+    switch (t.kind) {
+      case "point":
+        return series.has(t.seriesId) || categories.has(t.index);
+      case "series":
+      case "trendline":
+        return !series.size || series.has(t.seriesId);
+      case "category":
+        return !categories.size || categories.has(t.index);
+      default:
+        return true;
+    }
+  };
+  for (let k = 0; k < marks.length; k++) {
+    const m = marks[k];
+    if (!m.target || !MUTED.has(m.role) || bright(m.target)) continue;
+    marks[k] = { ...m, opacity: (_nullishCoalesce(m.opacity, () => ( 1))) * 0.25 };
+  }
+}
+var noteHeight = (spec, fs) => spec.note ? fs * 1.5 : 0;
+function drawNote(ctx, pad) {
+  const { spec, marks, theme, fs, measure, width, height } = ctx;
+  if (!spec.note) return;
+  const text = truncate(spec.note, width - pad * 2, fs - 1, measure);
+  if (text !== spec.note) ctx.warn("labels-truncated", "The note was shortened to fit the width.");
+  marks.push({ kind: "text", key: "note", role: "note", x: pad, y: height - pad + 2, text, anchor: "start", baseline: "bottom", size: fs - 1, fill: theme.mutedText });
+}
+
 // src/chart/layout-cartesian.ts
 var MAX_CHART_DATA_LABELS = 200;
 var MAX_CHART_LINE_POINTS = 2e3;
 var MAX_CHART_MARKERS = 1e3;
 function scaleInfo(scale, range, format, axis) {
-  const logBase = _optionalChain([axis, 'optionalAccess', _2 => _2.scale]) === "log" ? _nullishCoalesce(axis.logBase, () => ( 10)) : void 0;
-  const r = _optionalChain([axis, 'optionalAccess', _3 => _3.reverse]) ? [range[1], range[0]] : range;
+  const logBase = _optionalChain([axis, 'optionalAccess', _4 => _4.scale]) === "log" ? _nullishCoalesce(axis.logBase, () => ( 10)) : void 0;
+  const r = _optionalChain([axis, 'optionalAccess', _5 => _5.reverse]) ? [range[1], range[0]] : range;
   const vs = { domain: [scale.min, scale.max], range: r, logBase };
   const raw = (v) => chartScaleToPixel(v, vs);
   const px = (v) => logBase && !(v > 0) ? r[0] : raw(Math.min(scale.max, Math.max(scale.min, v)));
@@ -849,7 +1014,7 @@ function categoryFrame(ctx, area, input) {
   };
   const valueLen0 = horizontal ? area.width : area.height;
   const valueLabelWidth = primary.axis.show ? estimate(primary, valueLen0) : 0;
-  const valueLabelWidth2 = _optionalChain([secondary, 'optionalAccess', _4 => _4.axis, 'access', _5 => _5.show]) ? estimate(secondary, valueLen0) : 0;
+  const valueLabelWidth2 = _optionalChain([secondary, 'optionalAccess', _6 => _6.axis, 'access', _7 => _7.show]) ? estimate(secondary, valueLen0) : 0;
   const catLabelWidth = Math.max(0, ...labels.map((c) => measure(c, fs)));
   let left;
   let bottom;
@@ -973,7 +1138,7 @@ function categoryFrame(ctx, area, input) {
     marks.push({ kind: "text", key: `axis-title-${horizontal ? "y" : "x"}`, role: "axis-title", x: plot.x + plot.width / 2, y: area.y + area.height, text: bottomTitle, anchor: "middle", baseline: "bottom", size: fs + 1, weight: 500, fill: theme.text, target: horizontal ? yTarget : xTarget });
   if (leftTitle)
     marks.push({ kind: "text", key: `axis-title-${horizontal ? "x" : "y"}`, role: "axis-title", x: area.x, y: plot.y + plot.height / 2, text: leftTitle, anchor: "middle", baseline: "top", size: fs + 1, weight: 500, fill: theme.text, rotate: -90, target: horizontal ? xTarget : yTarget });
-  if (_optionalChain([secondary, 'optionalAccess', _6 => _6.axis, 'access', _7 => _7.title])) {
+  if (_optionalChain([secondary, 'optionalAccess', _8 => _8.axis, 'access', _9 => _9.title])) {
     const target = { kind: "axis", axis: "y2" };
     if (horizontal) marks.push({ kind: "text", key: "axis-title-y2", role: "axis-title", x: plot.x + plot.width / 2, y: area.y, text: secondary.axis.title, anchor: "middle", baseline: "top", size: fs + 1, weight: 500, fill: theme.text, target });
     else marks.push({ kind: "text", key: "axis-title-y2", role: "axis-title", x: area.x + area.width, y: plot.y + plot.height / 2, text: secondary.axis.title, anchor: "middle", baseline: "top", size: fs + 1, weight: 500, fill: theme.text, rotate: 90, target });
@@ -1074,7 +1239,7 @@ function layoutCartesian(ctx, area, visible) {
   const { spec, theme, marks, measure, fs } = ctx;
   const horizontal = spec.orientation === "horizontal";
   const n = spec.categories.length;
-  const types = new Map(visible.map((s) => [s.id, _chunkLL3H5XUHcjs.chartSeriesType.call(void 0, spec, s)]));
+  const types = new Map(visible.map((s) => [s.id, _chunkR3P2M7HUcjs.chartSeriesType.call(void 0, spec, s)]));
   const stacked = spec.stacking !== "none";
   const percent = spec.stacking === "percent";
   const onSecondary = (s) => s.axis === "secondary";
@@ -1111,9 +1276,9 @@ function layoutCartesian(ctx, area, visible) {
     const stack = stacks.get(s.id);
     errors.set(
       s.id,
-      _chunkLL3H5XUHcjs.chartErrorAmounts.call(void 0, s.errorBars, s.values).map((e, i) => {
+      _chunkR3P2M7HUcjs.chartErrorAmounts.call(void 0, s.errorBars, s.values).map((e, i) => {
         const raw = s.values[i];
-        const seg = _optionalChain([stack, 'optionalAccess', _8 => _8.segments, 'access', _9 => _9[i]]);
+        const seg = _optionalChain([stack, 'optionalAccess', _10 => _10.segments, 'access', _11 => _11[i]]);
         if (!e || raw === null || stack && !seg) return null;
         const k = seg && percent ? raw ? (seg[1] - seg[0]) / raw : 0 : 1;
         const center = (seg ? seg[1] : raw) + (e.center - raw) * k;
@@ -1135,8 +1300,9 @@ function layoutCartesian(ctx, area, visible) {
       const stack = stacks.get(s.id);
       if (stack) stack.segments.forEach((seg) => seg && (see(seg[0]), see(seg[1])));
       else s.values.forEach((v) => v !== null && see(v));
-      _optionalChain([errors, 'access', _10 => _10.get, 'call', _11 => _11(s.id), 'optionalAccess', _12 => _12.forEach, 'call', _13 => _13((e) => e && (see(e.lo), see(e.hi)))]);
+      _optionalChain([errors, 'access', _12 => _12.get, 'call', _13 => _13(s.id), 'optionalAccess', _14 => _14.forEach, 'call', _15 => _15((e) => e && (see(e.lo), see(e.hi)))]);
     }
+    for (const v of referenceValues(spec, secondary ? "y2" : "y")) see(v);
     if (log) {
       const skipped = group.reduce((t, s) => t + s.values.filter((v) => v !== null && Number.isFinite(v) && v <= 0).length, 0);
       if (skipped) ctx.warn("values-skipped", `${skipped} value${skipped === 1 ? "" : "s"} of 0 or less cannot be drawn on the logarithmic ${secondary ? "secondary " : ""}value axis and ${skipped === 1 ? "was" : "were"} skipped.`);
@@ -1163,6 +1329,8 @@ function layoutCartesian(ctx, area, visible) {
   });
   const { plot, band, catCenter, map, catStart } = frame;
   const infoOf = (s) => onSecondary(s) && frame.value2 ? frame.value2 : frame.value;
+  const refAxes = { y: { info: frame.value, vertical: !horizontal }, ...frame.value2 ? { y2: { info: frame.value2, vertical: !horizontal } } : {} };
+  drawReferences(ctx, plot, refAxes, "bands");
   const bars = visible.filter((s) => types.get(s.id) === "bar");
   const barAxes = [...new Set(bars.map((s) => onSecondary(s)))];
   const slots = stacked ? barAxes.length : bars.length;
@@ -1178,7 +1346,7 @@ function layoutCartesian(ctx, area, visible) {
   const drawOrder = [...visible].sort((a, b) => order(types.get(a.id)) - order(types.get(b.id)));
   for (const s of drawOrder) {
     const si = spec.series.indexOf(s);
-    const color = _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, si);
+    const color = _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, si);
     const type = types.get(s.id);
     const stack = stacks.get(s.id);
     const selSeries = ctx.seriesSelected(s.id);
@@ -1204,7 +1372,7 @@ function layoutCartesian(ctx, area, visible) {
         const selected = ctx.isSelected(target);
         const [x, y] = map({ c: c0, v: Math.min(a, b) });
         const rect = horizontal ? { x: Math.min(a, b), y: c0, width: Math.abs(b - a), height: cw } : { x, y, width: cw, height: Math.abs(b - a) };
-        const fill = _chunkLL3H5XUHcjs.chartPointColor.call(void 0, spec, si, i);
+        const fill = _chunkR3P2M7HUcjs.chartPointColor.call(void 0, spec, si, i);
         marks.push({
           kind: "rect",
           key: `bar-${s.id}-${i}`,
@@ -1232,7 +1400,7 @@ function layoutCartesian(ctx, area, visible) {
     } else {
       const curve = _nullishCoalesce(s.curve, () => ( spec.curve));
       const pointValue = (i) => {
-        const v = stack ? _nullishCoalesce(_optionalChain([stack, 'access', _14 => _14.segments, 'access', _15 => _15[i], 'optionalAccess', _16 => _16[1]]), () => ( null)) : s.values[i];
+        const v = stack ? _nullishCoalesce(_optionalChain([stack, 'access', _16 => _16.segments, 'access', _17 => _17[i], 'optionalAccess', _18 => _18[1]]), () => ( null)) : s.values[i];
         return v !== null && Number.isFinite(v) && !(log && (v <= 0 || (_nullishCoalesce(s.values[i], () => ( 0))) <= 0)) ? v : null;
       };
       const runs = [];
@@ -1256,7 +1424,7 @@ function layoutCartesian(ctx, area, visible) {
       const drawn = runs.map(thin);
       if (type === "area") {
         const parts = drawn.map((r) => {
-          const baseline = stack ? r.map((pt) => ({ c: pt.c, v: valuePx(_nullishCoalesce(_optionalChain([stack, 'access', _17 => _17.segments, 'access', _18 => _18[pt.i], 'optionalAccess', _19 => _19[0]]), () => ( 0))) })).reverse() : [
+          const baseline = stack ? r.map((pt) => ({ c: pt.c, v: valuePx(_nullishCoalesce(_optionalChain([stack, 'access', _19 => _19.segments, 'access', _20 => _20[pt.i], 'optionalAccess', _21 => _21[0]]), () => ( 0))) })).reverse() : [
             { c: r[r.length - 1].c, v: info.zero },
             { c: r[0].c, v: info.zero }
           ];
@@ -1283,7 +1451,7 @@ function layoutCartesian(ctx, area, visible) {
         const target = { kind: "point", seriesId: s.id, index: i };
         const selected = ctx.isSelected(target);
         const r = type === "scatter" ? 4.5 : 3.5;
-        const pointColor = _chunkLL3H5XUHcjs.chartPointColor.call(void 0, spec, si, i);
+        const pointColor = _chunkR3P2M7HUcjs.chartPointColor.call(void 0, spec, si, i);
         const fill = showDots ? type === "scatter" ? pointColor : theme.surface : "transparent";
         marks.push(
           pointMark({ key: `point-${s.id}-${i}`, target, selected: selected || selSeries, opacity: type === "scatter" ? 0.85 : void 0 }, showDots ? marker : "hit", cx, cy, showDots ? r : 6, fill, showDots ? pointColor : void 0, 2)
@@ -1320,13 +1488,14 @@ function layoutCartesian(ctx, area, visible) {
         if (d) errorMarks.push({ kind: "path", key: `error-bar-${s.id}-${i}`, role: "error-bar", d, fill: "none", stroke: type === "bar" ? theme.text : color, strokeWidth: selSeries ? 2 : 1.25, target: seriesTarget, selected: selSeries });
       });
     }
-    if (trendsAllowed && _optionalChain([s, 'access', _20 => _20.trendlines, 'optionalAccess', _21 => _21.length])) {
+    if (trendsAllowed && _optionalChain([s, 'access', _22 => _22.trendlines, 'optionalAccess', _23 => _23.length])) {
       const points = [];
       s.values.forEach((v, i) => v !== null && Number.isFinite(v) && points.push([i + 1, v]));
       const toPx = (x, y) => map({ c: catCenter(x - 1), v: info.raw(y) });
       drawTrendlines(ctx, plot, s, color, points, toPx, trendLabels, !!info.logBase);
     }
   }
+  drawReferences(ctx, plot, refAxes, "lines");
   marks.push(...errorMarks, ...labelMarks);
   drawTrendLabels(ctx, plot, trendLabels);
   if (hiddenLabels) ctx.warn("data-labels-hidden", `${hiddenLabels} data label${hiddenLabels === 1 ? "" : "s"} did not fit and ${hiddenLabels === 1 ? "is" : "are"} hidden.`);
@@ -1345,7 +1514,7 @@ function layoutXy(ctx, area, visible) {
   const xLog = xAxis.scale === "log";
   const yLog = yAxis.scale === "log";
   let skipped = 0;
-  const pointsOf = (s) => s.values.map((y, i) => ({ i, x: _nullishCoalesce(_optionalChain([s, 'access', _22 => _22.x, 'optionalAccess', _23 => _23[i]]), () => ( (bubble || !s.x ? i + 1 : null))), y, size: _nullishCoalesce(_optionalChain([s, 'access', _24 => _24.sizes, 'optionalAccess', _25 => _25[i]]), () => ( null)) })).filter((p) => {
+  const pointsOf = (s) => s.values.map((y, i) => ({ i, x: _nullishCoalesce(_optionalChain([s, 'access', _24 => _24.x, 'optionalAccess', _25 => _25[i]]), () => ( (bubble || !s.x ? i + 1 : null))), y, size: _nullishCoalesce(_optionalChain([s, 'access', _26 => _26.sizes, 'optionalAccess', _27 => _27[i]]), () => ( null)) })).filter((p) => {
     if (p.x === null || p.y === null || !Number.isFinite(p.x) || !Number.isFinite(p.y)) return false;
     if (xLog && p.x <= 0 || yLog && p.y <= 0) return skipped++, false;
     return true;
@@ -1355,8 +1524,8 @@ function layoutXy(ctx, area, visible) {
   const yErrors = /* @__PURE__ */ new Map();
   const xErrors = /* @__PURE__ */ new Map();
   for (const { s } of all) {
-    if (s.errorBars) yErrors.set(s.id, _chunkLL3H5XUHcjs.chartErrorAmounts.call(void 0, s.errorBars, s.values));
-    if (s.xErrorBars) xErrors.set(s.id, _chunkLL3H5XUHcjs.chartErrorAmounts.call(void 0, s.xErrorBars, s.values.map((_, i) => _nullishCoalesce(_optionalChain([s, 'access', _26 => _26.x, 'optionalAccess', _27 => _27[i]]), () => ( (bubble || !s.x ? i + 1 : null))))));
+    if (s.errorBars) yErrors.set(s.id, _chunkR3P2M7HUcjs.chartErrorAmounts.call(void 0, s.errorBars, s.values));
+    if (s.xErrorBars) xErrors.set(s.id, _chunkR3P2M7HUcjs.chartErrorAmounts.call(void 0, s.xErrorBars, s.values.map((_, i) => _nullishCoalesce(_optionalChain([s, 'access', _28 => _28.x, 'optionalAccess', _29 => _29[i]]), () => ( (bubble || !s.x ? i + 1 : null))))));
   }
   let xlo = Infinity;
   let xhi = -Infinity;
@@ -1378,9 +1547,9 @@ function layoutXy(ctx, area, visible) {
       seeX(p.x);
       seeY(p.y);
       if (p.size !== null && p.size > maxSize) maxSize = p.size;
-      const ey = _optionalChain([yErrors, 'access', _28 => _28.get, 'call', _29 => _29(s.id), 'optionalAccess', _30 => _30[p.i]]);
+      const ey = _optionalChain([yErrors, 'access', _30 => _30.get, 'call', _31 => _31(s.id), 'optionalAccess', _32 => _32[p.i]]);
       if (ey) seeY(ey.center - ey.minus), seeY(ey.center + ey.plus);
-      const ex = _optionalChain([xErrors, 'access', _31 => _31.get, 'call', _32 => _32(s.id), 'optionalAccess', _33 => _33[p.i]]);
+      const ex = _optionalChain([xErrors, 'access', _33 => _33.get, 'call', _34 => _34(s.id), 'optionalAccess', _35 => _35[p.i]]);
       if (ex) seeX(ex.center - ex.minus), seeX(ex.center + ex.plus);
     }
     for (const t of _nullishCoalesce(s.trendlines, () => ( []))) {
@@ -1389,6 +1558,8 @@ function layoutXy(ctx, area, visible) {
       seeX(Math.max(...pts.map((p) => p.x)) + (_nullishCoalesce(t.forward, () => ( 0))));
     }
   }
+  for (const v of referenceValues(spec, "y")) seeY(v);
+  for (const v of referenceValues(spec, "x")) seeX(v);
   if (!Number.isFinite(xlo)) [xlo, xhi] = xLog ? [1, 10] : [0, 1];
   if (!Number.isFinite(ylo)) [ylo, yhi] = yLog ? [1, 10] : [0, 1];
   const titleBand = fs * 1.3 + 6;
@@ -1430,13 +1601,15 @@ function layoutXy(ctx, area, visible) {
     if (!ctx.isSelected({ kind: "axis", axis })) continue;
     ctx.outline(`axis-${axis}-selection`, axis === "y" ? { x: area.x, y: plot.y - fs / 2, width: left - 2, height: plot.height + fs } : { x: plot.x - 4, y: plot.y + plot.height + 2, width: plot.width + 8, height: area.y + area.height - plot.y - plot.height - 2 });
   }
+  const refAxes = { y: { info: yInfo, vertical: true }, x: { info: xInfo, vertical: false } };
+  drawReferences(ctx, plot, refAxes, "bands");
   const labelMarks = [];
   const errorMarks = [];
   const trendLabels = [];
   for (const { s, pts } of all) {
     const si = spec.series.indexOf(s);
-    const color = _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, si);
-    const type = _chunkLL3H5XUHcjs.chartSeriesType.call(void 0, spec, s);
+    const color = _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, si);
+    const type = _chunkR3P2M7HUcjs.chartSeriesType.call(void 0, spec, s);
     const selSeries = ctx.seriesSelected(s.id);
     const seriesTarget = { kind: "series", seriesId: s.id };
     if (type === "line" || type === "area") {
@@ -1461,7 +1634,7 @@ function layoutXy(ctx, area, visible) {
       }
       const target = { kind: "point", seriesId: s.id, index: p.i };
       const selected = ctx.isSelected(target);
-      const pointColor = _chunkLL3H5XUHcjs.chartPointColor.call(void 0, spec, si, p.i);
+      const pointColor = _chunkR3P2M7HUcjs.chartPointColor.call(void 0, spec, si, p.i);
       const r = bubble ? maxSize > 0 && p.size !== null && p.size > 0 ? Math.max(2, Math.sqrt(p.size / maxSize) * maxR) : 2 : 4.5;
       if (bubble) marks.push({ kind: "circle", key: `point-${s.id}-${p.i}`, role: "point", cx, cy, r, fill: pointColor, stroke: pointColor, strokeWidth: 1, opacity: 0.6, target, selected: selected || selSeries });
       else marks.push(pointMark({ key: `point-${s.id}-${p.i}`, target, selected: selected || selSeries, opacity: 0.85 }, marker === "none" ? "hit" : marker, cx, cy, marker === "none" ? 6 : r, marker === "none" ? "transparent" : pointColor, marker === "none" ? void 0 : pointColor, 2));
@@ -1471,14 +1644,14 @@ function layoutXy(ctx, area, visible) {
     const stroke = color;
     const errorBar = (key, d) => d && errorMarks.push({ kind: "path", key, role: "error-bar", d, fill: "none", stroke, strokeWidth: selSeries ? 2 : 1.25, target: seriesTarget, selected: selSeries });
     for (const p of pts) {
-      const ey = _optionalChain([yErrors, 'access', _34 => _34.get, 'call', _35 => _35(s.id), 'optionalAccess', _36 => _36[p.i]]);
+      const ey = _optionalChain([yErrors, 'access', _36 => _36.get, 'call', _37 => _37(s.id), 'optionalAccess', _38 => _38[p.i]]);
       if (ey) {
         const lo = ey.center - ey.minus;
         const hi = ey.center + ey.plus;
         const cap = s.errorBars.cap !== false;
         errorBar(`error-bar-${s.id}-${p.i}`, errorBarPath((q) => [q.c, q.v], xPx(p.x), yPx(lo), yPx(hi), 8, cap && lo < ey.center, cap && hi > ey.center));
       }
-      const ex = _optionalChain([xErrors, 'access', _37 => _37.get, 'call', _38 => _38(s.id), 'optionalAccess', _39 => _39[p.i]]);
+      const ex = _optionalChain([xErrors, 'access', _39 => _39.get, 'call', _40 => _40(s.id), 'optionalAccess', _41 => _41[p.i]]);
       if (ex) {
         const lo = ex.center - ex.minus;
         const hi = ex.center + ex.plus;
@@ -1486,8 +1659,9 @@ function layoutXy(ctx, area, visible) {
         errorBar(`error-bar-x-${s.id}-${p.i}`, errorBarPath((q) => [q.v, q.c], yPx(p.y), xPx(lo), xPx(hi), 8, cap && lo < ex.center, cap && hi > ex.center));
       }
     }
-    if (_optionalChain([s, 'access', _40 => _40.trendlines, 'optionalAccess', _41 => _41.length])) drawTrendlines(ctx, plot, s, color, pts.map((p) => [p.x, p.y]), (x, y) => [xRaw(x), yRaw(y)], trendLabels, xLog || yLog);
+    if (_optionalChain([s, 'access', _42 => _42.trendlines, 'optionalAccess', _43 => _43.length])) drawTrendlines(ctx, plot, s, color, pts.map((p) => [p.x, p.y]), (x, y) => [xRaw(x), yRaw(y)], trendLabels, xLog || yLog);
   }
+  drawReferences(ctx, plot, refAxes, "lines");
   marks.push(...errorMarks, ...labelMarks);
   drawTrendLabels(ctx, plot, trendLabels);
   return {
@@ -1504,7 +1678,7 @@ function trendlineLegendItems(spec, color) {
 }
 
 // src/chart/layout-families.ts
-var sliceColor = (ctx, series, i) => _optionalChain([series, 'access', _42 => _42.pointColors, 'optionalAccess', _43 => _43[i]]) || _chunkLL3H5XUHcjs.chartSliceColor.call(void 0, ctx.spec, i);
+var sliceColor = (ctx, series, i) => _optionalChain([series, 'access', _44 => _44.pointColors, 'optionalAccess', _45 => _45[i]]) || _chunkR3P2M7HUcjs.chartSliceColor.call(void 0, ctx.spec, i);
 function layoutPie(ctx, area, series) {
   const { spec, theme, marks, fs, selection } = ctx;
   const values = spec.categories.map((_, i) => {
@@ -1534,7 +1708,7 @@ function layoutPie(ctx, area, series) {
     angle = end;
     const target = { kind: "point", seriesId: series.id, index: i };
     const selected = ctx.isSelected(target) || ctx.isSelected({ kind: "category", index: i });
-    const seriesSel = _optionalChain([selection, 'optionalAccess', _44 => _44.kind]) === "series" && selection.seriesId === series.id;
+    const seriesSel = _optionalChain([selection, 'optionalAccess', _46 => _46.kind]) === "series" && selection.seriesId === series.id;
     const mid = (start + end) / 2;
     const off = selected ? 6 : 0;
     const ox = cx + off * Math.sin(mid);
@@ -1620,7 +1794,7 @@ function layoutRadar(ctx, area, visible) {
     });
   for (const s of visible) {
     const si = spec.series.indexOf(s);
-    const color = _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, si);
+    const color = _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, si);
     const selSeries = ctx.seriesSelected(s.id);
     const pts = s.values.map((v, i) => v !== null && Number.isFinite(v) ? at(i, rOf(v)) : null);
     const present = pts.filter((p) => p !== null);
@@ -1670,7 +1844,7 @@ function layoutWaterfall(ctx, area, series) {
   });
   const { band, catCenter, map, value } = frame;
   const w = band * (1 - spec.gapWidth);
-  const color = _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(series));
+  const color = _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(series));
   const format = _nullishCoalesce(series.format, () => ( spec.yAxis.format));
   const labelsOn = _nullishCoalesce(series.dataLabels, () => ( spec.dataLabels));
   let prevEnd = null;
@@ -1729,7 +1903,7 @@ function layoutHistogram(ctx, area, visible) {
   const gap = k > 1 ? band * spec.gapWidth * 0.5 : 0;
   const w = (band - gap) / k;
   visible.forEach((s, si) => {
-    const color = _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
+    const color = _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
     const target = { kind: "series", seriesId: s.id };
     const selected = ctx.seriesSelected(s.id);
     counts[si].forEach((c, b) => {
@@ -1760,7 +1934,7 @@ function layoutBox(ctx, area, visible) {
   visible.forEach((s, i) => {
     const st = stats[i];
     if (!st) return;
-    const color = _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
+    const color = _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
     const target = { kind: "series", seriesId: s.id };
     const selected = ctx.seriesSelected(s.id);
     const c = catCenter(i);
@@ -1843,16 +2017,349 @@ function layoutTreemap(ctx, area, series) {
   if (unlabelled) ctx.warn("data-labels-hidden", `${unlabelled} treemap cell${unlabelled === 1 ? " is" : "s are"} too small for a label.`);
   return { plot: area };
 }
+function dodge(ys, gap, top, bottom) {
+  const out = [...ys];
+  for (let k = 1; k < out.length; k++) out[k] = Math.max(out[k], out[k - 1] + gap);
+  const over = out.length ? out[out.length - 1] - bottom : 0;
+  if (over > 0) for (let k = out.length - 1; k >= 0; k--) out[k] = Math.max(top, Math.min(out[k] - over, k < out.length - 1 ? out[k + 1] - gap : Infinity));
+  return out;
+}
+function layoutSlope(ctx, area, visible) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const [a, b] = visible;
+  if (visible.length > 2) ctx.warn("values-skipped", `A slope chart joins two series; ${visible.length - 2} more ${visible.length === 3 ? "is" : "are"} not drawn.`);
+  const at = (s, i) => {
+    const v = s.values[i];
+    return v !== null && Number.isFinite(v) ? v : null;
+  };
+  const all = spec.categories.flatMap((_, i) => [at(a, i), at(b, i)]).filter((v) => v !== null);
+  const lo = Math.min(...all);
+  const hi = Math.max(...all);
+  const labelsOn = _nullishCoalesce(_nullishCoalesce(a.dataLabels, () => ( b.dataLabels)), () => ( spec.dataLabels));
+  const fmtA = (v) => formatChartNumber(v, _nullishCoalesce(a.format, () => ( spec.yAxis.format)));
+  const fmtB = (v) => formatChartNumber(v, _nullishCoalesce(b.format, () => ( spec.yAxis.format)));
+  const leftText = (i) => {
+    const v = at(a, i);
+    return labelsOn && v !== null ? `${spec.categories[i]}  ${fmtA(v)}` : spec.categories[i];
+  };
+  const rightText = (i) => {
+    const v = at(b, i);
+    return labelsOn && v !== null ? `${fmtB(v)}  ${spec.categories[i]}` : spec.categories[i];
+  };
+  const maxW = area.width * 0.3;
+  const leftW = Math.min(maxW, Math.max(0, ...spec.categories.map((_, i) => measure(leftText(i), fs))));
+  const rightW = Math.min(maxW, Math.max(0, ...spec.categories.map((_, i) => measure(rightText(i), fs))));
+  const headerH = fs * 1.8;
+  const plot = { x: area.x + leftW + 10, y: area.y + headerH + fs / 2, width: Math.max(1, area.width - leftW - rightW - 20), height: Math.max(1, area.height - headerH - fs) };
+  const scale = axisScale(lo, hi, plot.height, spec.yAxis, ctx.options.valueDomain, true);
+  const yOf = (v) => linearMap(Math.min(scale.max, Math.max(scale.min, v)), [scale.min, scale.max], [plot.y + plot.height, plot.y]);
+  const xL = plot.x;
+  const xR = plot.x + plot.width;
+  for (const [s, x, anchor] of [[a, xL, "end"], [b, xR, "start"]]) {
+    const target = { kind: "series", seriesId: s.id };
+    const selected = ctx.seriesSelected(s.id);
+    marks.push({ kind: "line", key: `axis-slope-${s.id}`, role: "axis", x1: x, y1: plot.y, x2: x, y2: plot.y + plot.height, stroke: theme.axis, strokeWidth: 1, target });
+    marks.push({ kind: "text", key: `axis-title-${s.id}`, role: "axis-title", x, y: area.y, text: truncate(s.name, maxW + plot.width / 2, fs + 1, measure), anchor: anchor === "end" ? "end" : "start", baseline: "top", size: fs + 1, weight: 600, fill: selected ? theme.selection : theme.text, target, selected });
+  }
+  const leftLabels = [];
+  const rightLabels = [];
+  spec.categories.forEach((_, i) => {
+    const va = at(a, i);
+    const vb = at(b, i);
+    const color = sliceColor(ctx, a, i);
+    const catTarget = { kind: "category", index: i };
+    const catSelected = ctx.isSelected(catTarget);
+    if (va !== null && vb !== null)
+      marks.push({ kind: "line", key: `line-slope-${i}`, role: "line", x1: xL, y1: yOf(va), x2: xR, y2: yOf(vb), stroke: color, strokeWidth: catSelected ? 3.5 : 2, target: catTarget, selected: catSelected });
+    for (const [s, v, x, labels] of [[a, va, xL, leftLabels], [b, vb, xR, rightLabels]]) {
+      if (v === null) continue;
+      const target = { kind: "point", seriesId: s.id, index: i };
+      const selected = ctx.isSelected(target);
+      marks.push({ kind: "circle", key: `point-${s.id}-${i}`, role: "point", cx: x, cy: yOf(v), r: 4, fill: color, stroke: theme.surface, strokeWidth: 1.5, target, selected: selected || catSelected || ctx.seriesSelected(s.id) });
+      if (selected) marks.push({ kind: "circle", key: `point-${s.id}-${i}-selection`, role: "selection", cx: x, cy: yOf(v), r: 7.5, fill: "none", stroke: theme.selection, strokeWidth: 1.5 });
+      labels.push({ i, y: yOf(v) });
+    }
+  });
+  let moved = 0;
+  for (const [labels, x, anchor, text, width] of [[leftLabels, xL - 8, "end", leftText, leftW], [rightLabels, xR + 8, "start", rightText, rightW]]) {
+    labels.sort((p, q) => p.y - q.y);
+    const ys = dodge(labels.map((l) => l.y), fs * 1.15, plot.y - fs / 2, plot.y + plot.height + fs / 2);
+    labels.forEach((l, k) => {
+      if (Math.abs(ys[k] - l.y) > 0.5) moved++;
+      const target = { kind: "category", index: l.i };
+      const selected = ctx.isSelected(target);
+      marks.push({ kind: "text", key: `label-slope-${anchor === "end" ? "left" : "right"}-${l.i}`, role: "data-label", x, y: ys[k], text: truncate(text(l.i), width, fs, measure), anchor, baseline: "middle", size: fs, fill: selected ? theme.selection : theme.text, weight: selected ? 600 : void 0, target, selected });
+    });
+  }
+  if (moved) ctx.warn("labels-truncated", `${moved} slope label${moved === 1 ? " was" : "s were"} moved off its point so the labels do not overlap.`);
+  return { plot, valueScale: { axis: "y", domain: [scale.min, scale.max], range: [plot.y + plot.height, plot.y], ticks: scale.ticks } };
+}
+function layoutLikert(ctx, area, visible) {
+  const { spec, theme, marks, fs, measure } = ctx;
+  const n = visible.length;
+  const side = Math.floor(n / 2);
+  const neutral = n % 2 === 1 ? side : -1;
+  const separate = neutral >= 0 && spec.likertNeutral === "separate";
+  if (spec.likertNeutral === "separate" && neutral < 0) ctx.warn("type-fallback", "A separate neutral column needs an odd number of answers; the middle answer is not set apart.");
+  const shares = spec.categories.map((_, i) => {
+    const raw = visible.map((s) => {
+      const v = s.values[i];
+      return v !== null && Number.isFinite(v) ? Math.max(0, v) : 0;
+    });
+    const total = raw.reduce((t, v) => t + v, 0);
+    return raw.map((v) => total ? v / total : 0);
+  });
+  const sum = (p, from, to) => p.slice(from, to).reduce((t, v) => t + v, 0);
+  const negOf = (p) => sum(p, 0, side) + (neutral >= 0 && !separate ? p[neutral] / 2 : 0);
+  const posOf = (p) => sum(p, n - side, n) + (neutral >= 0 && !separate ? p[neutral] / 2 : 0);
+  const rows = spec.categories.map((_, i) => i);
+  if (spec.likertSort === "positive") rows.sort((p, q) => sum(shares[q], n - side, n) - sum(shares[p], n - side, n));
+  else if (spec.likertSort === "negative") rows.sort((p, q) => sum(shares[q], 0, side) - sum(shares[p], 0, side));
+  const extent = Math.max(0.01, ...shares.map((p) => Math.max(negOf(p), posOf(p))));
+  const labelW = spec.xAxis.show ? Math.min(area.width * 0.35, Math.max(0, ...spec.categories.map((c) => measure(c, fs)))) + 10 : 4;
+  const neutralW = separate ? Math.max(40, area.width * 0.18) : 0;
+  const axisH = spec.yAxis.show ? fs * 1.6 : 2;
+  const headH = separate ? fs * 1.5 : 0;
+  const plot = { x: area.x + labelW, y: area.y + headH, width: Math.max(1, area.width - labelW - (separate ? neutralW + 14 : 0)), height: Math.max(1, area.height - axisH - headH) };
+  const half = axisScale(0, extent, plot.width / 2, { ...spec.yAxis, min: 0, max: null, scale: void 0, reverse: void 0 });
+  const m = half.max;
+  const xOf = (v) => plot.x + (v + m) / (2 * m) * plot.width;
+  const percent = { style: "percent", decimals: spec.yAxis.format.decimals };
+  const ticks = [...half.ticks.slice(1).map((t) => -t).reverse(), ...half.ticks];
+  const axisTarget = { kind: "axis", axis: "y" };
+  ticks.forEach((t, k) => {
+    const x = xOf(t);
+    if (spec.yAxis.gridlines && t !== 0) marks.push({ kind: "line", key: `grid-y-${k}`, role: "grid", x1: x, y1: plot.y, x2: x, y2: plot.y + plot.height, stroke: theme.grid, strokeWidth: 1 });
+    if (spec.yAxis.show) marks.push({ kind: "text", key: `tick-y-${k}`, role: "tick-label", x, y: plot.y + plot.height + 6, text: formatChartNumber(Math.abs(t), percent, _nullishCoalesce(percent.decimals, () => ( stepDecimals(half.step * 100)))), anchor: "middle", baseline: "top", size: fs, fill: theme.mutedText, target: axisTarget });
+  });
+  const band = plot.height / Math.max(1, rows.length);
+  const barH = Math.max(2, band * (1 - Math.min(0.9, spec.gapWidth)));
+  const neutralMax = separate ? Math.max(0.01, ...shares.map((p) => p[neutral])) : 1;
+  const neutralX = plot.x + plot.width + 14;
+  if (separate) {
+    const s = visible[neutral];
+    marks.push({ kind: "text", key: "likert-neutral-title", role: "axis-title", x: neutralX, y: area.y, text: truncate(s.name, neutralW, fs, measure), anchor: "start", baseline: "top", size: fs, weight: 600, fill: theme.mutedText, target: { kind: "series", seriesId: s.id } });
+  }
+  let hidden = 0;
+  rows.forEach((i, r) => {
+    const p = shares[i];
+    const y = plot.y + r * band + (band - barH) / 2;
+    const catTarget = { kind: "category", index: i };
+    const catSelected = ctx.isSelected(catTarget);
+    if (spec.xAxis.show)
+      marks.push({ kind: "text", key: `tick-x-${i}`, role: "tick-label", x: plot.x - 8, y: y + barH / 2, text: truncate(spec.categories[i], labelW - 10, fs, measure), anchor: "end", baseline: "middle", size: fs, fill: catSelected ? theme.selection : theme.mutedText, target: catTarget, selected: catSelected });
+    const segment = (j, x0, x1, key) => {
+      const s = visible[j];
+      if (x1 - x0 <= 0) return;
+      const target = { kind: "point", seriesId: s.id, index: i };
+      const selected = ctx.isSelected(target);
+      const fill = _optionalChain([s, 'access', _47 => _47.pointColors, 'optionalAccess', _48 => _48[i]]) || _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(s));
+      const rect = { x: x0, y, width: x1 - x0, height: barH };
+      marks.push({ kind: "rect", key, role: "bar", ...rect, fill, target, selected: selected || ctx.seriesSelected(s.id) || catSelected });
+      if (selected) ctx.outline(`${key}-selection`, { x: rect.x - 2, y: rect.y - 2, width: rect.width + 4, height: rect.height + 4 });
+      if (!(_nullishCoalesce(s.dataLabels, () => ( spec.dataLabels)))) return;
+      const text = formatChartNumber(p[j], percent, _nullishCoalesce(percent.decimals, () => ( 0)));
+      if (measure(text, fs - 1) + 6 > rect.width || barH < fs) {
+        hidden++;
+        return;
+      }
+      marks.push({ kind: "text", key: `label-${s.id}-${i}`, role: "data-label", x: rect.x + rect.width / 2, y: y + barH / 2, text, anchor: "middle", baseline: "middle", size: fs - 1, fill: contrastingTextColor(fill), target });
+    };
+    let cursor = -negOf(p);
+    visible.forEach((s, j) => {
+      if (separate && j === neutral) return;
+      segment(j, xOf(cursor), xOf(cursor + p[j]), `bar-${s.id}-${i}`);
+      cursor += p[j];
+    });
+    if (separate) segment(neutral, neutralX, neutralX + p[neutral] / neutralMax * neutralW, `bar-${visible[neutral].id}-${i}`);
+  });
+  marks.push({ kind: "line", key: "axis-likert-centre", role: "axis", x1: xOf(0), y1: plot.y, x2: xOf(0), y2: plot.y + plot.height, stroke: theme.axis, strokeWidth: 1.25, target: axisTarget });
+  if (hidden) ctx.warn("data-labels-hidden", `${hidden} data label${hidden === 1 ? "" : "s"} did not fit and ${hidden === 1 ? "is" : "are"} hidden.`);
+  return { plot, percent: true };
+}
+function layoutParliament(ctx, area, series) {
+  const { spec, theme, marks, fs } = ctx;
+  const seats = spec.categories.map((_, i) => {
+    const v = series.values[i];
+    return v !== null && Number.isFinite(v) ? Math.max(0, Math.round(v)) : 0;
+  });
+  if (series.values.some((v) => v !== null && Number.isFinite(v) && (v < 0 || !Number.isInteger(v)))) ctx.warn("values-skipped", "Seats are whole numbers of 0 or more; other values were rounded.");
+  const total = seats.reduce((t, v) => t + v, 0);
+  const empty = (text) => {
+    marks.push({ kind: "text", key: "empty", role: "empty", x: area.x + area.width / 2, y: area.y + area.height / 2, text, anchor: "middle", baseline: "middle", size: fs + 1, fill: theme.mutedText });
+    return { plot: area };
+  };
+  if (!total) return empty("No seats");
+  if (total > 2e3) return empty("Too many seats to draw (more than 2,000)");
+  const arc = spec.parliamentArc * Math.PI / 180;
+  const start = Math.PI / 2 + arc / 2;
+  const angles = [start, start - arc, ...[0, 0.5, 1, 1.5, 2, 2.5].map((k) => k * Math.PI).filter((t) => t < start && t > start - arc)];
+  const xs = [0, ...angles.map(Math.cos)];
+  const ys = [0, ...angles.map(Math.sin)];
+  const pad = fs * 1.2;
+  const radius = Math.max(8, Math.min((area.width - pad * 2) / (Math.max(...xs) - Math.min(...xs)), (area.height - pad * 2) / (Math.max(...ys) - Math.min(...ys))));
+  const cx = area.x + area.width / 2 - (Math.max(...xs) + Math.min(...xs)) / 2 * radius;
+  const cy = area.y + area.height / 2 + (Math.max(...ys) + Math.min(...ys)) / 2 * radius;
+  const inner = radius * 0.4;
+  let rows = 1;
+  for (; rows < 60; rows++) {
+    const gap2 = (radius - inner) / rows;
+    const length = Array.from({ length: rows }, (_, k) => (inner + gap2 * (k + 0.5)) * arc).reduce((t, l) => t + l, 0);
+    if (length / total >= gap2 * 0.9) break;
+  }
+  const gap = (radius - inner) / rows;
+  const radii = Array.from({ length: rows }, (_, k) => inner + gap * (k + 0.5));
+  const lengths = radii.map((r) => r * arc);
+  const all = lengths.reduce((t, l) => t + l, 0);
+  const exact = lengths.map((l) => l / all * total);
+  const counts = exact.map(Math.floor);
+  exact.map((e, k) => ({ k, rest: e - counts[k] })).sort((p, q) => q.rest - p.rest).slice(0, total - counts.reduce((t, c) => t + c, 0)).forEach(({ k }) => counts[k]++);
+  const places = [];
+  radii.forEach((r, k) => {
+    for (let j = 0; j < counts[k]; j++) places.push({ angle: counts[k] === 1 ? Math.PI / 2 : start - arc * (j + 0.5) / counts[k], r });
+  });
+  places.sort((p, q) => q.angle - p.angle || p.r - q.r);
+  const dot = Math.max(1, Math.min(gap, all / total) * 0.42);
+  let next = 0;
+  seats.forEach((count, i) => {
+    const target = { kind: "point", seriesId: series.id, index: i };
+    const selected = ctx.isSelected(target) || ctx.isSelected({ kind: "category", index: i }) || ctx.seriesSelected(series.id);
+    const fill = sliceColor(ctx, series, i);
+    for (let k = 0; k < count; k++, next++) {
+      const { angle, r } = places[next];
+      marks.push({ kind: "circle", key: `seat-${i}-${k}`, role: "point", cx: cx + r * Math.cos(angle), cy: cy - r * Math.sin(angle), r: dot, fill, ...selected ? { stroke: theme.selection, strokeWidth: 1.5 } : {}, target, selected });
+    }
+  });
+  const majority = _nullishCoalesce(spec.parliamentMajority, () => ( Math.floor(total / 2) + 1));
+  if (majority <= total) {
+    const angle = start - arc * (majority / total);
+    const r0 = inner - gap * 0.3;
+    const r1 = radius + gap * 0.3;
+    marks.push({ kind: "line", key: "majority-line", role: "reference-line", x1: cx + r0 * Math.cos(angle), y1: cy - r0 * Math.sin(angle), x2: cx + r1 * Math.cos(angle), y2: cy - r1 * Math.sin(angle), stroke: theme.text, strokeWidth: 1.25, dash: "4 3", opacity: 0.8 });
+    const lr = r1 + fs * 0.4;
+    const lx = cx + lr * Math.cos(angle);
+    const ly = cy - lr * Math.sin(angle);
+    marks.push({ kind: "text", key: "majority-label", role: "reference-label", x: lx, y: ly, text: `Majority ${majority}`, anchor: Math.abs(Math.cos(angle)) < 0.25 ? "middle" : Math.cos(angle) > 0 ? "start" : "end", baseline: Math.sin(angle) >= 0 ? "bottom" : "top", size: fs - 1, weight: 500, fill: theme.text });
+  } else ctx.warn("values-skipped", `The majority of ${majority} is more than the ${total} seats; the majority line is not drawn.`);
+  if (inner > fs * 2.2) {
+    const size = Math.min(theme.titleSize + 8, inner * 0.6);
+    const ty = spec.parliamentArc <= 200 ? cy - size * 0.2 : cy;
+    const totalTarget = { kind: "series", seriesId: series.id };
+    marks.push({ kind: "text", key: "parliament-total", role: "data-label", x: cx, y: ty, text: formatChartNumber(total, {}), anchor: "middle", baseline: spec.parliamentArc <= 200 ? "bottom" : "middle", size, weight: 700, fill: theme.text, target: totalTarget });
+    marks.push({ kind: "text", key: "parliament-caption", role: "data-label", x: cx, y: spec.parliamentArc <= 200 ? ty + 2 : ty + size * 0.6, text: spec.parliamentLabel || "seats", anchor: "middle", baseline: "top", size: fs, fill: theme.mutedText, target: totalTarget });
+  }
+  return { plot: { x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 } };
+}
+function treeColor(ctx, series, node, group, base, shade) {
+  if (node.color) return node.color;
+  if (base === null) return _optionalChain([series, 'optionalAccess', _49 => _49.pointColors, 'optionalAccess', _50 => _50[group]]) || _chunkR3P2M7HUcjs.chartSliceColor.call(void 0, ctx.spec, group);
+  return _chunkR3P2M7HUcjs.shadeChartColor.call(void 0, base, shade);
+}
+function layoutTreemapTree(ctx, area, series) {
+  const { spec, marks, theme, fs, measure } = ctx;
+  const format = _nullishCoalesce(_optionalChain([series, 'optionalAccess', _51 => _51.format]), () => ( spec.yAxis.format));
+  const labelsOn = _nullishCoalesce(_optionalChain([series, 'optionalAccess', _52 => _52.dataLabels]), () => ( true));
+  let unlabelled = 0;
+  const draw = (nodes, rect, key, group, base) => {
+    const rects = chartSquarify(nodes.map(_chunkR3P2M7HUcjs.chartTreeTotal), rect);
+    nodes.forEach((node, k) => {
+      const r = rects[k];
+      if (r.width <= 0.5 || r.height <= 0.5) return;
+      const g = _nullishCoalesce(group, () => ( k));
+      const target = { kind: "category", index: g };
+      const selected = ctx.isSelected(target) || ctx.isSelected({ kind: "point", seriesId: _nullishCoalesce(_optionalChain([series, 'optionalAccess', _53 => _53.id]), () => ( "")), index: g });
+      const id = `${key}-${k}`;
+      const fill = treeColor(ctx, series, node, g, base, base === null ? 0 : (k % 4 - 1.5) * 0.14);
+      if (node.children) {
+        const header = r.height > fs * 3.2 && r.width > fs * 3 ? fs * 1.5 : 0;
+        marks.push({ kind: "rect", key: `group-${id}`, role: "cell", ...r, fill, stroke: selected ? theme.selection : theme.surface, strokeWidth: selected ? 2.5 : 2, target, selected });
+        if (header) marks.push({ kind: "text", key: `label-group-${id}`, role: "data-label", x: r.x + 5, y: r.y + 4, text: truncate(node.name, r.width - 10, fs, measure), anchor: "start", baseline: "top", size: fs, weight: 700, fill: contrastingTextColor(fill), target });
+        const inner = { x: r.x + 2, y: r.y + (header || 2), width: Math.max(0, r.width - 4), height: Math.max(0, r.height - (header || 2) - 2) };
+        draw(node.children, inner, id, g, _nullishCoalesce(base, () => ( fill)));
+        return;
+      }
+      marks.push({ kind: "rect", key: `cell-${id}`, role: "cell", ...r, fill, stroke: selected ? theme.selection : theme.surface, strokeWidth: selected ? 2.5 : 1, target, selected });
+      if (!labelsOn) return;
+      const room = r.width - 8;
+      if (room < fs * 2 || r.height < fs * 1.5) {
+        unlabelled++;
+        return;
+      }
+      const color = contrastingTextColor(fill);
+      marks.push({ kind: "text", key: `label-cell-${id}`, role: "data-label", x: r.x + 4, y: r.y + 4, text: truncate(node.name, room, fs, measure), anchor: "start", baseline: "top", size: fs, weight: 600, fill: color, target });
+      if (r.height >= fs * 3) marks.push({ kind: "text", key: `label-value-${id}`, role: "data-label", x: r.x + 4, y: r.y + 6 + fs * 1.2, text: truncate(formatChartNumber(_nullishCoalesce(node.value, () => ( 0)), format), room, fs - 1, measure), anchor: "start", baseline: "top", size: fs - 1, fill: color, target });
+    });
+  };
+  draw(spec.tree, area, "n", null, null);
+  if (unlabelled) ctx.warn("data-labels-hidden", `${unlabelled} treemap cell${unlabelled === 1 ? " is" : "s are"} too small for a label.`);
+  return { plot: area };
+}
+function layoutSunburst(ctx, area, series) {
+  const { spec, marks, theme, fs, measure } = ctx;
+  const tree = spec.tree.length ? spec.tree : _chunkR3P2M7HUcjs.chartTreeFromSeries.call(void 0, spec.categories, _nullishCoalesce(_optionalChain([series, 'optionalAccess', _54 => _54.values]), () => ( [])));
+  const indexOf = new Map(spec.categories.map((c, i) => [c.trim() || `${i + 1}`, i]));
+  const depth = _chunkR3P2M7HUcjs.chartTreeDepth.call(void 0, tree);
+  const total = tree.reduce((t, n) => t + _chunkR3P2M7HUcjs.chartTreeTotal.call(void 0, n), 0);
+  const cx = area.x + area.width / 2;
+  const cy = area.y + area.height / 2;
+  const outer = Math.max(8, Math.min(area.width, area.height) / 2 - 4);
+  const plot = { x: cx - outer, y: cy - outer, width: outer * 2, height: outer * 2 };
+  if (!(total > 0)) {
+    marks.push({ kind: "text", key: "empty", role: "empty", x: cx, y: cy, text: "No positive values", anchor: "middle", baseline: "middle", size: fs + 1, fill: theme.mutedText });
+    return { plot };
+  }
+  const hole = outer * 0.28;
+  const ring = (outer - hole) / Math.max(1, depth);
+  const format = _nullishCoalesce(_optionalChain([series, 'optionalAccess', _55 => _55.format]), () => ( spec.yAxis.format));
+  let unlabelled = 0;
+  const walk = (nodes, start, sweep, level, key, group, base) => {
+    const sum = nodes.reduce((t, n) => t + _chunkR3P2M7HUcjs.chartTreeTotal.call(void 0, n), 0);
+    let at = start;
+    nodes.forEach((node, k) => {
+      const value = _chunkR3P2M7HUcjs.chartTreeTotal.call(void 0, node);
+      if (!(value > 0) || !sum) return;
+      const a0 = at;
+      const a1 = at + sweep * value / sum;
+      at = a1;
+      const g = _nullishCoalesce(_nullishCoalesce(group, () => ( indexOf.get(node.name))), () => ( k));
+      const target = { kind: "category", index: g };
+      const selected = ctx.isSelected(target) || ctx.isSelected({ kind: "point", seriesId: _nullishCoalesce(_optionalChain([series, 'optionalAccess', _56 => _56.id]), () => ( "")), index: g });
+      const fill = treeColor(ctx, series, node, g, base, 0.22 * level);
+      const id = `${key}-${k}`;
+      const r0 = hole + ring * level;
+      const r1 = r0 + ring;
+      marks.push({ kind: "path", key: `slice-${id}`, role: "slice", d: arcPath(cx, cy, r1, r0, a0, a1), fill, stroke: selected ? theme.selection : theme.surface, strokeWidth: selected ? 2 : 1, target, selected });
+      const mid = (a0 + a1) / 2;
+      const rm = (r0 + r1) / 2;
+      const text = node.name;
+      const width = measure(text, fs - 1);
+      if (ring >= fs * 1.3 && 2 * rm * Math.sin(Math.min(Math.PI / 2, (a1 - a0) / 2)) >= width + 6) marks.push({ kind: "text", key: `label-slice-${id}`, role: "data-label", x: cx + rm * Math.sin(mid), y: cy - rm * Math.cos(mid), text, anchor: "middle", baseline: "middle", size: fs - 1, weight: level === 0 ? 600 : void 0, fill: contrastingTextColor(fill), target });
+      else unlabelled++;
+      if (node.children) walk(node.children, a0, a1 - a0, level + 1, id, g, _nullishCoalesce(base, () => ( fill)));
+    });
+  };
+  walk(tree, 0, Math.PI * 2, 0, "n", null, null);
+  if (unlabelled) ctx.warn("data-labels-hidden", `${unlabelled} sunburst arc${unlabelled === 1 ? " is" : "s are"} too narrow for a label.`);
+  if (hole > fs * 2) {
+    const size = Math.min(theme.titleSize + 4, hole * 0.45);
+    const centre = series ? { kind: "series", seriesId: series.id } : void 0;
+    const caption = spec.sunburstLabel;
+    marks.push({ kind: "text", key: "sunburst-total", role: "data-label", x: cx, y: caption ? cy - 2 : cy, text: formatChartNumber(total, format), anchor: "middle", baseline: caption ? "bottom" : "middle", size, weight: 700, fill: theme.text, ...centre ? { target: centre } : {} });
+    if (caption) marks.push({ kind: "text", key: "sunburst-caption", role: "data-label", x: cx, y: cy + 2, text: truncate(caption, hole * 1.8, fs - 1, measure), anchor: "middle", baseline: "top", size: fs - 1, fill: theme.mutedText, ...centre ? { target: centre } : {} });
+  }
+  return { plot };
+}
 
 // src/chart/layout.ts
 function legendItems(spec, ctx) {
-  const family = _chunkLL3H5XUHcjs.chartFamily.call(void 0, spec);
-  if (spec.type === "funnel") return [];
-  if (_chunkLL3H5XUHcjs.chartColorsByCategory.call(void 0, spec.type)) {
+  const family = _chunkR3P2M7HUcjs.chartFamily.call(void 0, spec);
+  if (spec.type === "funnel" || spec.type === "slope") return [];
+  if (_chunkR3P2M7HUcjs.chartSpecColorsByCategory.call(void 0, spec)) {
     const first = spec.series.find((s) => !s.hidden);
+    const seats = (i) => Math.max(0, Math.round(_nullishCoalesce(_optionalChain([first, 'optionalAccess', _57 => _57.values, 'access', _58 => _58[i]]), () => ( 0))));
     return spec.categories.map((c, i) => ({
-      label: c,
-      color: _optionalChain([first, 'optionalAccess', _45 => _45.pointColors, 'optionalAccess', _46 => _46[i]]) || _chunkLL3H5XUHcjs.chartSliceColor.call(void 0, spec, i),
+      label: spec.type === "parliament" ? `${c} ${seats(i)}` : c,
+      color: _optionalChain([first, 'optionalAccess', _59 => _59.pointColors, 'optionalAccess', _60 => _60[i]]) || _chunkR3P2M7HUcjs.chartSliceColor.call(void 0, spec, i),
       target: { kind: "category", index: i },
       faded: false,
       selected: ctx.isSelected({ kind: "category", index: i }),
@@ -1866,17 +2373,17 @@ function legendItems(spec, ctx) {
     return [
       { label: "Increase", color: ctx.theme.positive, target, faded: false, selected: false, shape: "square" },
       { label: "Decrease", color: ctx.theme.negative, target, faded: false, selected: false, shape: "square" },
-      { label: "Total", color: _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(first)), target, faded: false, selected: false, shape: "square" }
+      { label: "Total", color: _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, spec.series.indexOf(first)), target, faded: false, selected: false, shape: "square" }
     ];
   }
   if (family === "box") return [];
-  const trends = trendlineLegendItems(spec, (i) => _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, i));
+  const trends = trendlineLegendItems(spec, (i) => _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, i));
   const items = [];
   spec.series.forEach((s, i) => {
-    const type = _chunkLL3H5XUHcjs.chartSeriesType.call(void 0, spec, s);
+    const type = _chunkR3P2M7HUcjs.chartSeriesType.call(void 0, spec, s);
     items.push({
       label: s.name,
-      color: _chunkLL3H5XUHcjs.chartSeriesColor.call(void 0, spec, i),
+      color: _chunkR3P2M7HUcjs.chartSeriesColor.call(void 0, spec, i),
       target: { kind: "series", seriesId: s.id },
       faded: !!s.hidden,
       selected: ctx.seriesSelected(s.id),
@@ -1889,7 +2396,7 @@ function legendItems(spec, ctx) {
 function layoutChart(spec, options) {
   const width = Math.max(1, Number.isFinite(options.width) ? options.width : 1);
   const height = Math.max(1, Number.isFinite(options.height) ? options.height : 1);
-  const theme = { ..._chunkLL3H5XUHcjs.DEFAULT_CHART_THEME, ...options.theme };
+  const theme = { ..._chunkR3P2M7HUcjs.DEFAULT_CHART_THEME, ...options.theme };
   const selection = _nullishCoalesce(options.selection, () => ( null));
   const marks = [];
   const warnings = [];
@@ -1905,7 +2412,7 @@ function layoutChart(spec, options) {
     warnings,
     selection,
     isSelected: (target) => sameChartSelection(selection, target),
-    seriesSelected: (id) => _optionalChain([selection, 'optionalAccess', _47 => _47.kind]) === "series" && selection.seriesId === id,
+    seriesSelected: (id) => _optionalChain([selection, 'optionalAccess', _61 => _61.kind]) === "series" && selection.seriesId === id,
     outline: (key, box) => marks.push({ kind: "rect", key, role: "selection", ...box, fill: "none", stroke: theme.selection, strokeWidth: 1, radius: 3 }),
     warn: (code, message) => {
       if (!warnings.some((w) => w.code === code && w.message === message)) warnings.push({ code, message });
@@ -1928,15 +2435,22 @@ function layoutChart(spec, options) {
   if (spec.title) titleMark("title", spec.title, theme.titleSize, 600, theme.text);
   if (spec.subtitle) titleMark("subtitle", spec.subtitle, fs + 1, 400, theme.mutedText);
   if (spec.title || spec.subtitle) top += 6;
-  const family = _chunkLL3H5XUHcjs.chartFamily.call(void 0, spec);
+  const family = _chunkR3P2M7HUcjs.chartFamily.call(void 0, spec);
   const visible = spec.series.filter((s) => !s.hidden);
   const items = legendItems(spec, ctx);
-  let area = { x: pad, y: top, width: width - pad * 2, height: height - top - pad };
+  let area = { x: pad, y: top, width: width - pad * 2, height: height - top - pad - noteHeight(spec, fs) };
   const seriesLegend = family === "cartesian" || family === "xy" || family === "radar" || family === "histogram";
   const hasTrend = items.some((i) => i.shape === "dash");
-  const showLegend = spec.legend.show && items.length > 0 && (!seriesLegend || spec.series.length > 1 || spec.series.some((s) => s.hidden) || hasTrend);
+  const showLegend = spec.legend.show && items.length > 0 && (!seriesLegend || _chunkR3P2M7HUcjs.chartVariesColors.call(void 0, spec) || spec.series.length > 1 || spec.series.some((s) => s.hidden) || hasTrend);
   if (showLegend) area = layoutLegend(items, spec.legend.position, area, ctx, ctx.isSelected({ kind: "legend" }));
   const finish = (result) => {
+    if (result.plot.width > 0) {
+      if (chartAnnotationFamily(_chunkR3P2M7HUcjs.chartFamily.call(void 0, spec))) drawCallouts(ctx, result.plot);
+      else if (spec.referenceLines.length || spec.referenceBands.length || spec.series.some((s) => s.callouts))
+        ctx.warn("annotations-skipped", `Reference lines, bands and callouts are drawn on bar, line, area, scatter and bubble charts; this ${spec.type} chart leaves them out.`);
+    }
+    applyHighlight(ctx);
+    drawNote(ctx, pad);
     if (options.readout) addReadout(ctx, options.readout, result.plot);
     const kept = finalizeMarks(marks, width, height);
     if (kept.length < marks.length) ctx.warn("values-skipped", `${marks.length - kept.length} mark${marks.length - kept.length === 1 ? " was" : "s were"} left out: their values are not finite numbers.`);
@@ -1978,7 +2492,19 @@ function layoutChart(spec, options) {
     case "funnel":
       return finish(layoutFunnel(ctx, area, visible[0]));
     case "treemap":
-      return finish(layoutTreemap(ctx, area, visible[0]));
+      return finish(spec.tree.length ? layoutTreemapTree(ctx, area, spec.series[0]) : layoutTreemap(ctx, area, visible[0]));
+    case "sunburst":
+      return finish(layoutSunburst(ctx, area, spec.tree.length ? spec.series[0] : visible[0]));
+    case "slope":
+      if (visible.length < 2) {
+        ctx.warn("type-fallback", "A slope chart needs two series (before and after); it is drawn as a line chart until then.");
+        return finish(layoutCartesian(ctx, area, visible));
+      }
+      return finish(layoutSlope(ctx, area, visible));
+    case "likert":
+      return finish(layoutLikert(ctx, area, visible));
+    case "parliament":
+      return finish(layoutParliament(ctx, area, visible[0]));
     case "xy":
       return finish(layoutXy(ctx, area, visible));
     default:
@@ -2062,9 +2588,9 @@ function layoutLegend(items, position, area, ctx, legendSelected) {
 function addReadout(ctx, readout, plot) {
   const { spec, marks, theme, fs, measure } = ctx;
   const series = spec.series.find((s) => s.id === readout.seriesId);
-  const value = _optionalChain([series, 'optionalAccess', _48 => _48.values, 'access', _49 => _49[readout.index]]);
+  const value = _optionalChain([series, 'optionalAccess', _62 => _62.values, 'access', _63 => _63[readout.index]]);
   if (!series || value === null || value === void 0) return;
-  const mark = marks.find((m) => (m.role === "point" || m.role === "bar") && _optionalChain([m, 'access', _50 => _50.target, 'optionalAccess', _51 => _51.kind]) === "point" && m.target.seriesId === readout.seriesId && m.target.index === readout.index);
+  const mark = marks.find((m) => (m.role === "point" || m.role === "bar") && _optionalChain([m, 'access', _64 => _64.target, 'optionalAccess', _65 => _65.kind]) === "point" && m.target.seriesId === readout.seriesId && m.target.index === readout.index);
   if (!mark) return;
   let ax;
   let ay;
@@ -2076,8 +2602,8 @@ function addReadout(ctx, readout, plot) {
     ay = mark.cy - mark.r;
   } else return;
   const axis = series.axis === "secondary" ? spec.yAxis2 : spec.yAxis;
-  const x = _optionalChain([series, 'access', _52 => _52.x, 'optionalAccess', _53 => _53[readout.index]]);
-  const text = x !== null && x !== void 0 && _chunkLL3H5XUHcjs.chartFamily.call(void 0, spec) === "xy" ? `${formatChartNumber(x, spec.xAxis.format)}, ${formatChartNumber(value, axis.format)}` : `${_nullishCoalesce(spec.categories[readout.index], () => ( ""))}: ${formatChartNumber(value, _nullishCoalesce(series.format, () => ( axis.format)))}`;
+  const x = _optionalChain([series, 'access', _66 => _66.x, 'optionalAccess', _67 => _67[readout.index]]);
+  const text = x !== null && x !== void 0 && _chunkR3P2M7HUcjs.chartFamily.call(void 0, spec) === "xy" ? `${formatChartNumber(x, spec.xAxis.format)}, ${formatChartNumber(value, axis.format)}` : `${_nullishCoalesce(spec.categories[readout.index], () => ( ""))}: ${formatChartNumber(value, _nullishCoalesce(series.format, () => ( axis.format)))}`;
   const w = measure(text, fs, 600) + 10;
   const h = fs + 8;
   const bx = Math.max(plot.x, Math.min(plot.x + plot.width - w, ax - w / 2));
@@ -2126,7 +2652,7 @@ function chartXAtPoint(scene, point) {
   if (!scale) return void 0;
   return chartScaleFromPixel(point.x, scale);
 }
-function snapChartValue(scene, value, step, ticks = _nullishCoalesce(_optionalChain([scene, 'access', _54 => _54.valueScale, 'optionalAccess', _55 => _55.ticks]), () => ( [])), logBase) {
+function snapChartValue(scene, value, step, ticks = _nullishCoalesce(_optionalChain([scene, 'access', _68 => _68.valueScale, 'optionalAccess', _69 => _69.ticks]), () => ( [])), logBase) {
   if (logBase && step === void 0) return value > 0 && Number.isFinite(value) ? Number(value.toPrecision(2)) : value;
   const unit = _nullishCoalesce(step, () => ( (ticks.length > 1 ? (ticks[1] - ticks[0]) / 10 : 1)));
   if (!(unit > 0)) return value;
@@ -2173,4 +2699,5 @@ function snapChartValue(scene, value, step, ticks = _nullishCoalesce(_optionalCh
 
 
 
-exports.parseChartDate = parseChartDate; exports.CHART_DATE_STEPS = CHART_DATE_STEPS; exports.formatChartDate = formatChartDate; exports.chartDateLabels = chartDateLabels; exports.compileChartFormatCode = compileChartFormatCode; exports.formatChartValueWithCode = formatChartValueWithCode; exports.chartSerialToDate = chartSerialToDate; exports.chartDateToSerial = chartDateToSerial; exports.niceStep = niceStep; exports.niceScale = niceScale; exports.stepDecimals = stepDecimals; exports.formatChartNumber = formatChartNumber; exports.linearMap = linearMap; exports.niceLogScale = niceLogScale; exports.chartScaleToPixel = chartScaleToPixel; exports.chartScaleFromPixel = chartScaleFromPixel; exports.estimateChartTextWidth = estimateChartTextWidth; exports.sameChartSelection = sameChartSelection; exports.contrastingTextColor = contrastingTextColor; exports.r2 = r2; exports.chartHistogram = chartHistogram; exports.chartQuantile = chartQuantile; exports.chartBoxStats = chartBoxStats; exports.chartSquarify = chartSquarify; exports.decimateChartPoints = decimateChartPoints; exports.summarizeChartSeries = summarizeChartSeries; exports.fitChartTrendline = fitChartTrendline; exports.trendNumberText = trendNumberText; exports.chartMovingAverage = chartMovingAverage; exports.chartTrendlineName = chartTrendlineName; exports.chartSupportsTrendlines = chartSupportsTrendlines; exports.MAX_CHART_DATA_LABELS = MAX_CHART_DATA_LABELS; exports.MAX_CHART_LINE_POINTS = MAX_CHART_LINE_POINTS; exports.MAX_CHART_MARKERS = MAX_CHART_MARKERS; exports.layoutChart = layoutChart; exports.chartValueAtPoint = chartValueAtPoint; exports.chartXAtPoint = chartXAtPoint; exports.snapChartValue = snapChartValue;
+
+exports.parseChartDate = parseChartDate; exports.CHART_DATE_STEPS = CHART_DATE_STEPS; exports.formatChartDate = formatChartDate; exports.chartDateLabels = chartDateLabels; exports.compileChartFormatCode = compileChartFormatCode; exports.formatChartValueWithCode = formatChartValueWithCode; exports.chartSerialToDate = chartSerialToDate; exports.chartDateToSerial = chartDateToSerial; exports.niceStep = niceStep; exports.niceScale = niceScale; exports.stepDecimals = stepDecimals; exports.formatChartNumber = formatChartNumber; exports.linearMap = linearMap; exports.niceLogScale = niceLogScale; exports.chartScaleToPixel = chartScaleToPixel; exports.chartScaleFromPixel = chartScaleFromPixel; exports.estimateChartTextWidth = estimateChartTextWidth; exports.sameChartSelection = sameChartSelection; exports.contrastingTextColor = contrastingTextColor; exports.r2 = r2; exports.chartHistogram = chartHistogram; exports.chartQuantile = chartQuantile; exports.suggestChartReferences = suggestChartReferences; exports.chartBoxStats = chartBoxStats; exports.chartSquarify = chartSquarify; exports.decimateChartPoints = decimateChartPoints; exports.summarizeChartSeries = summarizeChartSeries; exports.fitChartTrendline = fitChartTrendline; exports.trendNumberText = trendNumberText; exports.chartMovingAverage = chartMovingAverage; exports.chartTrendlineName = chartTrendlineName; exports.chartSupportsTrendlines = chartSupportsTrendlines; exports.MAX_CHART_DATA_LABELS = MAX_CHART_DATA_LABELS; exports.MAX_CHART_LINE_POINTS = MAX_CHART_LINE_POINTS; exports.MAX_CHART_MARKERS = MAX_CHART_MARKERS; exports.layoutChart = layoutChart; exports.chartValueAtPoint = chartValueAtPoint; exports.chartXAtPoint = chartXAtPoint; exports.snapChartValue = snapChartValue;