@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/charts/AlluvialDiagram.js

@@ -0,0 +1,311 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * AlluvialDiagram — multi-stage categorical flow diagram across 3+ ordered
+ * dimensions (extending Sankey ribbons to multi-column categorical pathways).
+ *
+ * Data shape:
+ *   { dimensions: string[], rows: Array<object>, valueField?: string }
+ *   or Array<{steps: string[], value: number}>
+ */
+export class AlluvialDiagram extends Chart {
+    static chartType = 'alluvial';
+
+    /**
+     * Normalize heterogeneous alluvial datasets into a unified stage-and-link model.
+     * Supports:
+     * 1. Edge list: Array<{ source: string, target: string, value?: number }>
+     * 2. Pathway steps: Array<{ steps: string[], value?: number }>
+     * 3. Categorical rows: { dimensions: string[], rows: object[], valueField?: string }
+     * 4. Flat row objects: Array<object> with options.dimensions
+     *
+     * @returns {{
+     *   dimensions: string[],
+     *   stages: Array<Array<{ name: string, val: number, stage: number }>>,
+     *   links: Array<{ stage: number, source: string, target: string, value: number }>
+     * }}
+     */
+    static normalize(data, options = {}) {
+        if (!data) return { dimensions: [], stages: [], links: [] };
+
+        // Format 1: Edge list Array<{ source, target, value }>
+        if (Array.isArray(data) && data.length > 0 && data[0].source != null && data[0].target != null) {
+            return AlluvialDiagram._normalizeEdgeList(data, options);
+        }
+
+        // Format 2: Pathway steps Array<{ steps: string[], value: number }>
+        if (Array.isArray(data) && data.length > 0 && Array.isArray(data[0].steps)) {
+            return AlluvialDiagram._normalizePathways(data, options);
+        }
+
+        // Format 3: Explicit { dimensions, rows, valueField }
+        if (data && data.dimensions && Array.isArray(data.rows)) {
+            const valKey = data.valueField ?? 'value';
+            const pathways = data.rows.map(r => ({
+                steps: data.dimensions.map(d => String(r[d] ?? 'Other')),
+                value: Number(r[valKey]) || 1,
+            }));
+            return AlluvialDiagram._normalizePathways(pathways, { ...options, dimensions: data.dimensions });
+        }
+
+        // Format 4: Array of row objects [ { col1: 'A', col2: 'B', value: 10 } ]
+        if (Array.isArray(data) && data.length > 0 && typeof data[0] === 'object') {
+            const valKey = options.valueField ?? 'value';
+            const dims = options.dimensions ?? Object.keys(data[0]).filter(k => k !== valKey && k !== 'count' && k !== 'weight');
+            if (dims.length >= 2) {
+                const pathways = data.map(r => ({
+                    steps: dims.map(d => String(r[d] ?? 'Other')),
+                    value: Number(r[valKey]) || 1,
+                }));
+                return AlluvialDiagram._normalizePathways(pathways, { ...options, dimensions: dims });
+            }
+        }
+
+        return { dimensions: [], stages: [], links: [] };
+    }
+
+    static _normalizePathways(pathways, options = {}) {
+        const stageCount = pathways[0].steps.length;
+        const dimensions = options.dimensions ?? options.stages ?? pathways[0].steps.map((_, i) => `Stage ${i + 1}`);
+
+        const stages = dimensions.map((dim, sIdx) => {
+            const valMap = new Map();
+            for (const p of pathways) {
+                const cat = p.steps[sIdx];
+                valMap.set(cat, (valMap.get(cat) ?? 0) + (Number(p.value) || 1));
+            }
+            return Array.from(valMap.entries()).map(([name, val]) => ({ name, val, stage: sIdx }));
+        });
+
+        const links = [];
+        for (let s = 0; s < stageCount - 1; s++) {
+            const pairMap = new Map();
+            for (const p of pathways) {
+                const src = p.steps[s];
+                const tgt = p.steps[s + 1];
+                const key = `${src}:::${tgt}`;
+                pairMap.set(key, (pairMap.get(key) ?? 0) + (Number(p.value) || 1));
+            }
+            for (const [key, val] of pairMap.entries()) {
+                const [source, target] = key.split(':::');
+                links.push({ stage: s, source, target, value: val });
+            }
+        }
+
+        return { dimensions, stages, links };
+    }
+
+    static _normalizeEdgeList(edges, options = {}) {
+        const nodeSet = new Set();
+        const incoming = new Map();
+        const outgoing = new Map();
+
+        for (const e of edges) {
+            nodeSet.add(e.source);
+            nodeSet.add(e.target);
+            if (!incoming.has(e.target)) incoming.set(e.target, []);
+            if (!outgoing.has(e.source)) outgoing.set(e.source, []);
+            if (!incoming.has(e.source)) incoming.set(e.source, []);
+            if (!outgoing.has(e.target)) outgoing.set(e.target, []);
+
+            const val = Number(e.value) || 1;
+            outgoing.get(e.source).push({ target: e.target, value: val });
+            incoming.get(e.target).push({ source: e.source, value: val });
+        }
+
+        // Topological stage assignment
+        const stageMap = new Map();
+        const queue = [];
+        for (const name of nodeSet) {
+            if (incoming.get(name).length === 0) {
+                stageMap.set(name, 0);
+                queue.push(name);
+            }
+        }
+        if (queue.length === 0 && nodeSet.size > 0) {
+            const first = nodeSet.values().next().value;
+            stageMap.set(first, 0);
+            queue.push(first);
+        }
+
+        while (queue.length > 0) {
+            const curr = queue.shift();
+            const s = stageMap.get(curr);
+            for (const e of outgoing.get(curr)) {
+                const existing = stageMap.get(e.target);
+                if (existing == null || existing < s + 1) {
+                    stageMap.set(e.target, s + 1);
+                    queue.push(e.target);
+                }
+            }
+        }
+
+        for (const name of nodeSet) {
+            if (!stageMap.has(name)) stageMap.set(name, 0);
+        }
+
+        const maxStage = Math.max(...stageMap.values(), 1);
+        const stageCount = maxStage + 1;
+        const dimensions = options.dimensions ?? options.stages ?? Array.from({ length: stageCount }, (_, i) => `Stage ${i + 1}`);
+
+        // Segment multi-stage flows so ribbons cross each adjacent stage cleanly
+        const links = [];
+        for (const e of edges) {
+            const val = Number(e.value) || 1;
+            const s1 = stageMap.get(e.source);
+            const s2 = stageMap.get(e.target);
+            if (s1 == null || s2 == null || s1 >= s2) continue;
+
+            let prev = e.source;
+            for (let s = s1; s < s2; s++) {
+                const next = (s === s2 - 1) ? e.target : `${e.source} → ${e.target}`;
+                links.push({
+                    stage: s,
+                    source: prev,
+                    target: next,
+                    value: val,
+                    isSynthetic: s !== s1 && s !== s2 - 1,
+                });
+                prev = next;
+            }
+        }
+
+        // Build stages array with node flow totals
+        const stages = Array.from({ length: stageCount }, (_, sIdx) => {
+            const nodeValMap = new Map();
+            for (const l of links) {
+                if (l.stage === sIdx) {
+                    nodeValMap.set(l.source, (nodeValMap.get(l.source) ?? 0) + l.value);
+                }
+                if (l.stage === sIdx - 1) {
+                    nodeValMap.set(l.target, (nodeValMap.get(l.target) ?? 0) + l.value);
+                }
+            }
+            return Array.from(nodeValMap.entries()).map(([name, val]) => ({
+                name, val, stage: sIdx,
+            }));
+        });
+
+        return { dimensions, stages, links };
+    }
+
+    _render() {
+        const { dimensions, stages, links } = AlluvialDiagram.normalize(this.data, this.options);
+        const stageCount = stages.length;
+        if (stageCount < 2 || !links.length) return;
+
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            title, colors, nodeWidth = 14,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title }).draw(this.renderer, plotBox);
+
+        const palette = new ColorPalette(colors);
+        const topPad = 32;
+        const leftMargin = Math.max(75, Math.min(130, width * 0.18));
+        const rightMargin = Math.max(75, Math.min(130, width * 0.18));
+        const flowX = x + leftMargin;
+        const flowW = Math.max(100, width - leftMargin - rightMargin);
+        const usableH = height - topPad - 16;
+        const usableY = y + topPad;
+
+        const stageStepX = (flowW - nodeWidth) / (stageCount - 1);
+
+        // Compute nodes geometry per stage
+        const stageNodes = stages.map((nodeList, sIdx) => {
+            nodeList.sort((a, b) => b.val - a.val);
+            const totalStageVal = nodeList.reduce((sum, n) => sum + n.val, 0) || 1;
+
+            const gap = 8;
+            const gapTotal = Math.max(0, nodeList.length - 1) * gap;
+            const availableH = Math.max(10, usableH - gapTotal);
+            let curY = usableY;
+
+            return nodeList.map((cat, cIdx) => {
+                const h = Math.max(6, (cat.val / totalStageVal) * availableH);
+                const node = {
+                    stage: sIdx,
+                    category: cat.name,
+                    val: cat.val,
+                    x: flowX + sIdx * stageStepX,
+                    y: curY,
+                    w: nodeWidth,
+                    h,
+                    color: palette.colorAt(cIdx),
+                };
+                curY += h + gap;
+                return node;
+            });
+        });
+
+        // Draw Stage Headers
+        dimensions.forEach((dim, sIdx) => {
+            const hx = flowX + sIdx * stageStepX + nodeWidth / 2;
+            this.renderer.text(dim, hx, y + 16, {
+                textAnchor: this.renderer.centerTextAnchor, fontSize: '11px', fontWeight: 'bold', fill: '#444',
+            });
+        });
+
+        // Ribbon flows between adjacent stages
+        for (let sIdx = 0; sIdx < stageCount - 1; sIdx++) {
+            const leftNodes = new Map(stageNodes[sIdx].map(n => [n.category, n]));
+            const rightNodes = new Map(stageNodes[sIdx + 1].map(n => [n.category, n]));
+            const leftOffset = new Map();
+            const rightOffset = new Map();
+
+            const stageLinks = links.filter(l => l.stage === sIdx);
+            for (const l of stageLinks) {
+                const n1 = leftNodes.get(l.source);
+                const n2 = rightNodes.get(l.target);
+                if (!n1 || !n2) continue;
+
+                const rH1 = (l.value / n1.val) * n1.h;
+                const rH2 = (l.value / n2.val) * n2.h;
+                const y1 = n1.y + (leftOffset.get(l.source) ?? 0);
+                const y2 = n2.y + (rightOffset.get(l.target) ?? 0);
+                leftOffset.set(l.source, (leftOffset.get(l.source) ?? 0) + rH1);
+                rightOffset.set(l.target, (rightOffset.get(l.target) ?? 0) + rH2);
+
+                const x1 = n1.x + n1.w;
+                const x2 = n2.x;
+                const cpx = (x1 + x2) / 2;
+                const ribbonD = `M${x1},${y1} `
+                    + `C${cpx},${y1} ${cpx},${y2} ${x2},${y2} `
+                    + `L${x2},${y2 + rH2} `
+                    + `C${cpx},${y2 + rH2} ${cpx},${y1 + rH1} ${x1},${y1 + rH1} Z`;
+
+                const { r, g, b: bl } = palette.hexToRgb(n1.color);
+                this._datum(this.renderer.path(ribbonD, `rgba(${r},${g},${bl},0.38)`, null, {
+                    tooltip: `${l.source} → ${l.target}: ${Axis.formatValue(l.value)}`,
+                }), { label: `${l.source} → ${l.target}`, value: l.value });
+            }
+        }
+
+        // Draw Stage Nodes over ribbons
+        stageNodes.forEach(nodes => {
+            nodes.forEach(n => {
+                this._datum(this.renderer.rect(n.x, n.y, n.w, n.h, n.color, { color: '#ffffff', width: 1.5 }, {
+                    tooltip: `${n.category}: ${Axis.formatValue(n.val)}`, rx: 2, ry: 2,
+                }), { label: n.category, value: n.val });
+
+                // Category name label
+                const isFirst = n.stage === 0;
+                const isLast = n.stage === stageCount - 1;
+                const lx = isLast ? n.x + n.w + 8 : (isFirst ? n.x - 8 : n.x + n.w / 2);
+                const lAnchor = isLast ? 'start' : (isFirst ? 'end' : this.renderer.centerTextAnchor);
+                const ly = isFirst || isLast ? n.y + n.h / 2 : n.y - 5;
+
+                this.renderer.text(n.category, lx, ly, {
+                    textAnchor: lAnchor, verticalAlign: 'middle', fontSize: '10px', fill: '#333',
+                });
+            });
+        });
+    }
+}

package/src/charting/charts/AreaChart.js

@@ -3,6 +3,7 @@ import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { Legend } from '../Legend.js';
 import { ColorPalette } from '../ColorPalette.js';
+import { Annotations } from '../Annotations.js';
 
 /**
  * AreaChart — stacked or overlaid area chart.
@@ -16,8 +17,11 @@ export class AreaChart extends Chart {
         const box = ChartBox.fromRenderer(this.renderer);
         const {
             x = box.x, y = box.y, width = box.width, height = box.height,
-            colors, title, xAxisLabel, yAxisLabel, stacked = false, legend: showLegend = false,
+            colors, title, xAxisLabel, yAxisLabel, stacked = false,
+            normalize = false, stackMode, legend: showLegend = false,
+            scale = 'linear',
         } = options;
+        const isPercent = Boolean(stacked && (normalize || stackMode === 'percent'));
         const plotBox = { x, y, width, height };
         const isMultiline = Array.isArray(data[0]?.values);
         const series = isMultiline ? data : [{ name: 'default', values: data }];
@@ -26,33 +30,87 @@ export class AreaChart extends Chart {
         const palette = new ColorPalette(colors);
         const textAnchor = this.renderer.centerTextAnchor;
 
+        const legendOptions = {
+            items: series.map((s, idx) => ({
+                label: s.name,
+                color: palette.colorAt(idx),
+                hidden: this._dataFilter.has(idx),
+                dataIndex: idx,
+            })),
+            itemHeight: 20,
+            markerSize: 12,
+        };
+
+        const pointTotals = isPercent
+            ? Array.from({ length: pointCount }, (_, i) => series.reduce((sum, s, sIdx) => sum + (this._dataFilter.has(sIdx) ? 0 : Math.max(0, s.values[i]?.value ?? 0)), 0))
+            : null;
+
         // Precompute each series' [base, top] band per point — base is 0
         // unless stacked, in which case it's the running cumulative of prior
         // series (computed once here, not re-derived during render).
         let running = new Array(pointCount).fill(0);
-        const bands = series.map(s => {
+        const bands = series.map((s, sIdx) => {
+            const isHidden = this._dataFilter.has(sIdx);
             const band = s.values.map((d, i) => {
                 const base = stacked ? running[i] : 0;
-                return { base, top: base + d.value };
+                const rawVal = isHidden ? 0 : d.value;
+                const val = isPercent
+                    ? (pointTotals[i] > 0 ? (Math.max(0, rawVal) / pointTotals[i]) * 100 : 0)
+                    : rawVal;
+                return { base, top: base + val, pct: val };
             });
-            if (stacked) running = band.map(b => b.top);
+            if (stacked && !isHidden) running = band.map(b => b.top);
             return band;
         });
-        const maxValue = Math.max(...bands.flat().map(b => b.top)) || 1;
+        const maxValue = isPercent ? 100 : (Math.max(...bands.flat().map(b => b.top)) || 1);
 
         new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        const axisRes = new Axis().drawYRange(this.renderer, plotBox, 0, maxValue, { scale });
+        const toY = axisRes?.yOf ?? ((v) => y + height - (v / maxValue) * height);
+        const toX = (idx) => x + idx * pointMargin;
+
+        // Threshold bands and reference lines
+        Annotations.drawThresholdBands(this.renderer, plotBox, options.thresholdBands, { toY });
+        const refLines = options.referenceLines ?? options.referenceLine;
+        Annotations.drawReferenceLines(this.renderer, plotBox, refLines, { toY, toX });
+
         this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
 
         series.forEach((s, seriesIndex) => {
+            if (this._dataFilter.has(seriesIndex)) return;
             const band = bands[seriesIndex];
             const color = palette.colorAt(seriesIndex);
-            const topPts = band.map((b, i) => ({ px: x + i * pointMargin, py: y + height - (b.top / maxValue) * height }));
-            const basePts = band.map((b, i) => ({ px: x + i * pointMargin, py: y + height - (b.base / maxValue) * height }));
-            const areaPath = 'M' + topPts.map(p => `${p.px},${p.py}`).join(' L')
-                + ' L' + [...basePts].reverse().map(p => `${p.px},${p.py}`).join(' L') + ' Z';
+            const topPts = band.map((b, i) => ({ px: x + i * pointMargin, py: toY(b.top) }));
+            const basePts = band.map((b, i) => ({ px: x + i * pointMargin, py: toY(b.base) }));
+            let areaPath = '';
+            let strokePath = '';
+            if (options.step) {
+                let topD = `M${topPts[0].px},${topPts[0].py}`;
+                for (let i = 1; i < topPts.length; i++) {
+                    topD += ` H${topPts[i].px} V${topPts[i].py}`;
+                }
+                strokePath = topD;
+                let baseD = '';
+                for (let i = basePts.length - 1; i >= 0; i--) {
+                    baseD += ` L${basePts[i].px},${basePts[i].py}`;
+                }
+                areaPath = topD + baseD + ' Z';
+            } else {
+                areaPath = 'M' + topPts.map(p => `${p.px},${p.py}`).join(' L')
+                    + ' L' + [...basePts].reverse().map(p => `${p.px},${p.py}`).join(' L') + ' Z';
+                strokePath = 'M' + topPts.map(p => `${p.px},${p.py}`).join(' L');
+            }
             const { r, g, b: bl } = palette.hexToRgb(color);
             this.renderer.path(areaPath, `rgba(${r},${g},${bl},0.35)`, null, { tooltip: s.name });
-            this.renderer.path('M' + topPts.map(p => `${p.px},${p.py}`).join(' L'), 'none', { color, width: 2 });
+            this.renderer.path(strokePath, 'none', { color, width: 2 });
+            if (typeof this.renderer.circle === 'function') {
+                topPts.forEach((p, i) => {
+                    const d = s.values[i];
+                    this._datum(this.renderer.circle(p.px, p.py, 3, color, { color: '#fff', width: 1 }, {
+                        tooltip: `${isMultiline ? s.name + ': ' : ''}${d.label}: ${d.value}`,
+                    }), { label: d.label, series: isMultiline ? s.name : null });
+                });
+            }
 
             if (seriesIndex === 0) {
                 const step = Axis.categoryLabelStep(s.values.map(d => d.label), width, { fontSize: 10 });
@@ -64,11 +122,7 @@ export class AreaChart extends Chart {
         });
 
         if (isMultiline && showLegend) {
-            const legendItems = series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) }));
-            Legend.beside({ x, y, width }, this.renderer.width, {
-                items: legendItems,
-                itemHeight: 20, markerSize: 12,
-            }).draw(this.renderer);
+            Legend.beside({ x, y, width }, this.renderer.width, legendOptions).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/BarChart.js

@@ -2,6 +2,7 @@ import { Axis } from '../Axis.js';
 import { Legend } from '../Legend.js';
 import { DataFilter } from '../DataFilter.js';
 import { BarChartBase } from './BarChartBase.js';
+import { Annotations } from '../Annotations.js';
 
 /**
  * BarChart — vertical bar chart with optional legend and hidden items.
@@ -17,22 +18,56 @@ export class BarChart extends BarChartBase {
     _computeMaxValue() {
         const data = this.data;
         const rawMax = Math.max(...data.map(d => d.value)) || 1;
-        return this._drawYAxis(rawMax, Math.min(0, ...data.map(d => d.value)));
+        const rawMin = Math.min(0, ...data.map(d => d.value));
+        return this._isHorizontal()
+            ? this._drawXAxis(rawMax, rawMin)
+            : this._drawYAxis(rawMax, rawMin);
     }
 
     _beforeBars(maxValue) {
-        // Y axis already drawn by _computeMaxValue(); nothing else needed.
+        const { x, y, width, height } = this._plotBox;
+        const options = this.options;
+        const toY = (v) => y + height - (v / maxValue) * height;
+        const toX = (v) => x + (v / maxValue) * width;
+        Annotations.drawThresholdBands(this.renderer, this._plotBox, options.thresholdBands, { toY });
+        const refLines = options.referenceLines ?? options.referenceLine;
+        Annotations.drawReferenceLines(this.renderer, this._plotBox, refLines, this._isHorizontal() ? { toX } : { toY });
     }
 
     _renderBars(maxValue) {
         const data = this.data;
         const options = this.options;
         const { x, y, width, height } = this._plotBox;
-        const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width);
         const { barColor = 'steelblue', colors } = options;
         const { bandWidth, margin } = this._bandScale(data.length);
         const textAnchor = this.renderer.centerTextAnchor;
 
+        if (this._isHorizontal()) {
+            data.forEach((d, i) => {
+                if (this._dataFilter.has(i)) return;
+                const color = colors ? this._palette.colorAt(i) : barColor;
+                const bar = this._barSpan(d.value);
+                const barY = y + i * (bandWidth + margin);
+
+                this._datum(this.renderer.rect(bar.top, barY, bar.height, bandWidth, color, null, {
+                    bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}`,
+                }), { label: d.label });
+
+                // Category label on left
+                this.renderer.text(d.label, x - 8, barY + bandWidth / 2, {
+                    textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#333',
+                });
+                // Value text past the end of the bar
+                const valX = d.value < 0 ? bar.end - 6 : bar.end + 6;
+                const valAnchor = d.value < 0 ? 'end' : 'start';
+                this.renderer.text(String(d.value), valX, barY + bandWidth / 2, {
+                    textAnchor: valAnchor, verticalAlign: 'middle', fontSize: '10px', fill: '#333',
+                });
+            });
+            return;
+        }
+
+        const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width);
         data.forEach((d, i) => {
             if (this._dataFilter.has(i)) {
                 return; // Skip rendering the bar if it's hidden

package/src/charting/charts/BarChart3D.js

@@ -34,20 +34,22 @@ export class BarChart3D extends Chart {
             const barBaseY = y + height;
             const color = palette.colorAt(i);
 
-            this.renderer.rect(
+            const frontEl = this._datum(this.renderer.rect(
                 barX, barBaseY - barHeight, barWidth, barHeight,
                 color,
                 { color: '#333', width: 1 },
                 { tooltip: `${d.label}: ${d.value}` },
-            );
+            ), { label: d.label });
 
             // Top face
             const topPath = `M${barX},${barBaseY - barHeight} L${barX + barWidth},${barBaseY - barHeight} L${barX + barWidth + depth},${barBaseY - barHeight - depth} L${barX + depth},${barBaseY - barHeight - depth} Z`;
-            this.renderer.path(topPath, palette.lighten(color, 0.2), { color: '#333', width: 1 });
+            const topEl = this.renderer.path(topPath, palette.lighten(color, 0.2), { color: '#333', width: 1 }, { tooltip: `${d.label}: ${d.value}` });
 
             // Right face
             const rightPath = `M${barX + barWidth},${barBaseY - barHeight} L${barX + barWidth},${barBaseY} L${barX + barWidth + depth},${barBaseY + depth} L${barX + barWidth + depth},${barBaseY - barHeight - depth} Z`;
-            this.renderer.path(rightPath, palette.lighten(color, -0.15), { color: '#333', width: 1 });
+            const rightEl = this.renderer.path(rightPath, palette.lighten(color, -0.15), { color: '#333', width: 1 }, { tooltip: `${d.label}: ${d.value}` });
+
+            this._wireHoverTransform([frontEl, topEl, rightEl], { dx: 0, dy: -6 });
 
             const textAnchor = this.renderer.centerTextAnchor;
             this.renderer.text(d.label, barX + barWidth / 2, barBaseY + 20, { textAnchor });

package/src/charting/charts/BarChart3DOrbit.js

@@ -40,7 +40,9 @@ export class BarChart3DOrbit extends Chart3D {
         }).sort((a, b) => b.depth - a.depth);
 
         for (const bar of bars) {
-            this.drawBox(this.renderer, bar.x0, bar.x1, 0, bar.y1, bar.z0, bar.z1, bar.color, toScreen);
+            this.drawBox(this.renderer, bar.x0, bar.x1, 0, bar.y1, bar.z0, bar.z1, bar.color, toScreen, {
+                label: bar.d.x, series: bar.d.z, x: bar.d.x, z: bar.d.z,
+            });
         }
 
         new Legend({

package/src/charting/charts/BarChartBase.js

@@ -14,8 +14,10 @@ export class BarChartBase extends Chart {
     _setup() {
         const box = ChartBox.fromRenderer(this.renderer);
         const options = this.options;
+        const isH = this._isHorizontal();
+        const leftExtra = isH && options.x == null ? 40 : 0;
         const {
-            x = box.x, y = box.y, width = box.width, height = box.height,
+            x = box.x + leftExtra, y = box.y, width = box.width - leftExtra, height = box.height,
             colors, title, xAxisLabel, yAxisLabel,
         } = options;
         this._plotBox = { x, y, width, height };
@@ -23,10 +25,14 @@ export class BarChartBase extends Chart {
         new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, this._plotBox);
     }
 
+    _isHorizontal() {
+        return this.options.orientation === 'horizontal';
+    }
+
     /** @returns {{bandWidth: number, step: number, margin: number}} */
     _bandScale(count) {
-        const { width } = this._plotBox;
-        const step = width / count;
+        const span = this._isHorizontal() ? this._plotBox.height : this._plotBox.width;
+        const step = span / count;
         const bandWidth = step * 0.8;
         const margin = step - bandWidth;
         return { bandWidth, step, margin };
@@ -47,15 +53,29 @@ export class BarChartBase extends Chart {
         return this._domain.max;
     }
 
+    /** Draw an X axis for horizontal bar orientation. */
+    _drawXAxis(rawMax, rawMin = 0) {
+        this._domain = new Axis().drawXRange(this.renderer, this._plotBox, rawMin, rawMax);
+        return this._domain.max;
+    }
+
     /**
-     * Where a bar of `value` goes on the axis `_drawYAxis` drew: from the zero line up to it, or
-     * down to it when negative.
+     * Where a bar of `value` goes on the axis drawn: from the zero line up/right to it, or
+     * down/left to it when negative.
      * @returns {{top: number, height: number, end: number}} `end` is the bar's far end from zero
      */
     _barSpan(value) {
+        if (this._isHorizontal()) {
+            const { x, width } = this._plotBox;
+            const { min, max } = this._domain;
+            const xOf = (v) => x + ((v - min) / ((max - min) || 1)) * width;
+            const zero = xOf(0);
+            const end = xOf(value);
+            return { top: Math.min(zero, end), height: Math.abs(end - zero), end };
+        }
         const { y, height } = this._plotBox;
         const { min, max } = this._domain;
-        const yOf = (v) => y + height - ((v - min) / (max - min)) * height;
+        const yOf = (v) => y + height - ((v - min) / ((max - min) || 1)) * height;
         const zero = yOf(0);
         const end = yOf(value);
         return { top: Math.min(zero, end), height: Math.abs(end - zero), end };