@peter.prib/renderengine 0.12.0 → 0.14.0

package/src/charting/charts/HeatmapChart.js

@@ -52,9 +52,12 @@ export class HeatmapChart extends Chart {
                 const cellX = x + xi * cellW;
                 const cellY = y + yi * cellH;
                 const color = v == null ? '#eee' : ColorPalette.scaleColor(colorScale, vMin, vMax, v);
-                this.renderer.rect(cellX, cellY, Math.max(1, cellW - 1), Math.max(1, cellH - 1), color, null, {
+                const cellRect = this.renderer.rect(cellX, cellY, Math.max(1, cellW - 1), Math.max(1, cellH - 1), color, null, {
                     tooltip: `${xc} / ${yc}: ${v ?? 'n/a'}`,
                 });
+                if (v != null) {
+                    this._datum(cellRect, { label: yc, series: xc, x: xc, y: yc });
+                }
                 if (showValues && v != null) {
                     this.renderer.text(Axis.formatValue(v), cellX + cellW / 2, cellY + cellH / 2, {
                         textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: ColorPalette.isDark(color) ? '#fff' : '#333',

package/src/charting/charts/HistogramChart.js

@@ -34,9 +34,9 @@ export class HistogramChart extends Chart {
             const barY = y + height - barHeight;
             // No gap between bars (unlike barChart's categorical gaps) — bins
             // are contiguous numeric ranges, not independent categories.
-            this.renderer.rect(barX, barY, Math.max(1, barWidth - 1), barHeight, barColor, null, {
+            this._datum(this.renderer.rect(barX, barY, Math.max(1, barWidth - 1), barHeight, barColor, null, {
                 tooltip: `${Axis.formatValue(bin.from)}–${Axis.formatValue(bin.to)}: ${bin.count}`,
-            });
+            }), { label: `${Axis.formatValue(bin.from)}–${Axis.formatValue(bin.to)}` });
             if (i % Math.ceil(bins.length / 10 || 1) === 0) {
                 this.renderer.text(Axis.formatValue(bin.from), barX, y + height + 16, { textAnchor: 'start', fontSize: '9px' });
             }

package/src/charting/charts/IcicleChart.js

@@ -0,0 +1,47 @@
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Hierarchy } from '../Hierarchy.js';
+import { HierarchyChart } from './HierarchyChart.js';
+import { TableChart } from './TableChart.js';
+
+/**
+ * IcicleChart — rectangular hierarchical partition chart (top-down flame/icicle layout).
+ * Each depth level forms a horizontal band and each node's width is proportional to its value
+ * within its parent's span.
+ */
+export class IcicleChart extends HierarchyChart {
+    static chartType = 'icicle';
+
+    _render() {
+        const data = this.data ?? [];
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const { x = box.x, y = box.y, width = box.width, height = box.height, title } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title }).draw(this.renderer, plotBox);
+        if (data.length === 0) return;
+
+        const maxDepth = Math.max(1, ...data.map(n => Hierarchy.depth(n)));
+        const bandHeight = height / maxDepth;
+        const layout = Hierarchy.icicleLayout(data, x, y, width, bandHeight);
+        const textAnchor = this.renderer.centerTextAnchor;
+        const measure = (s) => this.renderer.measureText?.(s, { fontSize: '10px' }) ?? s.length * 10 * 0.55;
+
+        layout.forEach(entry => {
+            const { node, x: rx, y: ry, width: rw, height: rh, depth, topAncestor } = entry;
+            const color = this._colorForNode(topAncestor, depth);
+            const textColor = this._textColorForNode(topAncestor, depth);
+
+            this._datum(this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
+                tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+            }), { label: node.label });
+
+            if (rw > 28 && rh > 14) {
+                const fitted = TableChart.fit(String(node.label), rw - 6, measure);
+                this.renderer.text(fitted, rx + rw / 2, ry + rh / 2, {
+                    textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: textColor, 'pointer-events': 'none',
+                });
+            }
+        });
+    }
+}

package/src/charting/charts/LollipopChart.js

@@ -0,0 +1,104 @@
+import { Axis } from '../Axis.js';
+import { Legend } from '../Legend.js';
+import { BarChartBase } from './BarChartBase.js';
+
+/**
+ * LollipopChart — stem-and-dot alternative to a bar chart for high-cardinality or multi-series
+ * categorical comparisons with minimal ink density.
+ *
+ * Accepts either:
+ *   - 1D `Array<{label: string, value: number}>`, or
+ *   - Multi-series `Array<{name: string, values: Array<{label: string, value: number}>}>`.
+ */
+export class LollipopChart extends BarChartBase {
+    static chartType = 'lollipop';
+
+    static _normalize(data) {
+        if (!Array.isArray(data) || data.length === 0) return { isMulti: false, series: [], labels: [] };
+        if (Array.isArray(data[0]?.values)) {
+            const labels = [...new Set(data.flatMap(s => s.values.map(v => v.label)))];
+            return { isMulti: true, series: data, labels };
+        }
+        return {
+            isMulti: false,
+            series: [{ name: 'default', values: data }],
+            labels: data.map(d => d.label),
+        };
+    }
+
+    _setup() {
+        this._norm = LollipopChart._normalize(this.data);
+        super._setup();
+        const showLegend = this.options.legend ?? this._norm.isMulti;
+        if (showLegend && this._norm.isMulti && this.options.width === undefined) {
+            this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, this._legendOptions());
+        }
+    }
+
+    _legendOptions() {
+        return {
+            items: this._norm.series.map((s, i) => ({ label: s.name, color: this._palette.colorAt(i), dataIndex: i })),
+            itemHeight: 20, markerSize: 10,
+        };
+    }
+
+    _computeMaxValue() {
+        const allValues = this._norm.series.flatMap(s => s.values.map(v => v.value)).filter(v => typeof v === 'number');
+        const rawMax = Math.max(0, ...allValues) || 1;
+        const rawMin = Math.min(0, ...allValues);
+        return this._drawYAxis(rawMax, rawMin);
+    }
+
+    _renderBars() {
+        const { isMulti, series, labels } = this._norm;
+        if (labels.length === 0) return;
+        const { x, y, width, height } = this._plotBox;
+        const {
+            color: singleColor = '#2563eb',
+            colors,
+            radius = 5,
+            stemWidth = 2,
+        } = this.options;
+        const { bandWidth, margin } = this._bandScale(labels.length);
+        const labelStep = Axis.categoryLabelStep(labels, width);
+        const textAnchor = this.renderer.centerTextAnchor;
+        const zeroY = this._barSpan(0).end;
+        const seriesCount = series.length;
+
+        labels.forEach((label, i) => {
+            const bandX = x + i * (bandWidth + margin);
+            series.forEach((s, sIdx) => {
+                const pt = s.values.find(v => v.label === label);
+                if (!pt || typeof pt.value !== 'number') return;
+                const cx = seriesCount === 1
+                    ? bandX + bandWidth / 2
+                    : bandX + ((sIdx + 0.5) / seriesCount) * bandWidth;
+                const span = this._barSpan(pt.value);
+                const col = isMulti || colors ? this._palette.colorAt(sIdx) : singleColor;
+                const tip = isMulti ? `${s.name} - ${label}: ${pt.value}` : `${label}: ${pt.value}`;
+
+                this.renderer.path(`M${cx},${zeroY} L${cx},${span.end}`, 'none', { color: col, width: stemWidth });
+                if (typeof this.renderer.circle === 'function') {
+                    this._datum(this.renderer.circle(cx, span.end, radius, col, { color: '#fff', width: 1.5 }, {
+                        tooltip: tip,
+                    }), { label, series: isMulti ? s.name : null });
+                } else {
+                    this._datum(this.renderer.rect(cx - radius, span.end - radius, radius * 2, radius * 2, col, null, {
+                        tooltip: tip,
+                    }), { label, series: isMulti ? s.name : null });
+                }
+            });
+            if (i % labelStep === 0) {
+                this.renderer.text(label, bandX + bandWidth / 2, y + height + 20, { textAnchor });
+            }
+        });
+    }
+
+    _afterBars() {
+        const showLegend = this.options.legend ?? this._norm.isMulti;
+        if (showLegend && this._norm.isMulti) {
+            const { x, y, width } = this._plotBox;
+            Legend.beside({ x, y, width }, this.renderer.width, this._legendOptions()).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/MarimekkoChart.js

@@ -0,0 +1,75 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Legend } from '../Legend.js';
+import { StackedBarChart } from './StackedBarChart.js';
+import { TableChart } from './TableChart.js';
+
+/**
+ * MarimekkoChart — two-dimensional 100%-stacked mosaic chart where column width is proportional to
+ * each category's total across series and segment height is each series' percentage share within
+ * that category.
+ */
+export class MarimekkoChart extends Chart {
+    static chartType = 'marimekko';
+
+    _render() {
+        const normalized = StackedBarChart._normalize(this.data, this.options.seriesLabels);
+        const { categories, seriesNames } = normalized;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width: rawWidth = box.width, height = box.height,
+            colors, title, xAxisLabel, yAxisLabel, legend: showLegend = true,
+        } = this.options;
+        const palette = new ColorPalette(colors);
+        const legendOpts = {
+            items: seriesNames.map((name, i) => ({ label: name, color: palette.colorAt(i), dataIndex: i })),
+            itemHeight: 20, markerSize: 10,
+        };
+        const width = showLegend && this.options.width === undefined && seriesNames.length > 0
+            ? Legend.plotWidthBeside({ x, y, width: rawWidth, height }, this.renderer.width, legendOpts)
+            : rawWidth;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        new Axis().drawYRange(this.renderer, plotBox, 0, 100);
+
+        const colTotals = categories.map(c => c.values.reduce((sum, v) => sum + Math.max(0, v ?? 0), 0));
+        const grandTotal = colTotals.reduce((sum, v) => sum + v, 0) || 1;
+        const textAnchor = this.renderer.centerTextAnchor;
+        const measure = (s) => this.renderer.measureText?.(s, { fontSize: '11px' }) ?? s.length * 11 * 0.55;
+
+        let cursorX = x;
+        categories.forEach((cat, i) => {
+            const colTotal = colTotals[i];
+            if (colTotal <= 0) return;
+            const colW = (colTotal / grandTotal) * width;
+            let cursorY = y + height;
+
+            cat.values.forEach((value, j) => {
+                if (value == null || value <= 0) return;
+                const share = (value / colTotal) * 100;
+                const segH = (share / 100) * height;
+                cursorY -= segH;
+                const series = seriesNames[j] ?? `Series ${j + 1}`;
+                const color = palette.colorAt(j);
+                this._datum(this.renderer.rect(cursorX, cursorY, colW, segH, color, { color: '#fff', width: 1 }, {
+                    tooltip: `${cat.label} - ${series}: ${value} (${share.toFixed(1)}%)`,
+                }), { label: cat.label, series });
+            });
+
+            if (colW >= 24) {
+                const labelText = TableChart.fit(String(cat.label), colW - 4, measure);
+                this.renderer.text(labelText, cursorX + colW / 2, y + height + 18, { textAnchor, fontSize: '11px' });
+            }
+            cursorX += colW;
+        });
+
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        if (showLegend && seriesNames.length > 0) {
+            Legend.beside({ x, y, width }, this.renderer.width, legendOpts).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/OutlineChart.js

@@ -35,15 +35,16 @@ export class OutlineChart extends HierarchyChart {
             const accentColor = this._colorForNode(topAncestor, depth);
 
             const g = this.renderer.group();
-            g.appendChild(this.renderer.rect(indentX - 2, rowCenterY - 5, 10, 10, accentColor, null));
+            const addChild = (child) => g?.appendChild?.(child);
+            addChild(this.renderer.rect(indentX - 2, rowCenterY - 5, 10, 10, accentColor, null));
 
             let labelX = indentX + 16;
             if (hasChildren) {
                 const collapsedHere = this.collapsed ? this.collapsed.has(node) : false;
                 const badgeX = indentX + 26;
                 const badge = this.renderer.circle(badgeX, rowCenterY, 7, '#ffffff', { color: '#888', width: 1.2 });
-                g.appendChild(badge);
-                g.appendChild(this.renderer.text(collapsedHere ? '+' : '−', badgeX, rowCenterY, {
+                addChild(badge);
+                addChild(this.renderer.text(collapsedHere ? '+' : '−', badgeX, rowCenterY, {
                     textAnchor: 'middle', verticalAlign: 'middle', fontSize: '10px', fill: '#555', 'pointer-events': 'none',
                 }));
                 badge.style.cursor = 'pointer';
@@ -57,22 +58,23 @@ export class OutlineChart extends HierarchyChart {
                 labelX = badgeX + 16;
             }
 
-            g.appendChild(this.renderer.text(node.label, labelX, rowCenterY, {
+            const labelEl = this._datum(this.renderer.text(node.label, labelX, rowCenterY, {
                 textAnchor: 'start', verticalAlign: 'middle', fontSize: '12px', fill: '#222',
-            }));
+            }), { label: node.label, series: null });
+            addChild(labelEl);
 
             if (hasChildren) {
-                g.appendChild(this.renderer.text(this._formatNodeValue(node), countX, rowCenterY, {
+                addChild(this.renderer.text(this._formatNodeValue(node), countX, rowCenterY, {
                     textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                 }));
             } else if (Number.isFinite(node.value)) {
-                g.appendChild(this.renderer.text(Axis.formatValue(node.value), countX, rowCenterY, {
+                addChild(this.renderer.text(Axis.formatValue(node.value), countX, rowCenterY, {
                     textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                 }));
             } else {
                 const extra = Hierarchy.outlineExtraText(node, structuralKeys);
                 if (extra) {
-                    g.appendChild(this.renderer.text(extra, detailX, rowCenterY, {
+                    addChild(this.renderer.text(extra, detailX, rowCenterY, {
                         textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                     }));
                 }

package/src/charting/charts/ParallelCoordinatesChart.js

@@ -85,11 +85,11 @@ export class ParallelCoordinatesChart extends Chart {
                 pathData += `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`;
             });
             const label = row.label || (hasCategories ? row.category : null);
-            this.renderer.path(pathData, 'none', {
+            this._datum(this.renderer.path(pathData, 'none', {
                 color, width: lineWidth,
                 opacity: lineOpacity,
                 tooltip: label ? `${label}: ${dimensions.map(d => `${d}=${this._fmt(row[d])}`).join(', ')}` : undefined,
-            });
+            }), { label: label ?? String(rowIndex) });
         });
 
         if (legendVisible && hasCategories) {

package/src/charting/charts/ParetoChart.js

@@ -0,0 +1,92 @@
+import { Axis } from '../Axis.js';
+import { BarChartBase } from './BarChartBase.js';
+
+/**
+ * ParetoChart — descending bar chart combined with a cumulative percentage line (0–100%)
+ * on a right-hand axis and an 80% cutoff reference line.
+ */
+export class ParetoChart extends BarChartBase {
+    static chartType = 'pareto';
+
+    _setup() {
+        super._setup();
+        if (this.options.width === undefined) {
+            this._plotBox.width = Math.max(80, this._plotBox.width - 36);
+        }
+        const items = (this.data ?? []).filter(d => d && typeof d.value === 'number' && d.value >= 0);
+        this._sorted = this.options.sorted === false ? [...items] : [...items].sort((a, b) => b.value - a.value);
+    }
+
+    _computeMaxValue() {
+        const rawMax = Math.max(0, ...this._sorted.map(d => d.value)) || 1;
+        return this._drawYAxis(rawMax, 0);
+    }
+
+    _renderBars(maxValue) {
+        const items = this._sorted;
+        if (items.length === 0) return;
+        const { x, y, width, height } = this._plotBox;
+        const {
+            barColor = '#3b82f6',
+            lineColor = '#dc2626',
+            cutoff = 80,
+            colors,
+        } = this.options;
+        const { bandWidth, margin } = this._bandScale(items.length);
+        const labelStep = Axis.categoryLabelStep(items.map(d => d.label), width);
+        const textAnchor = this.renderer.centerTextAnchor;
+        const total = items.reduce((sum, d) => sum + d.value, 0) || 1;
+
+        // Right-hand percentage axis (0%..100%).
+        const rightX = x + width;
+        this.renderer.path(`M${rightX},${y} L${rightX},${y + height}`, 'none', { color: '#64748b', width: 1 });
+        for (const pct of [0, 20, 40, 60, 80, 100]) {
+            const py = y + height - (pct / 100) * height;
+            this.renderer.path(`M${rightX},${py} L${rightX + 4},${py}`, 'none', { color: '#64748b', width: 1 });
+            this.renderer.text(`${pct}%`, rightX + 8, py + 3, { textAnchor: 'start', fontSize: '10px', fill: '#475569' });
+        }
+
+        // Dashed 80% cutoff reference line.
+        if (cutoff > 0 && cutoff < 100) {
+            const cutY = y + height - (cutoff / 100) * height;
+            this.renderer.path(`M${x},${cutY} L${rightX},${cutY}`, 'none', {
+                color: lineColor, width: 1, dashArray: '4,4',
+            });
+        }
+
+        let running = 0;
+        const linePts = [];
+        items.forEach((d, i) => {
+            running += d.value;
+            const cumPct = (running / total) * 100;
+            const color = colors ? this._palette.colorAt(i) : barColor;
+            const bar = this._barSpan(d.value);
+            const barX = x + i * (bandWidth + margin);
+            const cx = barX + bandWidth / 2;
+            const py = y + height - (cumPct / 100) * height;
+            linePts.push({ cx, py, label: d.label, value: d.value, cumPct });
+
+            this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, {
+                bar: true,
+                dataIndex: i,
+                tooltip: `${d.label}: ${d.value} (${cumPct.toFixed(1)}% cumulative)`,
+            }), { label: d.label });
+
+            if (i % labelStep === 0) {
+                this.renderer.text(d.label, cx, y + height + 20, { textAnchor });
+            }
+        });
+
+        if (linePts.length > 0) {
+            const dPath = 'M' + linePts.map(p => `${p.cx},${p.py}`).join(' L');
+            this.renderer.path(dPath, 'none', { color: lineColor, width: 2 });
+            if (typeof this.renderer.circle === 'function') {
+                linePts.forEach(p => {
+                    this._datum(this.renderer.circle(p.cx, p.py, 3.5, lineColor, { color: '#fff', width: 1.5 }, {
+                        tooltip: `${p.label}: ${p.cumPct.toFixed(1)}% cumulative`,
+                    }), { label: p.label });
+                });
+            }
+        }
+    }
+}

package/src/charting/charts/PipeChart.js

@@ -67,8 +67,11 @@ export class PipeChart extends Chart {
             this.renderer.path(centerline, 'none', { color: palette.lighten(color, -0.25), width: 1 });
 
             pts.forEach(p => {
-                this.renderer.circle(p.x, p.y, 2, '#fff', { color, width: 1.5 },
-                    { tooltip: `${isMultiline ? s.name + ': ' : ''}${p.d.label}: ${p.d.value} (${metricCol}: ${p.d[metricCol] ?? 0})` });
+                if (typeof this.renderer.circle === 'function') {
+                    this._datum(this.renderer.circle(p.x, p.y, 2, '#fff', { color, width: 1.5 },
+                        { tooltip: `${isMultiline ? s.name + ': ' : ''}${p.d.label}: ${p.d.value} (${metricCol}: ${p.d[metricCol] ?? 0})` }),
+                    { label: p.d.label, series: isMultiline ? s.name : null });
+                }
             });
 
             if (seriesIndex === 0) {

package/src/charting/charts/PopulationPyramidChart.js

@@ -69,15 +69,15 @@ export class PopulationPyramidChart extends Chart {
 
             // Left bar grows from center to the left.
             if (leftW > 0) {
-                this.renderer.rect(centerX - leftW, rowY, leftW, bh, leftColor, null, {
+                this._datum(this.renderer.rect(centerX - leftW, rowY, leftW, bh, leftColor, null, {
                     tooltip: `${d.label} — ${leftLabel}: ${d.left}`,
-                });
+                }), { label: d.label, series: leftLabel });
             }
             // Right bar grows from center to the right.
             if (rightW > 0) {
-                this.renderer.rect(centerX, rowY, rightW, bh, rightColor, null, {
+                this._datum(this.renderer.rect(centerX, rowY, rightW, bh, rightColor, null, {
                     tooltip: `${d.label} — ${rightLabel}: ${d.right}`,
-                });
+                }), { label: d.label, series: rightLabel });
             }
 
             // Row label centered on the axis.

package/src/charting/charts/RadarChart.js

@@ -21,7 +21,7 @@ export class RadarChart extends Chart {
         } = options;
         const isMulti = Array.isArray(data[0]?.values);
         const series = isMulti ? data : [{ name: 'default', values: data }];
-        const axes = series[0].values.map(v => v.axis);
+        const axes = series[0].values.map(v => v.axis ?? v.label);
         const n = axes.length;
         const palette = new ColorPalette(colors);
         const axisMax = axes.map((_, ai) => Math.max(...series.map(s => s.values[ai]?.value ?? 0)) || 1);
@@ -59,9 +59,10 @@ export class RadarChart extends Chart {
             const { r, g, b } = ColorPalette.hexToRgb(color);
             this.renderer.path(path, `rgba(${r},${g},${b},0.25)`, { color, width: 2 }, { tooltip: s.name });
             pts.forEach((p, i) => {
-                this.renderer.circle(p.px, p.py, 3, color, { color: '#fff', width: 1 }, {
-                    tooltip: `${s.name} — ${s.values[i].axis}: ${s.values[i].value}`,
-                });
+                const axisLabel = s.values[i].axis ?? s.values[i].label;
+                this._datum(this.renderer.circle(p.px, p.py, 3, color, { color: '#fff', width: 1 }, {
+                    tooltip: `${s.name} — ${axisLabel}: ${s.values[i].value}`,
+                }), { label: axisLabel, series: isMulti ? s.name : null });
             });
         });
 

package/src/charting/charts/RadialBarChart.js

@@ -56,9 +56,9 @@ export class RadialBarChart extends Chart {
             const rOuter = innerRadius + barLen;
             const color = d.color ?? palette.colorAt(i);
             const path = ShapePaths.donutSlicePath(cx, cy, rOuter, innerRadius, a0, a1);
-            this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+            this._datum(this.renderer.path(path, color, { color: '#fff', width: 1 }, {
                 tooltip: `${d.label}: ${d.value}`,
-            });
+            }), { label: d.label });
 
             // Category label around the outer track.
             const midAngle = (a0 + a1) / 2;

package/src/charting/charts/SankeyDiagram.js

@@ -113,18 +113,18 @@ export class SankeyDiagram extends Chart {
                 const linkH = l.value * scale;
                 const path = this._linkPath(n.x + nodeWidth, outY + linkH / 2, t.x, inY + linkH / 2, linkH);
                 const { r, g, b: bl } = palette.hexToRgb(n.color);
-                this.renderer.path(path, `rgba(${r},${g},${bl},${linkOpacity})`, null, {
+                this._datum(this.renderer.path(path, `rgba(${r},${g},${bl},${linkOpacity})`, null, {
                     tooltip: `${n.label} → ${t.label}: ${l.value}`,
-                });
+                }), { label: n.label, series: t.label });
                 outY += linkH;
             });
         });
 
         // Draw nodes.
         nodes.forEach(n => {
-            this.renderer.rect(n.x, n.y, nodeWidth, Math.max(1, n.h), n.color, null, {
+            this._datum(this.renderer.rect(n.x, n.y, nodeWidth, Math.max(1, n.h), n.color, null, {
                 tooltip: `${n.label}: ${n.value}`,
-            });
+            }), { label: n.label });
             this.renderer.text(n.label, n.x + nodeWidth / 2, n.y - 6, {
                 textAnchor: 'middle', fontSize: '10px', fill: '#333',
             });

package/src/charting/charts/ScatterChart.js

@@ -68,8 +68,8 @@ export class ScatterChart extends Chart {
                 ({ from, to } = referenceLine);
             }
             if (from && to) {
-                const line = this.renderer.path(`M${toX(from.x)},${toY(from.y)} L${toX(to.x)},${toY(to.y)}`, 'none', { color: '#999', width: 1 });
-                line.setAttribute('stroke-dasharray', '4 3');
+                const line = this.renderer.path(`M${toX(from.x)},${toY(from.y)} L${toX(to.x)},${toY(to.y)}`, 'none', { color: '#999', width: 1, dashArray: [4, 3] });
+                line?.setAttribute?.('stroke-dasharray', '4 3');
             }
         }
 
@@ -77,7 +77,10 @@ export class ScatterChart extends Chart {
             const cx = toX(d.x);
             const cy = toY(d.y);
             const tooltip = d.label ? `${d.label}: (${d.x}, ${d.y})` : `(${d.x}, ${d.y})`;
-            this.renderer.circle(cx, cy, pointRadius, colorFor(d), { color: 'rgba(0,0,0,0.2)', width: 1 }, { tooltip });
+            const series = catField ? ChartData.readColorCol(d, catField) : null;
+            this._datum(this.renderer.circle(cx, cy, pointRadius, colorFor(d), { color: 'rgba(0,0,0,0.2)', width: 1 }, { tooltip }), {
+                label: d.label ?? String(d.x), series: series != null ? String(series) : null,
+            });
 
             const xLow = d.errorXMinus != null ? toX(d.x - d.errorXMinus)
                 : d.errorX != null ? toX(d.x - d.errorX) : null;

package/src/charting/charts/StackedBarChart.js

@@ -1,35 +1,106 @@
 import { Axis } from '../Axis.js';
+import { Legend } from '../Legend.js';
 import { BarChartBase } from './BarChartBase.js';
+import { TableChart } from './TableChart.js';
 
 /**
  * StackedBarChart — vertical stacked bar chart.
+ *
+ * Accepts either:
+ *   - Multi-series `Array<{name: string, values: Array<{label: string, value: number}>}>` (the same
+ *     shape as `GroupedBarChart`, `LineChart` and `StackedAreaChart`), or
+ *   - Flat per-category stacks `Array<{label: string, values: number[]}>` with optional
+ *     `options.seriesLabels`.
+ *
+ * Draws a numeric Y axis (`_drawYAxis`), optional series legend (`legend: true`), and records each
+ * segment with `this._datum()` so `onDatumClick` / `PivotChart` drilling works on every segment.
  */
 export class StackedBarChart extends BarChartBase {
     static chartType = 'stackedBar';
 
+    static _normalize(data, seriesLabels = null) {
+        if (!Array.isArray(data) || data.length === 0) return { categories: [], seriesNames: [] };
+        if (Array.isArray(data[0]?.values) && typeof data[0].values[0] === 'object' && data[0].values[0] !== null) {
+            const labels = [...new Set(data.flatMap(s => s.values.map(v => v.label)))];
+            const maps = data.map(s => new Map(s.values.map(v => [v.label, v.value])));
+            return {
+                seriesNames: data.map((s, i) => s.name ?? seriesLabels?.[i] ?? `Series ${i + 1}`),
+                categories: labels.map(label => ({ label, values: maps.map(m => m.get(label) ?? 0) })),
+            };
+        }
+        const maxLen = Math.max(0, ...data.map(d => d.values?.length ?? 0));
+        return {
+            seriesNames: Array.from({ length: maxLen }, (_, i) => seriesLabels?.[i] ?? `Series ${i + 1}`),
+            categories: data.map(d => ({ label: d.label, values: (d.values ?? []).map(v => v ?? 0) })),
+        };
+    }
+
+    _setup() {
+        this._normalized = StackedBarChart._normalize(this.data, this.options.seriesLabels);
+        super._setup();
+        if (this.options.legend && this.options.width === undefined && this._normalized.seriesNames.length > 0) {
+            this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, this._legendOptions());
+        }
+    }
+
+    _legendOptions() {
+        return {
+            items: this._normalized.seriesNames.map((name, i) => ({ label: name, color: this._palette.colorAt(i), dataIndex: i })),
+            itemHeight: 20, markerSize: 10,
+        };
+    }
+
+    _isNormalized() {
+        return Boolean(this.options.normalize || this.options.stackMode === 'percent');
+    }
+
     _computeMaxValue() {
-        const data = this.data;
-        return Math.max(...data.map(d => d.values.reduce((sum, val) => sum + val, 0)));
+        if (this._isNormalized()) {
+            return this._drawYAxis(100);
+        }
+        const { categories } = this._normalized;
+        const rawMax = Math.max(0, ...categories.map(d => d.values.reduce((sum, val) => sum + Math.max(0, val), 0))) || 1;
+        return this._drawYAxis(rawMax);
     }
 
     _renderBars(maxStackValue) {
-        const data = this.data;
+        const { categories, seriesNames } = this._normalized;
+        if (categories.length === 0) return;
         const { x, y, width, height } = this._plotBox;
-        const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width);
-        const { bandWidth, margin } = this._bandScale(data.length);
+        const normalize = this._isNormalized();
+        const labels = categories.map(d => d.label);
+        const { bandWidth, margin } = this._bandScale(categories.length);
         const textAnchor = this.renderer.centerTextAnchor;
+        const measure = (s) => this.renderer.measureText?.(s, { fontSize: '12px' }) ?? s.length * 12 * 0.55;
+        const room = (bandWidth + margin) - 4;
+        const cut = room >= measure('x'.repeat(6));
+        const labelStep = cut ? 1 : Axis.categoryLabelStep(labels, width);
 
-        data.forEach((d, i) => {
+        categories.forEach((d, i) => {
             let currentY = y + height;
             const barX = x + i * (bandWidth + margin);
+            const colTotal = d.values.reduce((sum, val) => sum + Math.max(0, val ?? 0), 0);
             d.values.forEach((value, j) => {
-                const barHeight = (value / maxStackValue) * height;
+                if (value == null || value <= 0) return;
+                const plotted = normalize ? (colTotal > 0 ? (value / colTotal) * 100 : 0) : value;
+                const barHeight = (plotted / maxStackValue) * height;
                 currentY -= barHeight;
-                this.renderer.rect(barX, currentY, bandWidth, barHeight, this._palette.colorAt(j), null, {
-                    tooltip: `${d.label} - Series ${j + 1}: ${value}`,
-                });
+                const series = seriesNames[j] ?? `Series ${j + 1}`;
+                const tipVal = normalize ? `${plotted.toFixed(1)}% (${value})` : `${value}`;
+                this._datum(this.renderer.rect(barX, currentY, bandWidth, barHeight, this._palette.colorAt(j), null, {
+                    tooltip: `${d.label} - ${series}: ${tipVal}`,
+                }), { label: d.label, series });
             });
-            if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
+            if (i % labelStep === 0) {
+                this.renderer.text(cut ? TableChart.fit(String(d.label), room, measure) : d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
+            }
         });
     }
+
+    _afterBars() {
+        const { x, y, width } = this._plotBox;
+        if (this.options.legend && this._normalized.seriesNames.length > 0) {
+            Legend.beside({ x, y, width }, this.renderer.width, this._legendOptions()).draw(this.renderer);
+        }
+    }
 }