@skdx/angular-charts 0.38.0 → 0.40.0

package/fesm2022/skdx-angular-charts-internal.mjs

@@ -457,13 +457,29 @@ const size = (input, w = 600, h = 300) => ({
     width: (input.width ?? w) - legendSide(input),
     height: (input.height ?? h) - (legendOptions(input)?.position === 'bottom' ? LEGEND_HEIGHT : 0),
 });
-/** Vertical room the legend row takes above the plot, to shift the plot down by. */
-const legendTop = (input) => {
+/**
+ * Vertical room the legend rows take above the plot, to shift the plot down by. Pass the legend
+ * items and the layout width to reserve every wrapped row; without them one row is assumed.
+ */
+const legendTop = (input, items, width) => {
     const l = legendOptions(input);
-    return l && (l.position === undefined || l.position === 'top') ? LEGEND_HEIGHT : 0;
+    if (!l || !(l.position === undefined || l.position === 'top'))
+        return 0;
+    const rows = items ? Math.max(1, legendRows(items, width ?? size(input).width, l)) : 1;
+    return rows * LEGEND_HEIGHT;
 };
 /** Average glyph width at the chart font size, for text-width estimates. */
 const CHAR = 6.5;
+/** Fit visible chart text while callers keep the complete string as a title or item label. */
+function fitText(text, width) {
+    const chars = Array.from(text);
+    const capacity = Math.max(0, Math.floor(width / CHAR));
+    return chars.length <= capacity
+        ? text
+        : capacity === 0
+            ? ''
+            : `${chars.slice(0, capacity - 1).join('')}…`;
+}
 /** The series color for index `i`: an explicit override, else the chart palette, else the tokens. */
 const colorOf = (input, i, override) => override ??
     (input.palette && input.palette.length > 0
@@ -619,9 +635,29 @@ function placeLegend(layout) {
 }
 /** A tooltip box next to the pointer, kept inside the canvas; one line per entry. */
 function tooltipShapes(x, y, text, width, height, placement = 'auto') {
-    const lines = Array.isArray(text) ? text : [text];
-    const w = Math.max(...lines.map((l) => l.length)) * CHAR + 12;
-    const h = 6 + lines.length * 16;
+    const original = Array.isArray(text) ? text : [text];
+    const capacity = Math.max(1, Math.floor((width - 12) / CHAR));
+    const wrapped = original.flatMap((line) => {
+        const result = [];
+        let rest = Array.from(line);
+        while (rest.length > capacity) {
+            let end = rest.slice(0, capacity + 1).lastIndexOf(' ');
+            if (end < 1)
+                end = capacity;
+            result.push(rest.slice(0, end).join(''));
+            rest = rest.slice(end);
+            if (rest[0] === ' ')
+                rest.shift();
+        }
+        result.push(rest.join(''));
+        return result;
+    });
+    const maxLines = Math.max(1, Math.floor((height - 6) / 16));
+    const lines = wrapped.slice(0, maxLines);
+    if (wrapped.length > maxLines)
+        lines[maxLines - 1] = fitText(`${lines[maxLines - 1]}…`, width - 12);
+    const w = Math.min(width, Math.max(0, ...lines.map((l) => Array.from(l).length)) * CHAR + 12);
+    const h = Math.min(height, 6 + lines.length * 16);
     // `auto` sits above-right of the anchor and slides inside the canvas; a fixed placement
     // centres the box on the named side and is only clamped.
     const wanted = placement === 'top'
@@ -639,13 +675,14 @@ function tooltipShapes(x, y, text, width, height, placement = 'auto') {
         {
             kind: 'rect',
             part: 'tooltip',
+            title: original.join('\n'),
             x: px(bx),
             y: px(by),
             width: px(w),
             height: h,
             fill: 'var(--skdx-color-surface-raised)',
             stroke: CHART_COLORS.axis,
-            rx: 3,
+            rx: 8,
         },
         ...lines.map((line, i) => ({
             kind: 'text',
@@ -735,6 +772,12 @@ function axis([min, max], range, options = false, chartFormat) {
         zero: px(scale(Math.min(Math.max(0, domain[0]), domain[1]))),
     };
 }
+/**
+ * Left (or right) margin wide enough for the widest tick label a value axis over `[lo, hi]` will
+ * draw, never below the default. Charts measure it before laying out so a long label such as
+ * "$180.00" is not clipped by the svg edge.
+ */
+const valueAxisRoom = ([lo, hi], format) => Math.max(MARGIN$1.left, niceTicks(lo, hi).reduce((w, v) => Math.max(w, format(v).length), 0) * CHAR + 14);
 /** Whether an axis draws its grid lines. */
 const gridOn = (opts) => opts?.grid !== false;
 /** Keeps every n-th tick so labels of the given widths do not overlap along `width`. */
@@ -771,7 +814,7 @@ function stateCanvas(input, empty, w, h) {
             width,
             height,
             fill: 'var(--skdx-color-surface-sunken)',
-            rx: 4,
+            rx: 8,
         });
     shapes.push({
         kind: 'text',
@@ -791,6 +834,19 @@ function stateCanvas(input, empty, w, h) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
+/**
+ * Anchor for a tick label centred at `pos`: `end` when half of it would run past `width`, `start`
+ * when it would run past 0, else `middle`. The outermost tick sits on the plot edge, where a long
+ * date or currency label would otherwise be clipped by the svg.
+ */
+const tickAnchor = (pos, text, width) => {
+    const half = (text.length * CHAR) / 2;
+    if (pos + half > width)
+        return 'end';
+    if (pos - half < 0)
+        return 'start';
+    return 'middle';
+};
 /** Grid, axis line and tick labels of an axis frame, as shapes. */
 function frameShapes(frame, options = {}) {
     const { plot, xTicks, yTicks, baseline } = frame;
@@ -825,7 +881,7 @@ function frameShapes(frame, options = {}) {
             baseline: 'middle',
             rotate: rot,
         })
-        : label(x, y, text, { part, anchor: 'middle' });
+        : boundedLabel(x, y, text, frame.width, { part, anchor: tickAnchor(x, text, frame.width) });
     // Short marks across an axis line at the ticks.
     const marks = (ticks, along, at, dir, size) => {
         for (const t of ticks)
@@ -890,7 +946,10 @@ function frameShapes(frame, options = {}) {
             const ly = px(top ? y - 8 : y + 20);
             for (const t of a.ticks)
                 shapes.push(top
-                    ? label(t.pos, ly, t.label, { part: 'x-label-top', anchor: 'middle' })
+                    ? label(t.pos, ly, t.label, {
+                        part: 'x-label-top',
+                        anchor: tickAnchor(t.pos, t.label, frame.width),
+                    })
                     : rotated(t.pos, ly, t.label, 'x-label'));
             // The first axis keeps its title at the top left; stacked axes title their own label row.
             if (a.label)
@@ -1006,6 +1065,54 @@ function frameShapes(frame, options = {}) {
     return shapes;
 }
 const label = (x, y, text, extra = {}) => ({ kind: 'text', part: 'label', x, y, text, fill: CHART_COLORS.label, ...extra });
+/** A label that stays inside the SVG, with the full wording available as its native title. */
+function boundedLabel(x, y, text, width, extra = {}) {
+    const at = Math.max(4, Math.min(width - 4, x));
+    const anchor = extra.anchor ?? 'start';
+    const available = anchor === 'middle'
+        ? 2 * Math.min(at - 4, width - at - 4)
+        : anchor === 'end'
+            ? at - 4
+            : width - at - 4;
+    const visible = fitText(text, available);
+    return {
+        kind: 'text',
+        part: 'label',
+        x: at,
+        y,
+        fill: CHART_COLORS.label,
+        ...extra,
+        text: visible,
+        title: visible === text ? extra.title : text,
+    };
+}
+/** Keep inside and reference labels readable over arbitrary series colours. */
+function withLabelSurfaces(shapes) {
+    return shapes.flatMap((shape) => {
+        if (shape.kind !== 'text' ||
+            (shape.fill !== 'var(--skdx-color-text-on-accent)' && shape.part !== 'reference-label'))
+            return [shape];
+        const width = shape.text.length * CHAR + 8;
+        const x = shape.x - (shape.anchor === 'middle' ? width / 2 : shape.anchor === 'end' ? width - 4 : 4);
+        const y = shape.y - (shape.baseline === 'hanging' ? 2 : shape.baseline === 'middle' ? 9 : 14);
+        return [
+            {
+                kind: 'rect',
+                part: 'label-background',
+                x,
+                y,
+                width,
+                height: 18,
+                rx: 8,
+                fill: 'var(--skdx-color-surface-raised)',
+            },
+            {
+                ...shape,
+                fill: shape.part === 'reference-label' ? shape.fill : 'var(--skdx-color-text-default)',
+            },
+        ];
+    });
+}
 /** A dot with its native tooltip. */
 const point$1 = (cx, cy, r, fill, title, item) => ({ kind: 'circle', part: 'point', cx, cy, r, fill, title, item });
 
@@ -1725,25 +1832,39 @@ function layoutPoints(input, options) {
     const legendRoom = input.colorScale
         ? colorLegendRoom(input.colorLegend)
         : { bottom: 0, right: 0, options: {} };
+    const legend = input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) }));
     const plot = plotBox(width, height, {
         ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input) + (input.yAxis?.label ? 12 : 0),
+        top: MARGIN$1.top + legendTop(input, legend, width) + (input.yAxis?.label ? 12 : 0),
         right: MARGIN$1.right + legendRoom.right,
         bottom: MARGIN$1.bottom + (input.xAxis?.label ? 14 : 0) + legendRoom.bottom,
     });
     const markerSize = input.markerSize ?? 3;
     const hitRadius = Math.max(0, input.hitRadius ?? 0);
-    const jitter = Math.max(0, input.jitter ?? 0);
+    const requestedJitter = Math.max(0, input.jitter ?? 0);
+    const sizes = minMax(dots.map((p) => p.size));
+    const extentFactor = (symbol) => symbol === 'diamond' ? 1.3 : symbol === 'triangle' ? 1.2 : 1;
+    const requestedRadius = (dot, sized) => Math.max(0, sized ? options.radius(dot.size, sizes) : markerSize);
+    let largestExtent = 0;
+    for (const series of shown) {
+        const sized = series.data.some((dot) => dot.size !== undefined);
+        const factor = extentFactor(series.symbol);
+        for (const dot of series.data)
+            largestExtent = Math.max(largestExtent, requestedRadius(dot, sized) * factor);
+    }
+    // Scale visible extents together only when a tiny plot cannot contain the requested size.
+    // Keep data domains intact and use the same inset scales for marks/references/trends.
+    const extentScale = Math.min(1, (Math.min(plot.width, plot.height) * 0.45) / Math.max(1, largestExtent + requestedJitter));
+    const jitter = requestedJitter * extentScale;
+    const inset = largestExtent * extentScale + jitter;
     // Duplicates at one pixel are spread deterministically on a ring around it.
     const seen = new Map();
     // A color scale maps each dot's `value`; dots without one keep their series color.
     const colors = input.colorScale
         ? makeColorScale(input.colorScale, dots.map((d) => d.value), colorOf(input, 0), undefined, makeFormatter(input.format))
         : undefined;
-    const x = axis(extent(dots.map((p) => p.x), false), [plot.x, plot.x + plot.width], input.xAxis ?? {}, input.format);
-    const y = axis(extent(dots.map((p) => p.y), false), [plot.y + plot.height, plot.y], input.yAxis ?? {}, input.format);
-    const sizes = minMax(dots.map((p) => p.size));
-    const legend = input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) }));
+    const x = axis(extent(dots.map((p) => p.x), false), [plot.x + inset, plot.x + plot.width - inset], input.xAxis ?? {}, input.format);
+    const y = axis(extent(dots.map((p) => p.y), false), [plot.y + plot.height - inset, plot.y + inset], input.yAxis ?? {}, input.format);
     const c = canvas(input, width, height, legend);
     const marks = [];
     const texts = [];
@@ -1755,7 +1876,7 @@ function layoutPoints(input, options) {
         for (const dot of s.data) {
             const di = dot.index;
             const title = options.describe(s.name, dot, x, y);
-            const r = sized ? options.radius(dot.size, sizes) : markerSize;
+            const r = requestedRadius(dot, sized) * extentScale;
             let cx = px(x.scale(dot.x));
             let cy = px(y.scale(dot.y));
             if (jitter > 0) {
@@ -1847,7 +1968,29 @@ function layoutPoints(input, options) {
             }
         }
     }
-    const frame = { ...c, plot, xTicks: x.ticks, yTicks: y.ticks, baseline: y.zero };
+    // Check the final edge anchors as well as average tick spacing.
+    let tickRight = -Infinity;
+    const candidates = thinTicks(x.ticks, Math.max(1, plot.width - 2 * inset));
+    const kept = new Set();
+    for (const tick of [...candidates].sort((a, b) => a.pos - b.pos)) {
+        const textWidth = tick.label.length * CHAR;
+        const rotation = input.xAxis?.tickRotation ?? 0;
+        const anchor = rotation
+            ? rotation < 0
+                ? 'end'
+                : 'start'
+            : tickAnchor(tick.pos, tick.label, width);
+        const left = -(anchor === 'end' ? textWidth : anchor === 'middle' ? textWidth / 2 : 0);
+        const angle = (rotation * Math.PI) / 180;
+        const corners = [left, left + textWidth].flatMap((x) => [-7, 7].map((y) => tick.pos + x * Math.cos(angle) - y * Math.sin(angle)));
+        const start = Math.min(...corners), end = Math.max(...corners);
+        if (start < tickRight + 4)
+            continue;
+        tickRight = end;
+        kept.add(tick);
+    }
+    const xTicks = candidates.filter((tick) => kept.has(tick));
+    const frame = { ...c, plot, xTicks, yTicks: y.ticks, baseline: y.zero };
     const scales = {
         plot,
         x: (v) => x.scale(categoryValue(v)),
@@ -1873,7 +2016,20 @@ function layoutPoints(input, options) {
     return {
         ...c,
         shapes: [
-            ...frameShapes(frame, { xLabel: input.xAxis?.label, yLabel: input.yAxis?.label }),
+            ...frameShapes({ ...frame, height: frame.height - legendRoom.bottom }, {
+                xLabel: input.xAxis?.label,
+                x: input.xAxis,
+                // Frame axes spread decoration fields; never forward a second title through y.
+                y: {
+                    showLine: input.yAxis?.showLine,
+                    showTicks: input.yAxis?.showTicks,
+                    tickSize: input.yAxis?.tickSize,
+                    tickRotation: input.yAxis?.tickRotation,
+                },
+            }),
+            ...(input.yAxis?.label
+                ? [label(4, plot.y - 14, input.yAxis.label, { part: 'axis-title', anchor: 'start' })]
+                : []),
             ...references,
             ...(opacity !== undefined && marks.some((m) => m.part === options.part)
                 ? marks.map((m) => (m.kind === 'circle' || m.kind === 'path') && m.part !== 'hit' ? { ...m, opacity } : m)
@@ -2343,8 +2499,8 @@ function layoutCartesian(input, defaultType) {
             return MARGIN$1.left;
         const [lo, hi] = extentOf(opts.id);
         const f = makeFormatter(opts.format ?? percentFormat ?? input.format);
-        const widest = niceTicks(opts.min ?? lo, opts.max ?? hi).reduce((w, v) => Math.max(w, f(v).length), 0);
-        return Math.max(MARGIN$1.left, widest * CHAR + 14) + (opts.showTicks ? (opts.tickSize ?? 4) : 0);
+        return (valueAxisRoom([opts.min ?? lo, opts.max ?? hi], f) +
+            (opts.showTicks ? (opts.tickSize ?? 4) : 0));
     };
     // Horizontal charts run the value axes along the bottom (near) and top (far) edges. Under RTL
     // the vertical sides swap so the first axis sits at the right, next to the reader.
@@ -2364,8 +2520,12 @@ function layoutCartesian(input, defaultType) {
     }
     // The default bottom margin already holds the first bottom axis.
     const firstBottom = shownAxes.find((a) => sideOf(a) === 'bottom');
+    const legend = all.map((s) => ({ name: s.name, color: s.color }));
     const margin = {
-        top: MARGIN$1.top + legendTop(input) + (defs.some((a) => a.label) ? 12 : 0) + room.top,
+        top: MARGIN$1.top +
+            legendTop(input, legend, width) +
+            (defs.some((a) => a.label) ? 12 : 0) +
+            room.top,
         right: horizontal
             ? rtl
                 ? Math.max(MARGIN$1.left, widestCategory + 16)
@@ -2433,7 +2593,7 @@ function layoutCartesian(input, defaultType) {
             : plot.width /
                 Math.max(0.2, Math.abs(Math.cos(((input.xAxis?.tickRotation ?? 0) * Math.PI) / 180))));
     const frame = {
-        ...canvas(input, width, height, all.map((s) => ({ name: s.name, color: s.color }))),
+        ...canvas(input, width, height, legend),
         plot,
         xTicks: categoryTicks,
         yTicks: horizontal ? thinTicks(left.ticks, plot.width) : left.ticks,
@@ -2488,7 +2648,10 @@ function layoutCartesian(input, defaultType) {
         },
         y: (v, a) => value(v, a),
     };
-    shapes.push(...referenceShapes(input.references, scales));
+    const references = referenceShapes(input.references, scales);
+    shapes.push(...references.filter((shape) => shape.part !== 'reference-label'));
+    // The reference geometry stays behind data, but its label must survive overlapping marks.
+    const referenceLabels = withLabelSurfaces(references.filter((shape) => shape.part === 'reference-label'));
     // One slot per plain bar series and one per bar stack group, side by side inside the band.
     const slots = [];
     const slotOf = new Map();
@@ -2881,7 +3044,7 @@ function layoutCartesian(input, defaultType) {
             width: 6,
             height: box.height - 16,
             fill: CHART_COLORS.axis,
-            rx: 2,
+            rx: 8,
         }, {
             kind: 'rect',
             part: 'brush-handle',
@@ -2890,7 +3053,7 @@ function layoutCartesian(input, defaultType) {
             width: 6,
             height: box.height - 16,
             fill: CHART_COLORS.axis,
-            rx: 2,
+            rx: 8,
         });
         hit.brush = { box, window };
     }
@@ -2904,6 +3067,7 @@ function layoutCartesian(input, defaultType) {
             ...errorMarks,
             ...points,
             ...texts,
+            ...referenceLabels,
             ...annotationShapes(input.annotations, scales),
             ...brush,
             ...frame.shapes,
@@ -3384,7 +3548,8 @@ function layoutPieChart(input) {
         : (p) => `${Math.round(p * 100)}%`;
     const cornerRadius = Math.max(0, input.cornerRadius ?? 0);
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
+    const legend = input.data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
+    const top = legendTop(input, legend, width);
     const start = ((input.startAngle ?? 0) * Math.PI) / 180;
     const end = ((input.endAngle ?? (input.startAngle ?? 0) + 360) * Math.PI) / 180;
     const sweep = Math.max(0, Math.min(TAU$1, end - start));
@@ -3474,7 +3639,7 @@ function layoutPieChart(input) {
                         y2: px(cy - (r + 12) * Math.cos(mid)),
                         stroke: CHART_COLORS.axis,
                     });
-                    labels.push(label(px(cx + (r + 16) * sin), ly, text, {
+                    labels.push(boundedLabel(px(cx + (r + 16) * sin), ly, text, width, {
                         part: 'slice-label',
                         anchor: sin > 0.1 ? 'start' : sin < -0.1 ? 'end' : 'middle',
                         baseline: 'middle',
@@ -3484,7 +3649,7 @@ function layoutPieChart(input) {
             }
             else if (percent > 0.03) {
                 const lr = (r + r0) / 2;
-                labels.push(label(px(cx + lr * Math.sin(mid)), px(cy - lr * Math.cos(mid)), text, {
+                labels.push(boundedLabel(px(cx + lr * Math.sin(mid)), px(cy - lr * Math.cos(mid)), text, width, {
                     part: 'slice-label',
                     anchor: 'middle',
                     baseline: 'middle',
@@ -3513,8 +3678,12 @@ function layoutPieChart(input) {
             fill: 'var(--skdx-color-text-default)',
             weight: 'bold',
         }));
-    const c = canvas(input, width, height, input.data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) })));
-    return { ...c, shapes: [...slices, ...connectors, ...c.shapes, ...labels], issues };
+    const c = canvas(input, width, height, legend);
+    return {
+        ...c,
+        shapes: withLabelSurfaces([...slices, ...connectors, ...c.shapes, ...labels]),
+        issues,
+    };
 }
 
 /*
@@ -3674,7 +3843,8 @@ function layoutRadarChart(input) {
     const issues = [];
     const format = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
+    const legend = input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) }));
+    const top = legendTop(input, legend, width);
     const cx = width / 2;
     const cy = top + (height - top) / 2;
     const radius = Math.max(0, Math.min(width, height - top) / 2 - 36);
@@ -3836,7 +4006,7 @@ function layoutRadarChart(input) {
             item: { label: s.name, series: s.name, seriesId: s.id },
         });
     });
-    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) })));
+    const c = canvas(input, width, height, legend);
     return { ...c, shapes: [...grid, ...polygons, ...points, ...texts, ...c.shapes], issues };
 }
 
@@ -3988,7 +4158,12 @@ function layoutHeatmap(input) {
                     part: 'cell-label',
                     anchor: 'middle',
                     baseline: 'middle',
-                    fill: 'var(--skdx-color-text-default)',
+                    // The cell composites its fill over the surface at the ramp's opacity: a faint cell
+                    // is mostly surface and reads with the default text token, a strong one is the fill
+                    // and needs the token meant to sit on it. A fixed token fails one end or the other.
+                    fill: fill.opacity >= 0.5
+                        ? 'var(--skdx-color-text-on-accent)'
+                        : 'var(--skdx-color-text-default)',
                 }));
         });
     });
@@ -4068,7 +4243,8 @@ function layoutFunnelChart(input) {
     const max = Math.max(0, ...data.map((d) => d.value));
     const total = data.reduce((s, d) => s + Math.max(0, d.value), 0);
     const first = data[0]?.value ?? 0;
-    const offset = legendTop(input);
+    const legend = data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
+    const offset = legendTop(input, legend, width);
     // Along: the axis stages are stacked on; across: the axis a stage's width is measured on.
     const along = horizontal ? width : height - offset;
     const across = horizontal ? height - offset : width;
@@ -4082,7 +4258,6 @@ function layoutFunnelChart(input) {
     const percentFormat = input.percentFormat
         ? makeFormatter(input.percentFormat)
         : (p) => `${Math.round(p * 100)}%`;
-    const legend = data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
     const mid = (horizontal ? offset + (height - offset) / 2 : width / 2) - (outside ? across / 6 : 0);
     const stages = data.flatMap((d, i) => {
         const near = widthOf(d.value);
@@ -4091,8 +4266,9 @@ function layoutFunnelChart(input) {
         const p1 = p0 + stageLen - gap;
         const percent = pyramid ? (total > 0 ? d.value / total : 0) : first > 0 ? d.value / first : 0;
         const previous = data[i - 1]?.value;
+        const change = previous !== undefined && previous > 0 ? d.value / previous - 1 : 0;
         const drop = !pyramid && previous !== undefined && previous > 0
-            ? ` · −${percentFormat(1 - d.value / previous)} from ${data[i - 1]?.name}`
+            ? ` · ${change < 0 ? '−' : change > 0 ? '+' : ''}${percentFormat(Math.abs(change))} from ${data[i - 1]?.name}`
             : '';
         const title = `${d.name}: ${format(d.value)} (${percentFormat(percent)})${drop}`;
         const d0 = horizontal
@@ -4115,7 +4291,7 @@ function layoutFunnelChart(input) {
             const at = mid + full / 2 + PAD$2;
             return [
                 stage,
-                label(px(horizontal ? center : at), px(horizontal ? at : center), text, {
+                boundedLabel(px(horizontal ? center : at), px(horizontal ? at : center), text, width, {
                     part: 'stage-label',
                     anchor: horizontal ? 'middle' : 'start',
                     baseline: horizontal ? 'hanging' : 'middle',
@@ -4123,14 +4299,27 @@ function layoutFunnelChart(input) {
                 }),
             ];
         }
+        const caption = boundedLabel(px(horizontal ? center : mid), px(horizontal ? mid : center), text, width, {
+            part: 'stage-label',
+            anchor: 'middle',
+            baseline: 'middle',
+            fill: 'var(--skdx-color-text-default)',
+        });
         return [
             stage,
-            label(px(horizontal ? center : mid), px(horizontal ? mid : center), text, {
-                part: 'stage-label',
-                anchor: 'middle',
-                baseline: 'middle',
-                fill: 'var(--skdx-color-text-on-accent)',
-            }),
+            // A stage can be narrower than its label, and arbitrary series colors
+            // cannot guarantee contrast. Keep the bounded label on a token surface.
+            {
+                kind: 'rect',
+                part: 'stage-label-background',
+                x: px(caption.x - (caption.text.length * CHAR + 8) / 2),
+                y: px((horizontal ? mid : center) - 9),
+                width: caption.text.length * CHAR + 8,
+                height: 18,
+                rx: 8,
+                fill: 'var(--skdx-color-surface-default)',
+            },
+            caption,
         ];
     });
     const c = canvas(input, width, height, legend);
@@ -4154,7 +4343,8 @@ function layoutRadialBar(input) {
         return state;
     const format = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
+    const legend = data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
+    const top = legendTop(input, legend, width);
     const cx = width / 2;
     const cy = top + (height - top) / 2;
     const outer = Math.max(0, Math.min(width, height - top) / 2 - (input.bands ? 20 : 8));
@@ -4169,7 +4359,6 @@ function layoutRadialBar(input) {
     const rounded = input.rounded ?? true;
     const ratio = (v) => (max > 0 ? Math.max(0, Math.min(1, v / max)) : 0);
     const shapes = [];
-    const legend = data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
     // Threshold sectors outside the arcs, e.g. poor / fair / good.
     for (const b of input.bands ?? []) {
         const a0 = start + ratio(b.from) * sweep;
@@ -4765,6 +4954,12 @@ function layoutRangeChart(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
+/**
+ * Trigonometry rounded to 1e-6: `Math.cos`/`Math.sin` are implementation-defined, so their
+ * last-bit differences between a Node render and a browser render would otherwise reach the
+ * markup and break hydration.
+ */
+const q = (v) => Math.round(v * 1e6) / 1e6;
 /** Node labels are drawn by default up to this many nodes. */
 const NETWORK_LABEL_LIMIT = 60;
 /** Per-edge titles and keyboard stops are emitted up to this many edges. */
@@ -4808,13 +5003,14 @@ function layoutNetworkChart(input) {
     const { width, height } = size(input);
     const [rMin, rMax] = input.nodeRange ?? [5, 16];
     const labels = input.labels ?? nodes.length <= NETWORK_LABEL_LIMIT;
+    const groups = [...new Set(input.nodes.map(groupOf).filter((g) => g !== undefined))];
+    const legend = groups.map((g, i) => ({ name: g, color: colorOf(input, i) }));
     const plot = plotBox(width, height, {
-        top: legendTop(input) + rMax + 8,
+        top: legendTop(input, legend, width) + rMax + 8,
         right: rMax + (labels ? 48 : 8),
         bottom: rMax + 8,
         left: rMax + 8,
     });
-    const groups = [...new Set(input.nodes.map(groupOf).filter((g) => g !== undefined))];
     const colorFor = (n, i) => n.color ?? colorOf(input, n.group !== undefined ? groups.indexOf(n.group) : i);
     const [, vMax] = minMax(nodes.map((n) => n.value));
     const radius = (v) => isFinite(v) && vMax > 0 ? rMin + Math.sqrt(Math.max(0, v) / vMax) * (rMax - rMin) : rMin;
@@ -4834,8 +5030,8 @@ function layoutNetworkChart(input) {
         ys = nodes.map((node) => node.y);
     }
     else if (mode === 'circular' || mode === 'manual' || n < 3) {
-        xs = nodes.map((_, i) => Math.cos((2 * Math.PI * i) / n - Math.PI / 2));
-        ys = nodes.map((_, i) => Math.sin((2 * Math.PI * i) / n - Math.PI / 2));
+        xs = nodes.map((_, i) => q(Math.cos((2 * Math.PI * i) / n - Math.PI / 2)));
+        ys = nodes.map((_, i) => q(Math.sin((2 * Math.PI * i) / n - Math.PI / 2)));
     }
     else {
         ({ xs, ys } = force(n, edges.map((e) => [at.get(e.source), at.get(e.target)]), input.iterations ?? Math.max(50, Math.min(300, Math.floor(30_000 / n)))));
@@ -4908,7 +5104,7 @@ function layoutNetworkChart(input) {
                 item,
             };
         }
-        const len = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+        const len = Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y)) || 1;
         const ux = (b.x - a.x) / len;
         const uy = (b.y - a.y) / len;
         if (input.directed) {
@@ -4989,7 +5185,6 @@ function layoutNetworkChart(input) {
             fill: dim(p.node.id) === undefined ? 'var(--skdx-color-text-default)' : CHART_COLORS.grid,
         }));
     }
-    const legend = groups.map((g, i) => ({ name: g, color: colorOf(input, i) }));
     const c = canvas(input, width, height, legend);
     return {
         ...c,
@@ -4999,11 +5194,15 @@ function layoutNetworkChart(input) {
 }
 /**
  * Fruchterman–Reingold in the unit square with linear cooling. Deterministic: nodes start on a
- * circle in input order. ponytail: O(n²) per iteration; a Barnes–Hut tree if graphs exceed ~2000 nodes.
+ * circle in input order, the seed is quantised and every step afterwards uses only IEEE-exact
+ * arithmetic (`+ - * /` and `sqrt`), so a server render and a browser render agree bit for bit —
+ * `Math.cos`/`Math.sin`/`Math.hypot` are implementation-defined and their last-bit differences
+ * would otherwise amplify over the iterations into a hydration mismatch.
+ * ponytail: O(n²) per iteration; a Barnes–Hut tree if graphs exceed ~2000 nodes.
  */
 function force(n, edges, iterations) {
-    const xs = Array.from({ length: n }, (_, i) => Math.cos((2 * Math.PI * i) / n));
-    const ys = Array.from({ length: n }, (_, i) => Math.sin((2 * Math.PI * i) / n));
+    const xs = Array.from({ length: n }, (_, i) => q(Math.cos((2 * Math.PI * i) / n)));
+    const ys = Array.from({ length: n }, (_, i) => q(Math.sin((2 * Math.PI * i) / n)));
     const k = Math.sqrt(4 / n);
     const dx = new Array(n).fill(0);
     const dy = new Array(n).fill(0);
@@ -5032,7 +5231,7 @@ function force(n, edges, iterations) {
                 continue;
             const ex = xs[a] - xs[b];
             const ey = ys[a] - ys[b];
-            const d = Math.hypot(ex, ey) || 1e-6;
+            const d = Math.sqrt(ex * ex + ey * ey) || 1e-6;
             const f = (d * d) / k / d;
             dx[a] = dx[a] - ex * f;
             dy[a] = dy[a] - ey * f;
@@ -5040,7 +5239,8 @@ function force(n, edges, iterations) {
             dy[b] = dy[b] + ey * f;
         }
         for (let i = 0; i < n; i++) {
-            const d = Math.hypot(dx[i], dy[i]) || 1e-6;
+            const d = Math.sqrt(dx[i] * dx[i] + dy[i] * dy[i]) ||
+                1e-6;
             const step = Math.min(d, t);
             xs[i] = xs[i] + (dx[i] / d) * step;
             ys[i] = ys[i] + (dy[i] / d) * step;
@@ -5119,7 +5319,7 @@ function layoutTimelineChart(input) {
         // A list: the date column, a spine, one marker and label per row.
         const dateW = Math.max(...events.map((e) => dateOf(e.time).length)) * CHAR + 16;
         const plot = plotBox(width, height, {
-            top: 8 + legendTop(input),
+            top: 8 + legendTop(input, legend, width),
             right: 8,
             bottom: 8,
             left: dateW + 12,
@@ -5173,7 +5373,7 @@ function layoutTimelineChart(input) {
     // Half a date label at each end, so the first and last ticks stay inside the canvas.
     const dateW = (Math.max(dateOf(t0).length, dateOf(t1).length) * CHAR) / 2 + 4;
     const plot = plotBox(width, height, {
-        top: 8 + legendTop(input),
+        top: 8 + legendTop(input, legend, width),
         right: Math.max(16, dateW),
         bottom: 32 + (input.xAxis?.label ? 14 : 0),
         left: Math.max(16, laneW, dateW),
@@ -5267,6 +5467,26 @@ function layoutTimelineChart(input) {
     return { ...c, shapes: [...shapes, ...texts, ...marks, ...c.shapes], issues };
 }
 
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** Shared input/surface rounding; consumer tokens can customize it without changing data geometry. */
+const CHART_SURFACE_RADIUS = 'var(--skdx-radius-default, var(--skdx-radius-md, 0.5rem))';
+/** Only rectangular UI surfaces follow control rounding. Data marks retain their geometry/options. */
+function chartSurfaceRadius(part) {
+    return [
+        'tooltip',
+        'skeleton',
+        'label-background',
+        'stage-label-background',
+        'brush-handle',
+    ].includes(part)
+        ? CHART_SURFACE_RADIUS
+        : undefined;
+}
+
 /*
  * Copyright (c) 2026 SkandaDX
  * This file is part of the SkandaDX organization.
@@ -5829,7 +6049,7 @@ function shapeMarkup(s) {
         case 'circle':
             return `<circle${attrs([part, ['cx', s.cx], ['cy', s.cy], ['r', s.r], ['fill', s.fill], ['stroke', s.stroke]])}>${title}</circle>`;
         case 'text':
-            return `<text${attrs([part, ['x', s.x], ['y', s.y], ['text-anchor', s.anchor], ['dominant-baseline', s.baseline], ['fill', s.fill], ['font-weight', s.weight], ['transform', s.rotate ? `rotate(${s.rotate} ${s.x} ${s.y})` : undefined]])}>${esc(s.text)}</text>`;
+            return `<text${attrs([part, ['aria-label', s.title], ['x', s.x], ['y', s.y], ['text-anchor', s.anchor], ['dominant-baseline', s.baseline], ['fill', s.fill], ['font-weight', s.weight], ['transform', s.rotate ? `rotate(${s.rotate} ${s.x} ${s.y})` : undefined]])}>${esc(s.text)}</text>`;
     }
 }
 /** The `<defs>` block for a layout's gradients, or an empty string. */
@@ -5917,6 +6137,11 @@ function seriesCsv(series, categories = []) {
  */
 /** A node's size: its own value, else the sum of its children's. */
 const nodeValue = (n) => isFinite(n.value) ? n.value : (n.children ?? []).reduce((s, c) => s + nodeValue(c), 0);
+/**
+ * Whether this node or anything under it carries a value. A branch in a tree where nobody sets
+ * `value` sums to 0, which is not data and must not be printed as one.
+ */
+const hasValue = (n) => isFinite(n.value) || (n.children ?? []).some(hasValue);
 /** Levels below the given nodes (0 for none). */
 const depthOf = (nodes) => nodes.length === 0 ? 0 : 1 + Math.max(...nodes.map((n) => depthOf(n.children ?? [])));
 /** A node's identity: its id, else its name. */
@@ -6376,13 +6601,13 @@ function layoutTreemap(input) {
     const formatValue = makeFormatter(input.format);
     const { width, height } = size(input);
     const crumbs = input.breadcrumbs && path.length > 0;
-    const top = legendTop(input) + (crumbs ? 20 : 0);
+    const legend = nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) }));
+    const top = legendTop(input, legend, width) + (crumbs ? 20 : 0);
     const pad = Math.max(0, input.padding ?? 2);
     const sort = input.sort ?? 'desc';
     const tiling = input.tiling ?? 'squarify';
     const showLabels = input.labels ?? true;
     const shapes = [];
-    const legend = nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) }));
     // Leaves are colored by value when a scale is given; branches keep the branch color.
     const leaves = [];
     const collect = (list) => {
@@ -6430,11 +6655,14 @@ function layoutTreemap(input) {
             });
             if (branch)
                 tile(t.node.children, tx + pad, ty + pad, Math.max(0, tw - 2 * pad), Math.max(0, th - 2 * pad), t.color, depth + 1);
-            else if (showLabels && tw > 40 && th > 20)
-                shapes.push(label(px(tx + 6), px(ty + 6), t.node.name, {
+            else if (showLabels && tw > 40 && th > 20) {
+                const capacity = Math.max(1, Math.floor((tw - 12) / CHAR));
+                const text = t.node.name.length > capacity ? `${t.node.name.slice(0, capacity - 1)}…` : t.node.name;
+                shapes.push(label(px(tx + 6), px(ty + 6), text, {
                     baseline: 'hanging',
                     fill: 'var(--skdx-color-text-on-accent)',
                 }));
+            }
         };
         if (tiling === 'squarify')
             squarify(tiles, x, y, w, h, place);
@@ -6443,9 +6671,9 @@ function layoutTreemap(input) {
     };
     tile(nodes, 0, top, width, height - top, undefined, 0);
     if (crumbs)
-        shapes.push(...breadcrumbShapes(path, 8, legendTop(input) + 10));
+        shapes.push(...breadcrumbShapes(path, 8, legendTop(input, legend, width) + 10));
     const c = canvas(input, width, height, legend);
-    return { ...c, shapes: [...shapes, ...c.shapes] };
+    return { ...c, shapes: withLabelSurfaces([...shapes, ...c.shapes]) };
 }
 /** The drill path as clickable crumbs (each carries the node's id) separated by `›`, from `x`. */
 function breadcrumbShapes(path, x, y) {
@@ -6498,6 +6726,7 @@ function layoutCandlestick(input) {
     const UP = input.upColor ?? CHART_COLORS.positive;
     const DOWN = input.downColor ?? CHART_COLORS.negative;
     const priceFormat = makeFormatter(input.format);
+    const volumeFormat = makeFormatter(input.volumeFormat ?? { style: 'integer' });
     const count = all.length;
     const start = Math.max(0, Math.min(count - 2, Math.floor(input.zoom?.start ?? 0)));
     const end = input.zoom ? Math.max(start + 2, Math.min(count, Math.ceil(input.zoom.end))) : count;
@@ -6507,19 +6736,12 @@ function layoutCandlestick(input) {
     const { width, height } = size(input);
     const brushRoom = input.brush ? BRUSH_HEIGHT + BRUSH_GAP : 0;
     const selector = input.rangeSelector ?? [];
-    const outer = plotBox(width, height, {
-        ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input) + (selector.length ? SELECTOR_HEIGHT : 0),
-        bottom: MARGIN$1.bottom + brushRoom,
-    });
     // `compare` plots the change from the first visible close: y values (and the axis format)
     // become fractions while tooltips keep the prices and add the percentage.
     const base = input.compare ? data[0].close : undefined;
     const cmp = (v) => (base !== undefined && base !== 0 ? v / base - 1 : v);
     const pctFormat = base !== undefined ? { style: 'percent', digits: 1 } : undefined;
     const pct = makeFormatter({ style: 'percent', digits: 1 });
-    const volumeH = hasVolume ? outer.height * VOLUME_SHARE : 0;
-    const plot = { ...outer, height: Math.max(0, outer.height - volumeH - (hasVolume ? 8 : 0)) };
     // Moving averages run over every close, so zooming never shortens the window; the visible
     // slice is drawn and read in the crosshair.
     const closes = all.map((c) => c.close);
@@ -6535,12 +6757,30 @@ function layoutCandlestick(input) {
             hidden: isHidden(input, name),
         };
     });
-    const y = axis(extent([
+    // The price extent is known before the plot box, so the left margin can hold the widest tick
+    // label: a currency price such as "$180.00" overflows the default 48.
+    const prices = extent([
         ...data.flatMap((c) => [cmp(c.low), cmp(c.high)]),
         ...overlays
             .filter((o) => !o.hidden)
             .flatMap((o) => o.values.map((v) => (isFinite(v) ? cmp(v) : v))),
-    ], false), [plot.y + plot.height, plot.y], { scale: input.scale === 'log' ? 'log' : 'linear', format: pctFormat }, input.format);
+    ], false);
+    const legend = [
+        { name: 'Up', color: UP },
+        { name: 'Down', color: DOWN },
+        ...overlays.map((o) => ({ name: o.name, color: o.color })),
+    ];
+    const outer = plotBox(width, height, {
+        ...MARGIN$1,
+        top: MARGIN$1.top + legendTop(input, legend, width) + (selector.length ? SELECTOR_HEIGHT : 0),
+        bottom: MARGIN$1.bottom + brushRoom,
+        left: input.scale === 'log'
+            ? MARGIN$1.left
+            : valueAxisRoom(prices, makeFormatter(pctFormat ?? input.yAxis?.format ?? input.format)),
+    });
+    const volumeH = hasVolume ? outer.height * VOLUME_SHARE : 0;
+    const plot = { ...outer, height: Math.max(0, outer.height - volumeH - (hasVolume ? 8 : 0)) };
+    const y = axis(prices, [plot.y + plot.height, plot.y], { scale: input.scale === 'log' ? 'log' : 'linear', format: pctFormat ?? input.yAxis?.format }, input.format);
     // A time axis places candles by their label's time, so missing sessions leave gaps; the bar
     // width is 80% of the smallest gap. Otherwise every candle takes an equal slot.
     const times = data.map((c) => categoryValue(c.label));
@@ -6568,11 +6808,6 @@ function layoutCandlestick(input) {
             .map((t) => ({ pos: px(tx(t)), label: categoryLabel(t, tickFormat) }));
     }
     const labels = data.map((c) => categoryLabel(c.label, input.xAxis?.format));
-    const legend = [
-        { name: 'Up', color: UP },
-        { name: 'Down', color: DOWN },
-        ...overlays.map((o) => ({ name: o.name, color: o.color })),
-    ];
     const c0 = canvas(input, width, height, legend);
     const frame = {
         ...c0,
@@ -6616,7 +6851,7 @@ function layoutCandlestick(input) {
         const color = up ? UP : DOWN;
         const cx = px(x.center(i));
         const change = base !== undefined ? ` (${pct(cmp(c.close))})` : '';
-        const title = `${labels[i]}: O ${priceFormat(c.open)} H ${priceFormat(c.high)} L ${priceFormat(c.low)} C ${priceFormat(c.close)}${change}${isFinite(c.volume) ? ` V ${priceFormat(c.volume)}` : ''}`;
+        const title = `${labels[i]}: O ${priceFormat(c.open)} H ${priceFormat(c.high)} L ${priceFormat(c.low)} C ${priceFormat(c.close)}${change}${isFinite(c.volume) ? ` V ${volumeFormat(c.volume)}` : ''}`;
         const item = {
             label: title,
             id: c.id,
@@ -6630,7 +6865,7 @@ function layoutCandlestick(input) {
             `High: ${priceFormat(c.high)}`,
             `Low: ${priceFormat(c.low)}`,
             `Close: ${priceFormat(c.close)}${change}`,
-            ...(isFinite(c.volume) ? [`Volume: ${priceFormat(c.volume)}`] : []),
+            ...(isFinite(c.volume) ? [`Volume: ${volumeFormat(c.volume)}`] : []),
             ...overlays
                 .filter((o) => !o.hidden)
                 .map((o) => `${o.name}: ${isFinite(o.values[i]) ? priceFormat(o.values[i]) : '—'}`),
@@ -6709,7 +6944,7 @@ function layoutCandlestick(input) {
                 height: px(Math.max(h, 0)),
                 fill: c.close >= c.open ? UP : DOWN,
                 opacity: 0.4,
-                title: `${labels[i]}: volume ${priceFormat(c.volume)}`,
+                title: `${labels[i]}: volume ${volumeFormat(c.volume)}`,
             });
         });
     }
@@ -6808,7 +7043,7 @@ function layoutCandlestick(input) {
             width: 6,
             height: box.height - 16,
             fill: CHART_COLORS.axis,
-            rx: 2,
+            rx: 8,
         }, {
             kind: 'rect',
             part: 'brush-handle',
@@ -6817,7 +7052,7 @@ function layoutCandlestick(input) {
             width: 6,
             height: box.height - 16,
             fill: CHART_COLORS.axis,
-            rx: 2,
+            rx: 8,
         });
         hit.brush = { box, window };
     }
@@ -6909,19 +7144,20 @@ function layoutWaterfall(input) {
             flat: true,
         });
     const widest = horizontal ? Math.max(0, ...steps.map((s) => s.name.length)) * CHAR + 16 : 0;
+    const legend = [
+        { name: 'Increase', color: up },
+        { name: 'Decrease', color: down },
+    ];
     const plot = plotBox(width, height, {
         ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input),
+        top: MARGIN$1.top + legendTop(input, legend, width),
         left: Math.max(MARGIN$1.left, widest),
         right: input.labels && horizontal ? 56 : MARGIN$1.right,
     });
     const totals = steps.flatMap((s) => [s.from, s.to]);
     const value = axis([Math.min(0, ...totals), Math.max(0, ...totals)], horizontal ? [plot.x, plot.x + plot.width] : [plot.y + plot.height, plot.y], {}, input.format);
     const band = bandScale(steps.length, horizontal ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width]);
-    const c = canvas(input, width, height, [
-        { name: 'Increase', color: up },
-        { name: 'Decrease', color: down },
-    ]);
+    const c = canvas(input, width, height, legend);
     const categoryTicks = steps.map((s, i) => ({ pos: px(band.center(i)), label: s.name }));
     const shapes = frameShapes({
         ...c,
@@ -7133,8 +7369,9 @@ function layoutGantt(input) {
         : '';
     const widest = Math.max(0, ...rowNames.map((n) => n.length + rowSuffix(n).length)) * CHAR +
         Math.max(0, ...rowNames.map((n) => (rowDepth.get(n) ?? 0) * 12));
+    const legend = input.tasks.map((t, i) => ({ name: t.name, color: colorOf(input, i, t.color) }));
     const plot = plotBox(width, height, {
-        top: 8 + legendTop(input),
+        top: 8 + legendTop(input, legend, width),
         right: 16,
         bottom: 32 + (input.xAxis?.label ? 14 : 0),
         left: Math.min(width / 2, Math.max(64, widest + 16)),
@@ -7167,7 +7404,10 @@ function layoutGantt(input) {
             y2: plot.y + plot.height,
             stroke: CHART_COLORS.grid,
         });
-        shapes.push(label(t.pos, plot.y + plot.height + 20, t.label, { part: 'x-label', anchor: 'middle' }));
+        shapes.push(label(t.pos, plot.y + plot.height + 20, t.label, {
+            part: 'x-label',
+            anchor: tickAnchor(t.pos, t.label, width),
+        }));
     }
     rowNames.forEach((name, i) => {
         const owner = visible.find((t) => (t.group ?? t.name) === name);
@@ -7363,7 +7603,7 @@ function layoutGantt(input) {
             });
         }
     shapes.push(...overlays, ...annotationShapes(input.annotations, scales));
-    const c = canvas(input, width, height, input.tasks.map((t, i) => ({ name: t.name, color: colorOf(input, i, t.color) })));
+    const c = canvas(input, width, height, legend);
     return {
         ...c,
         shapes: [...shapes, ...c.shapes],
@@ -7528,9 +7768,10 @@ function layoutBoxplot(input) {
     const horizontal = input.orientation === 'horizontal';
     const groups = grouped ? categories : input.series.map((s) => s.name);
     const widest = Math.max(0, ...groups.map((n) => n.length)) * CHAR;
+    const legend = input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) }));
     const plot = plotBox(width, height, {
         ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input) + (input.yAxis?.label ? 12 : 0),
+        top: MARGIN$1.top + legendTop(input, legend, width) + (input.yAxis?.label ? 12 : 0),
         left: horizontal ? Math.max(MARGIN$1.left, widest + 16) : MARGIN$1.left,
         bottom: MARGIN$1.bottom + (horizontal && input.yAxis?.label ? 14 : 0),
     });
@@ -7548,7 +7789,7 @@ function layoutBoxplot(input) {
     const slots = grouped ? [...new Set(shown.map((c) => c.si))] : [];
     const slotW = grouped ? band.bandwidth / Math.max(1, slots.length) : band.bandwidth;
     const center = (c) => grouped ? band.start(c.ci) + (slots.indexOf(c.si) + 0.5) * slotW : band.center(c.si);
-    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) })));
+    const c = canvas(input, width, height, legend);
     const categoryTicks = groups.map((g, i) => ({ pos: px(band.center(i)), label: g }));
     const shapes = frameShapes({
         ...c,
@@ -7699,7 +7940,8 @@ function layoutSunburst(input) {
     // Crumbs sit in the hole when there is one, else in a row above the rings.
     const crumbs = input.breadcrumbs && path.length > 0;
     const crumbsAbove = crumbs && inner === 0;
-    const top = legendTop(input) + (crumbsAbove ? 20 : 0);
+    const legend = nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) }));
+    const top = legendTop(input, legend, width) + (crumbsAbove ? 20 : 0);
     const cx = width / 2;
     const cy = top + (height - top) / 2;
     const radius = Math.max(0, Math.min(width, height - top) / 2 - 8);
@@ -7779,11 +8021,11 @@ function layoutSunburst(input) {
     if (crumbs) {
         const w = path.reduce((s, n) => s + n.name.length * CHAR + 6, 0) + (path.length - 1) * (CHAR + 6);
         texts.push(...(crumbsAbove
-            ? breadcrumbShapes(path, 8, legendTop(input) + 10)
+            ? breadcrumbShapes(path, 8, legendTop(input, legend, width) + 10)
             : breadcrumbShapes(path, cx - w / 2, input.centerLabel ? cy + 8 : cy)));
     }
-    const c = canvas(input, width, height, nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) })));
-    return { ...c, shapes: [...shapes, ...texts, ...c.shapes] };
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: withLabelSurfaces([...shapes, ...texts, ...c.shapes]) };
 }
 
 /*
@@ -7847,12 +8089,6 @@ function layoutChord(input) {
         return { ...state, issues };
     const formatValue = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
-    const cx = width / 2;
-    const cy = top + (height - top) / 2;
-    const r = Math.max(0, Math.min(width, height - top) / 2 - 36);
-    const r0 = Math.max(0, r - RING);
-    const PAD = ((input.padding ?? 2.3) * Math.PI) / 180;
     // Groups keep their input order (and color) but can be arranged by total flow.
     const cellRaw = (i, j) => {
         const v = given2[i]?.[j];
@@ -7864,6 +8100,17 @@ function layoutChord(input) {
         order.sort((a, b) => input.sort === 'asc' ? totalOf(a) - totalOf(b) : totalOf(b) - totalOf(a));
     const names = order.map((i) => given[i]);
     const colorAt = (k) => colorOf(input, order[k]);
+    const legend = names.map((name, i) => ({ name, color: colorAt(i) }));
+    const top = legendTop(input, legend, width);
+    const cx = width / 2;
+    const cy = top + (height - top) / 2;
+    // Group names sit outside the rim, so the circle keeps room for the widest one on either side;
+    // without it the left-hand label runs off the svg.
+    const nameGap = input.ticks ? 8 + TICK + 14 : 8;
+    const nameRoom = nameGap + Math.max(0, ...given.map((s) => s.length)) * CHAR + 4;
+    const r = Math.max(0, Math.min(width / 2 - nameRoom, (height - top) / 2 - 36));
+    const r0 = Math.max(0, r - RING);
+    const PAD = ((input.padding ?? 2.3) * Math.PI) / 180;
     const n = names.length;
     const selectedId = selectedIds(input.selected)[0];
     const selected = selectedId === undefined ? -1 : names.indexOf(String(selectedId));
@@ -7943,7 +8190,7 @@ function layoutChord(input) {
         const mid = (g.a0 + g.a1) / 2;
         const sin = Math.sin(mid);
         // Ticks sit on the rim; the group name moves out past their labels.
-        const nameR = r + (input.ticks ? 8 + TICK + 14 : 8);
+        const nameR = r + nameGap;
         shapes.push(label(px(cx + nameR * sin), px(cy - nameR * Math.cos(mid)), names[i], {
             anchor: sin > 0.1 ? 'start' : sin < -0.1 ? 'end' : 'middle',
             baseline: 'middle',
@@ -7981,7 +8228,7 @@ function layoutChord(input) {
             }));
         });
     });
-    const c = canvas(input, width, height, names.map((name, i) => ({ name, color: colorAt(i) })));
+    const c = canvas(input, width, height, legend);
     return { ...c, shapes: [...shapes, ...c.shapes], issues };
 }
 
@@ -8232,16 +8479,17 @@ function layoutMarimekkoChart(input) {
     const format = makeFormatter(input.format);
     const totalFormat = makeFormatter(input.xAxis?.format ?? input.format);
     const { width, height } = size(input);
+    const legend = segments.map((s) => ({ name: s.name, color: s.color }));
     const plot = plotBox(width, height, {
         ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input),
+        top: MARGIN$1.top + legendTop(input, legend, width),
         bottom: MARGIN$1.bottom + (input.xAxis?.label ? 14 : 0) + (input.xAxis?.format ? 14 : 0),
     });
     const gap = Math.max(0, Math.min(0.2, input.gap ?? 0.01)) * plot.width;
     const gaps = Math.max(0, columns.length - 1);
     const usable = Math.max(0, plot.width - gap * gaps);
     const y = axis([0, 1], [plot.y + plot.height, plot.y], { format: { style: 'percent' } });
-    const c = canvas(input, width, height, segments.map((s) => ({ name: s.name, color: s.color })));
+    const c = canvas(input, width, height, legend);
     // Column positions along x, each as wide as its share of the grand total.
     let x = plot.x;
     const placed = columns.map((col) => {
@@ -8303,7 +8551,7 @@ function layoutMarimekkoChart(input) {
                 }));
         });
     }
-    return { ...c, shapes: [...shapes, ...cells, ...texts, ...c.shapes], issues };
+    return { ...c, shapes: withLabelSurfaces([...shapes, ...cells, ...texts, ...c.shapes]), issues };
 }
 
 /*
@@ -8331,8 +8579,9 @@ function layoutParallelCoordinates(input) {
     const first = dims[0];
     const last = dims[dims.length - 1];
     const pad = (d) => ((d.label ?? d.key).length * CHAR) / 2 + 8;
+    const legend = groups.map((g, i) => ({ name: g, color: colorOf(input, i) }));
     const plot = plotBox(width, height, {
-        top: 28 + legendTop(input),
+        top: 28 + legendTop(input, legend, width),
         right: Math.max(16, pad(last)),
         bottom: 16,
         left: Math.max(48, pad(first)),
@@ -8435,7 +8684,7 @@ function layoutParallelCoordinates(input) {
                 : undefined,
         };
     });
-    const c = canvas(input, width, height, groups.map((g, i) => ({ name: g, color: colorOf(input, i) })));
+    const c = canvas(input, width, height, legend);
     return { ...c, shapes: [...shapes, ...lines, ...c.shapes], issues };
 }
 
@@ -8512,6 +8761,10 @@ function layoutDumbbellChart(input) {
     const vertical = input.orientation === 'vertical';
     const startLabel = input.startLabel ?? 'Start';
     const endLabel = input.endLabel ?? 'End';
+    // The legend toggles the two ends like any other series: a hidden end drops its markers, its
+    // value labels and the connector that would dangle, and leaves the value axis to the rest.
+    const hideStart = isHidden(input, startLabel);
+    const hideEnd = isHidden(input, endLabel);
     const sorted = [...data];
     if (input.sort) {
         const key = (d) => input.sort === 'change'
@@ -8522,21 +8775,22 @@ function layoutDumbbellChart(input) {
         sorted.sort((a, b) => (input.sort === 'asc' ? key(a) - key(b) : key(b) - key(a)));
     }
     const widest = Math.max(0, ...sorted.map((d) => d.name.length)) * CHAR;
+    const startColor = colorOf(input, 0);
+    const endColor = colorOf(input, 1);
+    const legend = [
+        { name: startLabel, color: startColor },
+        { name: endLabel, color: endColor },
+    ];
     const plot = plotBox(width, height, {
         ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input) + (vertical && input.xAxis?.label ? 12 : 0),
+        top: MARGIN$1.top + legendTop(input, legend, width) + (vertical && input.xAxis?.label ? 12 : 0),
         right: input.labels && !vertical ? 56 : MARGIN$1.right,
         bottom: MARGIN$1.bottom + (!vertical && input.xAxis?.label ? 14 : 0),
         left: vertical ? MARGIN$1.left : Math.max(MARGIN$1.left, widest + 16),
     });
-    const value = axis(extent(sorted.flatMap((d) => [d.start, d.end]), false), vertical ? [plot.y + plot.height, plot.y] : [plot.x, plot.x + plot.width], input.xAxis ?? {}, input.format);
+    const value = axis(extent(sorted.flatMap((d) => [hideStart ? undefined : d.start, hideEnd ? undefined : d.end]), false), vertical ? [plot.y + plot.height, plot.y] : [plot.x, plot.x + plot.width], input.xAxis ?? {}, input.format);
     const band = bandScale(sorted.length, vertical ? [plot.x, plot.x + plot.width] : [plot.y, plot.y + plot.height]);
-    const startColor = colorOf(input, 0);
-    const endColor = colorOf(input, 1);
-    const c = canvas(input, width, height, [
-        { name: startLabel, color: startColor },
-        { name: endLabel, color: endColor },
-    ]);
+    const c = canvas(input, width, height, legend);
     const categoryTicks = sorted.map((d, i) => ({ pos: px(band.center(i)), label: d.name }));
     const shapes = frameShapes({
         ...c,
@@ -8575,7 +8829,7 @@ function layoutDumbbellChart(input) {
             index: i,
             value: isFinite(d.end) ? d.end : undefined,
         };
-        if (isFinite(d.start) && isFinite(d.end)) {
+        if (!hideStart && !hideEnd && isFinite(d.start) && isFinite(d.end)) {
             const a = at(d.start, mid);
             const b = at(d.end, mid);
             connectors.push({
@@ -8591,11 +8845,11 @@ function layoutDumbbellChart(input) {
                 item,
             });
         }
-        for (const [v, part, name, fill] of [
-            [d.start, 'start', startLabel, startColor],
-            [d.end, 'end', endLabel, endColor],
+        for (const [v, part, name, fill, hidden] of [
+            [d.start, 'start', startLabel, startColor, hideStart],
+            [d.end, 'end', endLabel, endColor, hideEnd],
         ]) {
-            if (!isFinite(v))
+            if (hidden || !isFinite(v))
                 continue;
             const p = at(v, mid);
             const text = `${d.name} · ${name}: ${format(v)}`;
@@ -8801,7 +9055,7 @@ function layoutTreeChart(input) {
             });
         }
         const value = nodeValue(p.node);
-        const title = `${p.node.name}${p.node.subtitle ? ` · ${p.node.subtitle}` : ''}${isFinite(p.node.value) || (p.node.children?.length ?? 0) > 0 ? `: ${format(value)}` : ''}${p.collapsed ? ' (collapsed)' : ''}`;
+        const title = `${p.node.name}${p.node.subtitle ? ` · ${p.node.subtitle}` : ''}${hasValue(p.node) ? `: ${format(value)}` : ''}${p.collapsed ? ' (collapsed)' : ''}`;
         const item = { label: title, id: nodeId(p.node), name: p.node.name, value };
         if (box) {
             marks.push({
@@ -8877,7 +9131,10 @@ function layoutTreeChart(input) {
         ]
         : [];
     const c = canvas(input, width, height);
-    return { ...c, shapes: [...links, ...marks, ...texts, ...crumbs, ...c.shapes] };
+    return {
+        ...c,
+        shapes: withLabelSurfaces([...links, ...marks, ...texts, ...crumbs, ...c.shapes]),
+    };
 }
 /** An organization chart: the tree with boxes and elbow links. */
 const layoutOrganizationChart = (input) => layoutTreeChart({ ...input, nodeShape: 'box', linkStyle: 'elbow' });
@@ -8942,13 +9199,21 @@ function packCircles(radii, padding) {
 function layoutCirclePacking(input) {
     const issues = [];
     const { nodes: roots } = drill(input.data, input.rootId);
-    const nodes = cutDepth(roots, input.maxDepth).filter((n) => !isHidden(input, n.name));
+    // The legend lists every top-level branch, hidden ones included, so a hide can be undone; and
+    // a branch keeps the colour of its place in that full list whatever is hidden.
+    const branches = cutDepth(roots, input.maxDepth);
+    const branchColor = new Map(branches.map((n, i) => [nodeId(n), colorOf(input, i, n.color)]));
+    const nodes = branches.filter((n) => !isHidden(input, n.name));
     const state = stateCanvas(input, !nodes.some((n) => nodeValue(n) > 0), 300, 300);
     if (state)
         return { ...state, issues };
     const format = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
+    const legend = branches.map((n) => ({
+        name: n.name,
+        color: branchColor.get(nodeId(n)),
+    }));
+    const top = legendTop(input, legend, width);
     const pad = input.padding ?? 2;
     const labels = input.labels ?? true;
     const leafValues = [];
@@ -8987,7 +9252,7 @@ function layoutCirclePacking(input) {
             const r = Math.max(0, c.r * k - pad / 2);
             const value = nodeValue(n);
             const branch = (n.children?.length ?? 0) > 0;
-            const color = n.color ?? inherited ?? colorOf(input, i);
+            const color = n.color ?? inherited ?? branchColor.get(nodeId(n)) ?? colorOf(input, i);
             const fill = branch ? color : input.colorScale ? (colors.color(value)?.fill ?? color) : color;
             const title = `${n.name}: ${format(value)}`;
             shapes.push({
@@ -9025,8 +9290,8 @@ function layoutCirclePacking(input) {
     };
     const radius = Math.max(0, Math.min(width, height - top) / 2 - 8);
     pack(nodes, width / 2, top + (height - top) / 2, radius, undefined);
-    const c = canvas(input, width, height, nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) })));
-    return { ...c, shapes: [...shapes, ...texts, ...c.shapes], issues };
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: withLabelSurfaces([...shapes, ...texts, ...c.shapes]), issues };
 }
 
 /*
@@ -9049,7 +9314,8 @@ function layoutIcicle(input) {
     const { width, height } = size(input);
     const horizontal = input.orientation === 'horizontal';
     const crumbs = input.breadcrumbs && path.length > 0;
-    const top = legendTop(input) + (crumbs ? 20 : 0);
+    const legend = nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) }));
+    const top = legendTop(input, legend, width) + (crumbs ? 20 : 0);
     const plot = plotBox(width, height, { top, right: 0, bottom: 0, left: 0 });
     const gap = input.padding ?? 1;
     const labels = input.labels ?? true;
@@ -9117,9 +9383,9 @@ function layoutIcicle(input) {
     };
     walk(nodes, 0, horizontal ? plot.y : plot.x, horizontal ? plot.height : plot.width, undefined);
     if (crumbs)
-        shapes.push(...breadcrumbShapes(path, 8, legendTop(input) + 10));
-    const c = canvas(input, width, height, nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) })));
-    return { ...c, shapes: [...shapes, ...texts, ...c.shapes], issues };
+        shapes.push(...breadcrumbShapes(path, 8, legendTop(input, legend, width) + 10));
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: withLabelSurfaces([...shapes, ...texts, ...c.shapes]), issues };
 }
 
 /*
@@ -9177,16 +9443,17 @@ function layoutBumpChart(input) {
     });
     const showLabels = input.labels ?? true;
     const widest = showLabels ? Math.max(0, ...drawn.map((s) => s.name.length)) * CHAR + 12 : 0;
+    const legend = input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) }));
     const plot = plotBox(width, height, {
         ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input),
+        top: MARGIN$1.top + legendTop(input, legend, width),
         right: Math.max(MARGIN$1.right, widest),
         bottom: MARGIN$1.bottom + (input.xAxis?.label ? 14 : 0),
     });
     // Rank 1 sits at the top: the axis runs down from half a rank above 1 to half a rank below `top`.
     const y = linearScale([0.5, top + 0.5], [plot.y, plot.y + plot.height]);
     const band = bandScale(count, [plot.x, plot.x + plot.width], 0);
-    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) })));
+    const c = canvas(input, width, height, legend);
     const rankTicks = Array.from({ length: top }, (_, k) => ({
         pos: px(y(k + 1)),
         label: `#${k + 1}`,
@@ -9294,7 +9561,8 @@ function layoutPolarAreaChart(input) {
         return { ...state, issues };
     const format = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
+    const legend = input.data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
+    const top = legendTop(input, legend, width);
     const cx = width / 2;
     const cy = top + (height - top) / 2;
     const outer = Math.max(0, Math.min(width, height - top) / 2 - (input.labels ? 40 : 12));
@@ -9356,7 +9624,7 @@ function layoutPolarAreaChart(input) {
             }));
         }
     });
-    const c = canvas(input, width, height, input.data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) })));
+    const c = canvas(input, width, height, legend);
     return { ...c, shapes: [...grid, ...sectors, ...texts, ...c.shapes], issues };
 }
 
@@ -9419,15 +9687,16 @@ function layoutSwarmPlot(input) {
     const { width, height } = size(input);
     const horizontal = input.orientation === 'horizontal';
     const widest = Math.max(0, ...input.series.map((s) => s.name.length)) * CHAR;
+    const legend = input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) }));
     const plot = plotBox(width, height, {
         ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input) + (!horizontal && input.yAxis?.label ? 12 : 0),
+        top: MARGIN$1.top + legendTop(input, legend, width) + (!horizontal && input.yAxis?.label ? 12 : 0),
         left: horizontal ? Math.max(MARGIN$1.left, widest + 16) : MARGIN$1.left,
         bottom: MARGIN$1.bottom + (horizontal && input.yAxis?.label ? 14 : 0),
     });
     const value = axis(extent(samples.flat(), false), horizontal ? [plot.x, plot.x + plot.width] : [plot.y + plot.height, plot.y], input.yAxis ?? {}, input.format);
     const band = bandScale(input.series.length, horizontal ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width]);
-    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) })));
+    const c = canvas(input, width, height, legend);
     const categoryTicks = input.series.map((s, i) => ({ pos: px(band.center(i)), label: s.name }));
     const shapes = frameShapes({
         ...c,
@@ -9540,7 +9809,23 @@ function layoutWaffleChart(input) {
     const share = (v) => (total > 0 ? v / total : 0);
     const counts = waffleCounts(data.map((d) => (isHidden(input, d.name) ? 0 : Math.min(1, share(d.value)) * cells)));
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
+    // `labels` appends the share to each legend entry; the entry still toggles by the datum's name.
+    const shares = new Map(data.map((d) => [d.name, `${Math.round(share(d.value) * 100)}%`]));
+    const legend = legendOptions(input);
+    const legendItems = input.data.map((d, i) => ({
+        name: d.name,
+        color: colorOf(input, i, d.color),
+    }));
+    const legendInput = input.labels && legend
+        ? {
+            ...input,
+            legend: {
+                ...legend,
+                formatter: (n) => `${legend.formatter?.(n) ?? n} ${shares.get(n) ?? ''}`,
+            },
+        }
+        : input;
+    const top = legendTop(legendInput, legendItems, width);
     const gap = Math.max(0, input.cellGap ?? 2);
     const cell = Math.max(1, Math.min((width - 2 * PAD) / columns, (height - top - 2 * PAD) / rows));
     const x0 = (width - cell * columns) / 2;
@@ -9550,7 +9835,7 @@ function layoutWaffleChart(input) {
     const corner = (k) => horizontal
         ? { x: x0 + (k % columns) * cell, y: y0 + Math.floor(k / columns) * cell }
         : { x: x0 + Math.floor(k / rows) * cell, y: y0 + (rows - 1 - (k % rows)) * cell };
-    const rect = (k, fill, title, item, opacity) => {
+    const rect = (k, fill, title, item, opacity, stroke) => {
         const { x, y } = corner(k);
         return {
             kind: 'rect',
@@ -9560,6 +9845,7 @@ function layoutWaffleChart(input) {
             width: px(Math.max(0.5, cell - gap)),
             height: px(Math.max(0.5, cell - gap)),
             fill,
+            stroke,
             opacity,
             rx: input.cellRadius ?? 2,
             title,
@@ -9577,20 +9863,10 @@ function layoutWaffleChart(input) {
     });
     const rest = total - sum;
     const restTitle = rest > 0 ? `Other: ${format(rest)} (${Math.round(share(rest) * 100)}%)` : 'Empty';
+    // A subtle fill alone is the same luminance as a dark stage; the outline carries the contrast.
     for (; k < cells; k++)
-        shapes.push(rect(k, CHART_COLORS.grid, restTitle, undefined, 0.6));
-    // `labels` appends the share to each legend entry; the entry still toggles by the datum's name.
-    const shares = new Map(data.map((d) => [d.name, `${Math.round(share(d.value) * 100)}%`]));
-    const legend = legendOptions(input);
-    const c = canvas(input.labels && legend
-        ? {
-            ...input,
-            legend: {
-                ...legend,
-                formatter: (n) => `${legend.formatter?.(n) ?? n} ${shares.get(n) ?? ''}`,
-            },
-        }
-        : input, width, height, input.data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) })));
+        shapes.push(rect(k, CHART_COLORS.grid, restTitle, undefined, 0.6, CHART_COLORS.axis));
+    const c = canvas(legendInput, width, height, legendItems);
     return { ...c, shapes: [...shapes, ...c.shapes], issues };
 }
 
@@ -9608,6 +9884,7 @@ function layoutWaffleChart(input) {
 /** Draws a core shape list back to front; marks with an `item` carry their index for hit-testing. */
 class SkdxChartShapesComponent {
     constructor() {
+        this.surfaceRadius = chartSurfaceRadius;
         this.shapes = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "shapes" }] : /* istanbul ignore next */ []));
     }
@@ -9643,9 +9920,13 @@ class SkdxChartShapesComponent {
             [attr.width]="s.width"
             [attr.height]="s.height"
             [attr.rx]="s.rx"
+            [style.rx]="surfaceRadius(s.part)"
             [attr.fill]="s.fill"
             [attr.stroke]="s.stroke"
             [attr.fill-opacity]="s.opacity"
+            [attr.pointer-events]="
+              s.part === 'stage-label-background' || s.part === 'label-background' ? 'none' : null
+            "
           >
             @if (s.title) {
               <svg:title>{{ s.title }}</svg:title>
@@ -9688,6 +9969,7 @@ class SkdxChartShapesComponent {
         }
         @case ('text') {
           <svg:text
+            [attr.aria-label]="s.title"
             [attr.data-skdx-part]="s.part"
             [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x]="s.x"
@@ -9742,9 +10024,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             [attr.width]="s.width"
             [attr.height]="s.height"
             [attr.rx]="s.rx"
+            [style.rx]="surfaceRadius(s.part)"
             [attr.fill]="s.fill"
             [attr.stroke]="s.stroke"
             [attr.fill-opacity]="s.opacity"
+            [attr.pointer-events]="
+              s.part === 'stage-label-background' || s.part === 'label-background' ? 'none' : null
+            "
           >
             @if (s.title) {
               <svg:title>{{ s.title }}</svg:title>
@@ -9787,6 +10073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }
         @case ('text') {
           <svg:text
+            [attr.aria-label]="s.title"
             [attr.data-skdx-part]="s.part"
             [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x]="s.x"
@@ -9882,12 +10169,16 @@ class SkdxChartRootComponent {
         ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
         this.hover = null;
         this.token = {};
+        this.dismissedCrosshair = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dismissedCrosshair" }] : /* istanbul ignore next */ []));
         this.tip = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tip" }] : /* istanbul ignore next */ []));
         this.tipShapes = computed(() => {
             const own = this.tip();
             const cross = this.crosshair();
-            return own.length || !cross ? own : crosshairAt(this.layout(), cross);
+            return own.length || !cross || cross === this.dismissedCrosshair()
+                ? own
+                : crosshairAt(this.layout(), cross);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tipShapes" }] : /* istanbul ignore next */ []));
         this.lastCross = null;
@@ -9912,8 +10203,6 @@ class SkdxChartRootComponent {
         ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         this.focusable = computed(() => !this.layout().decorative && focusTargets(this.layout()).length > 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
-        this.descId = computed(() => this.layout().description ? `${this.kind()}-desc-${this.label().replace(/\W+/g, '-')}` : null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "descId" }] : /* istanbul ignore next */ []));
         this.focusShapes = computed(() => focusShapes(this.layout(), this.focused()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusShapes" }] : /* istanbul ignore next */ []));
         this.drag = null;
@@ -10019,6 +10308,7 @@ class SkdxChartRootComponent {
         this.shareCrosshair(null);
     }
     onPointerMove(e) {
+        this.dismissedCrosshair.set(null);
         const layout = this.layout();
         if (this.pointers.has(e.pointerId))
             this.pointers.set(e.pointerId, this.viewBox(e).x);
@@ -10233,6 +10523,14 @@ class SkdxChartRootComponent {
         }
     }
     onKeyDown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.focused.set(null);
+            this.clearTip();
+            this.dismissedCrosshair.set(this.crosshair());
+            this.highlight(null);
+            return;
+        }
         if (!this.focusable())
             return;
         const focused = this.focused();
@@ -10270,14 +10568,13 @@ class SkdxChartRootComponent {
       [attr.role]="layout().decorative ? 'presentation' : 'img'"
       [attr.aria-hidden]="layout().decorative ? 'true' : null"
       [attr.aria-label]="layout().decorative ? null : label()"
-      [attr.aria-describedby]="descId()"
+      [attr.aria-description]="layout().description"
       [attr.tabindex]="focusable() ? 0 : null"
       [attr.data-skdx-chart]="kind()"
       [attr.font-family]="colors.fontFamily"
       [attr.font-size]="colors.fontSize"
       [style.max-width]="'100%'"
       [style.height]="'auto'"
-      [style.outline]="'none'"
       [style.cursor]="canZoom() || canPan() ? 'grab' : brushing() ? 'crosshair' : null"
       [style.touch-action]="active() ? 'none' : null"
       [style.--skdx-chart-duration]="duration()"
@@ -10294,7 +10591,7 @@ class SkdxChartRootComponent {
     >
       <title>{{ label() }}</title>
       @if (layout().description) {
-        <svg:desc [attr.id]="descId()">{{ layout().description }}</svg:desc>
+        <svg:desc>{{ layout().description }}</svg:desc>
       }
       @if (layout().defs?.length) {
         <svg:defs>
@@ -10340,7 +10637,7 @@ class SkdxChartRootComponent {
         [attr.data-skdx-tooltip]="kind()"
         [style.left.px]="p.x + 12"
         [style.top.px]="p.y + 12"
-        style="position:fixed;pointer-events:none;z-index:1000;background:var(--skdx-color-surface-raised);color:var(--skdx-color-text-default);border:1px solid var(--skdx-color-border-strong);border-radius:3px;padding:4px 8px;font-family:var(--skdx-font-family);font-size:var(--skdx-font-size-xs);white-space:nowrap"
+        style="position:fixed;pointer-events:none;z-index:1000;background:var(--skdx-color-surface-raised);color:var(--skdx-color-text-default);border:1px solid var(--skdx-color-border-strong);border-radius:var(--skdx-radius-default, var(--skdx-radius-md, 0.5rem));padding:4px 8px;font-family:var(--skdx-font-family);font-size:var(--skdx-font-size-xs);white-space:nowrap"
       >
         @for (line of p.lines; track $index) {
           <div [style.font-weight]="$index === 0 && p.lines.length > 1 ? 'bold' : null">
@@ -10401,14 +10698,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       [attr.role]="layout().decorative ? 'presentation' : 'img'"
       [attr.aria-hidden]="layout().decorative ? 'true' : null"
       [attr.aria-label]="layout().decorative ? null : label()"
-      [attr.aria-describedby]="descId()"
+      [attr.aria-description]="layout().description"
       [attr.tabindex]="focusable() ? 0 : null"
       [attr.data-skdx-chart]="kind()"
       [attr.font-family]="colors.fontFamily"
       [attr.font-size]="colors.fontSize"
       [style.max-width]="'100%'"
       [style.height]="'auto'"
-      [style.outline]="'none'"
       [style.cursor]="canZoom() || canPan() ? 'grab' : brushing() ? 'crosshair' : null"
       [style.touch-action]="active() ? 'none' : null"
       [style.--skdx-chart-duration]="duration()"
@@ -10425,7 +10721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     >
       <title>{{ label() }}</title>
       @if (layout().description) {
-        <svg:desc [attr.id]="descId()">{{ layout().description }}</svg:desc>
+        <svg:desc>{{ layout().description }}</svg:desc>
       }
       @if (layout().defs?.length) {
         <svg:defs>
@@ -10471,7 +10767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         [attr.data-skdx-tooltip]="kind()"
         [style.left.px]="p.x + 12"
         [style.top.px]="p.y + 12"
-        style="position:fixed;pointer-events:none;z-index:1000;background:var(--skdx-color-surface-raised);color:var(--skdx-color-text-default);border:1px solid var(--skdx-color-border-strong);border-radius:3px;padding:4px 8px;font-family:var(--skdx-font-family);font-size:var(--skdx-font-size-xs);white-space:nowrap"
+        style="position:fixed;pointer-events:none;z-index:1000;background:var(--skdx-color-surface-raised);color:var(--skdx-color-text-default);border:1px solid var(--skdx-color-border-strong);border-radius:var(--skdx-radius-default, var(--skdx-radius-md, 0.5rem));padding:4px 8px;font-family:var(--skdx-font-family);font-size:var(--skdx-font-size-xs);white-space:nowrap"
       >
         @for (line of p.lines; track $index) {
           <div [style.font-weight]="$index === 0 && p.lines.length > 1 ? 'bold' : null">
@@ -10696,10 +10992,19 @@ class SkdxSizedBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxSizedBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.4", type: SkdxSizedBase, isStandalone: true, inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, hiddenSeries: { classPropertyName: "hiddenSeries", publicName: "hiddenSeries", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, highlightScope: { classPropertyName: "highlightScope", publicName: "highlightScope", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, accessibleTable: { classPropertyName: "accessibleTable", publicName: "accessibleTable", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, syncId: { classPropertyName: "syncId", publicName: "syncId", isSignal: true, isRequired: false, transformFunction: null }, crossFilter: { classPropertyName: "crossFilter", publicName: "crossFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenSeries: "hiddenSeriesChange", selected: "selectedChange", highlighted: "highlightedChange", zoom: "zoomChange", view: "viewChange", itemClick: "itemClick", dataIssue: "dataIssue", taskChange: "taskChange" }, viewQueries: [{ propertyName: "chartRoot", first: true, predicate: SkdxChartRootComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.4", type: SkdxSizedBase, isStandalone: true, inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, hiddenSeries: { classPropertyName: "hiddenSeries", publicName: "hiddenSeries", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, highlightScope: { classPropertyName: "highlightScope", publicName: "highlightScope", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, accessibleTable: { classPropertyName: "accessibleTable", publicName: "accessibleTable", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, syncId: { classPropertyName: "syncId", publicName: "syncId", isSignal: true, isRequired: false, transformFunction: null }, crossFilter: { classPropertyName: "crossFilter", publicName: "crossFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenSeries: "hiddenSeriesChange", selected: "selectedChange", highlighted: "highlightedChange", zoom: "zoomChange", view: "viewChange", itemClick: "itemClick", dataIssue: "dataIssue", taskChange: "taskChange" }, host: { properties: { "style.display": "responsive() ? 'block' : null", "style.width": "responsive() ? '100%' : null", "style.min-width": "responsive() ? '0' : null" } }, viewQueries: [{ propertyName: "chartRoot", first: true, predicate: SkdxChartRootComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxSizedBase, decorators: [{
-            type: Directive
+            type: Directive,
+            args: [{
+                    // A responsive chart must fill its container even when that container centers flex items.
+                    // Otherwise its last SVG width becomes the host's intrinsic width and it cannot grow again.
+                    host: {
+                        '[style.display]': "responsive() ? 'block' : null",
+                        '[style.width]': "responsive() ? '100%' : null",
+                        '[style.min-width]': "responsive() ? '0' : null",
+                    },
+                }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], hiddenSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenSeries", required: false }] }, { type: i0.Output, args: ["hiddenSeriesChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }, { type: i0.Output, args: ["highlightedChange"] }], highlightScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightScope", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], accessibleTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleTable", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], zoomable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], syncId: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncId", required: false }] }], crossFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossFilter", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dataIssue: [{ type: i0.Output, args: ["dataIssue"] }], taskChange: [{ type: i0.Output, args: ["taskChange"] }], chartRoot: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SkdxChartRootComponent), { isSignal: true }] }] } });
 /** Inputs the cartesian charts (bar, line, area) take. */
 class SkdxChartBase extends SkdxSizedBase {
@@ -10824,5 +11129,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_CSS, ANIMATION_LIMIT, CHART_COLORS, MARKER_LIMIT, NETWORK_LABEL_LIMIT, PARALLEL_TITLE_LIMIT, SAMPLING_THRESHOLD, SERIES_COLORS, SWARM_TITLE_LIMIT, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, TABLE_LIMIT, TITLE_LIMIT, aggregate, anchorOf, animationDuration, annotationShapes, applyTransforms, binCounts, binEdges, binSamples, boxFrom, brushBoxShape, brushDrag, brushGrab, categoryLabel, colorLegendShapes, crosshairAt, crosshairLine, crosshairRows, crosshairShapes, csv, cumulative, cutDepth, defsMarkup, depthOf, difference, drill, emphasize, exponentialMovingAverage, exportChart, filter, findPath, focusShapes, focusTargets, formatValue, ganttDrag, ganttGhost, ganttGrab, ganttKey, hoverTooltip, hoveredRef, insidePolygon, isSelected, isUnzoomed, itemAt, itemId, itemsInBox, itemsInPolygon, lassoShape, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutBubbleChart, layoutBulletChart, layoutBumpChart, layoutCandlestick, layoutCartesian, layoutChord, layoutCirclePacking, layoutComboChart, layoutDumbbellChart, layoutFunnelChart, layoutGantt, layoutGaugeChart, layoutHeatmap, layoutHistogram, layoutIcicle, layoutLineChart, layoutLinearGauge, layoutMap, layoutMarimekkoChart, layoutNetworkChart, layoutOrganizationChart, layoutParallelCoordinates, layoutParetoChart, layoutPieChart, layoutPolarAreaChart, layoutRadarChart, layoutRadialBar, layoutRangeChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutSwarmPlot, layoutTimelineChart, layoutTreeChart, layoutTreemap, layoutWaffleChart, layoutWaterfall, legendOptions, lttb, m4, makeColorScale, makeFormatter, mapPan, mapWheel, matchesItem, minMaxSample, mixStops, movingAverage, nextFocus, nodeId, nodeValue, normalize, packCircles, parseColor, percentageChange, placeLegend, pointerShapes, pointerTooltipText, rank, refOf, referenceShapes, sameRef, sampleIndexes, samplingOptions, selectedIds, seriesCsv, shapeMarkup, sortChildren, sortValues, stateCanvas, svgMarkup, svgToPng, swarmOffsets, syncGroup, tableRows, timeTicks, toRefs, toViewBox, toggleSelection, tooltipOptions, tooltipShapes, translatePath, translateShapes, variantColor, waffleCounts, zoomPan, zoomPinch, zoomWheel };
+export { ANIMATION_CSS, ANIMATION_LIMIT, CHART_COLORS, CHART_SURFACE_RADIUS, MARKER_LIMIT, NETWORK_LABEL_LIMIT, PARALLEL_TITLE_LIMIT, SAMPLING_THRESHOLD, SERIES_COLORS, SWARM_TITLE_LIMIT, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, TABLE_LIMIT, TITLE_LIMIT, aggregate, anchorOf, animationDuration, annotationShapes, applyTransforms, binCounts, binEdges, binSamples, boxFrom, brushBoxShape, brushDrag, brushGrab, categoryLabel, chartSurfaceRadius, colorLegendShapes, crosshairAt, crosshairLine, crosshairRows, crosshairShapes, csv, cumulative, cutDepth, defsMarkup, depthOf, difference, drill, emphasize, exponentialMovingAverage, exportChart, filter, findPath, focusShapes, focusTargets, formatValue, ganttDrag, ganttGhost, ganttGrab, ganttKey, hoverTooltip, hoveredRef, insidePolygon, isSelected, isUnzoomed, itemAt, itemId, itemsInBox, itemsInPolygon, lassoShape, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutBubbleChart, layoutBulletChart, layoutBumpChart, layoutCandlestick, layoutCartesian, layoutChord, layoutCirclePacking, layoutComboChart, layoutDumbbellChart, layoutFunnelChart, layoutGantt, layoutGaugeChart, layoutHeatmap, layoutHistogram, layoutIcicle, layoutLineChart, layoutLinearGauge, layoutMap, layoutMarimekkoChart, layoutNetworkChart, layoutOrganizationChart, layoutParallelCoordinates, layoutParetoChart, layoutPieChart, layoutPolarAreaChart, layoutRadarChart, layoutRadialBar, layoutRangeChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutSwarmPlot, layoutTimelineChart, layoutTreeChart, layoutTreemap, layoutWaffleChart, layoutWaterfall, legendOptions, lttb, m4, makeColorScale, makeFormatter, mapPan, mapWheel, matchesItem, minMaxSample, mixStops, movingAverage, nextFocus, nodeId, nodeValue, normalize, packCircles, parseColor, percentageChange, placeLegend, pointerShapes, pointerTooltipText, rank, refOf, referenceShapes, sameRef, sampleIndexes, samplingOptions, selectedIds, seriesCsv, shapeMarkup, sortChildren, sortValues, stateCanvas, svgMarkup, svgToPng, swarmOffsets, syncGroup, tableRows, timeTicks, toRefs, toViewBox, toggleSelection, tooltipOptions, tooltipShapes, translatePath, translateShapes, variantColor, waffleCounts, zoomPan, zoomPinch, zoomWheel };
 //# sourceMappingURL=skdx-angular-charts-internal.mjs.map