@peter.prib/renderengine 0.13.0 → 0.14.0

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);
+        }
+    }
 }

package/src/charting/charts/StackedBarChart3DOrbit.js

@@ -43,13 +43,16 @@ export class StackedBarChart3DOrbit extends Chart3D {
                 const segHeight = bar.d.values[j] / stackMax;
                 const y0 = yCursor, y1 = yCursor + segHeight;
                 yCursor = y1;
-                this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen);
+                const series = options.seriesLabels?.[j] ?? `Series ${j + 1}`;
+                this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen, {
+                    label: bar.d.x, series, x: bar.d.x, z: bar.d.z,
+                });
             }
         }
 
         const maxSegments = Math.max(...data.map(d => d.values.length));
         new Legend({
-            items: Array.from({ length: maxSegments }, (_, j) => ({ label: `Series ${j + 1}`, color: palette.colorAt(j) })),
+            items: Array.from({ length: maxSegments }, (_, j) => ({ label: options.seriesLabels?.[j] ?? `Series ${j + 1}`, color: palette.colorAt(j) })),
             x: bx + width - 100, y: by + 5, itemHeight: 18, fontSize: '11px', marker: 'circle',
         }).draw(this.renderer);
     }

package/src/charting/charts/StreamGraphChart.js

@@ -108,6 +108,14 @@ export class StreamGraphChart extends Chart {
             const path = StreamGraphChart.areaPath(topPts, bottomPts, smooth, tension);
             const { r, g, b: bl } = palette.hexToRgb(color);
             this.renderer.path(path, `rgba(${r},${g},${bl},0.75)`, { color: color, width: 1 }, { tooltip: s.name });
+            if (typeof this.renderer.circle === 'function') {
+                topPts.forEach((p, i) => {
+                    const d = s.values[i];
+                    this._datum(this.renderer.circle(p.x, p.y, 3, color, { color: '#fff', width: 1 }, {
+                        tooltip: `${isMultiline ? s.name + ': ' : ''}${d.label}: ${d.value}`,
+                    }), { label: d.label, series: isMultiline ? s.name : null });
+                });
+            }
         });
 
         // X-axis labels.

package/src/charting/charts/SunburstChart.js

@@ -37,9 +37,9 @@ export class SunburstChart extends HierarchyChart {
             const textColor = this._textColorForNode(topAncestor, depth);
 
             const path = ShapePaths.donutSlicePath(ecx, ecy, rOuter, rInner, startAngle, endAngle);
-            this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+            this._datum(this.renderer.path(path, color, { color: '#fff', width: 1 }, {
                 tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-            });
+            }), { label: node.label });
 
             if (endAngle - startAngle > 0.35) {
                 const midAngle = (startAngle + endAngle) / 2;

package/src/charting/charts/TreemapChart.js

@@ -27,9 +27,9 @@ export class TreemapChart extends HierarchyChart {
             const textColor = this._textColorForNode(topAncestor, depth);
 
             if (isLeaf) {
-                this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
+                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 > 30 && rh > 14) {
                     this.renderer.text(node.label, rx + rw / 2, ry + rh / 2, {
                         textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: textColor, 'pointer-events': 'none',
@@ -38,9 +38,9 @@ export class TreemapChart extends HierarchyChart {
             } else {
                 const headerH = Math.min(rh, TreemapChart.HEADER_H);
                 this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), 'rgba(0,0,0,0.03)', { color: '#ddd', width: 1 });
-                this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
+                this._datum(this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
                     tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-                });
+                }), { label: node.label });
                 if (rw > 30) {
                     this.renderer.text(node.label, rx + 4, ry + headerH / 2, {
                         textAnchor: 'start', verticalAlign: 'middle', fontSize: '9px', fontWeight: 'bold', fill: textColor, 'pointer-events': 'none',