@skdx/angular-charts 0.39.0 → 0.41.0

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

@@ -470,6 +470,16 @@ const legendTop = (input, items, width) => {
 };
 /** 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
@@ -625,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'
@@ -645,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',
@@ -783,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',
@@ -850,7 +881,7 @@ function frameShapes(frame, options = {}) {
             baseline: 'middle',
             rotate: rot,
         })
-        : label(x, y, text, { part, anchor: tickAnchor(x, text, frame.width) });
+        : 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)
@@ -1034,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 });
 
@@ -1753,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 = [];
@@ -1783,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) {
@@ -1875,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)),
@@ -1901,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)
@@ -2392,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)
@@ -2461,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,
@@ -2516,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();
@@ -2909,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',
@@ -2918,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 };
     }
@@ -2932,6 +3067,7 @@ function layoutCartesian(input, defaultType) {
             ...errorMarks,
             ...points,
             ...texts,
+            ...referenceLabels,
             ...annotationShapes(input.annotations, scales),
             ...brush,
             ...frame.shapes,
@@ -3412,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));
@@ -3502,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',
@@ -3512,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',
@@ -3541,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,
+    };
 }
 
 /*
@@ -3702,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);
@@ -3864,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 };
 }
 
@@ -4101,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;
@@ -4115,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);
@@ -4124,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
@@ -4148,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',
@@ -4156,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);
@@ -4187,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));
@@ -4202,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;
@@ -4847,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;
@@ -5028,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,
@@ -5163,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,
@@ -5217,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),
@@ -5311,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.
@@ -5873,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. */
@@ -6425,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) => {
@@ -6479,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);
@@ -6492,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) {
@@ -6547,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;
@@ -6585,17 +6765,22 @@ function layoutCandlestick(input) {
             .filter((o) => !o.hidden)
             .flatMap((o) => o.values.map((v) => (isFinite(v) ? cmp(v) : v))),
     ], 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) + (selector.length ? SELECTOR_HEIGHT : 0),
+        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.format)),
+            : 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.format);
+    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));
@@ -6623,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,
@@ -6671,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,
@@ -6685,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]) : '—'}`),
@@ -6764,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)}`,
             });
         });
     }
@@ -6863,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',
@@ -6872,7 +7052,7 @@ function layoutCandlestick(input) {
             width: 6,
             height: box.height - 16,
             fill: CHART_COLORS.axis,
-            rx: 2,
+            rx: 8,
         });
         hit.brush = { box, window };
     }
@@ -6964,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,
@@ -7188,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)),
@@ -7421,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],
@@ -7586,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),
     });
@@ -7606,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,
@@ -7757,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);
@@ -7837,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]) };
 }
 
 /*
@@ -7905,16 +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;
-    // 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;
     // Groups keep their input order (and color) but can be arranged by total flow.
     const cellRaw = (i, j) => {
         const v = given2[i]?.[j];
@@ -7926,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));
@@ -8043,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 };
 }
 
@@ -8294,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) => {
@@ -8365,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 };
 }
 
 /*
@@ -8393,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)),
@@ -8497,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 };
 }
 
@@ -8588,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) => [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,
@@ -8943,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' });
@@ -9018,7 +9209,11 @@ function layoutCirclePacking(input) {
         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 = [];
@@ -9095,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, branches.map((n) => ({ name: n.name, color: branchColor.get(nodeId(n)) })));
-    return { ...c, shapes: [...shapes, ...texts, ...c.shapes], issues };
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: withLabelSurfaces([...shapes, ...texts, ...c.shapes]), issues };
 }
 
 /*
@@ -9119,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;
@@ -9187,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 };
 }
 
 /*
@@ -9247,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}`,
@@ -9364,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));
@@ -9426,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 };
 }
 
@@ -9489,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,
@@ -9636,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',
@@ -9646,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,
@@ -9663,8 +9863,9 @@ 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));
+        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 };
 }
@@ -9683,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 */ []));
     }
@@ -9718,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>
@@ -9763,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"
@@ -9817,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>
@@ -9862,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"
@@ -9957,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;
@@ -9987,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;
@@ -10094,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);
@@ -10308,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();
@@ -10345,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()"
@@ -10369,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>
@@ -10415,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">
@@ -10476,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()"
@@ -10500,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>
@@ -10546,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">
@@ -10771,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 {
@@ -10899,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