@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/charts/PolarAreaChart.js

@@ -0,0 +1,189 @@
+import { Chart } from '../Chart.js';
+import { PieChart } from './PieChart.js';
+import { Legend } from '../Legend.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { ShapePaths } from '../ShapePaths.js';
+
+/**
+ * PolarAreaChart — Nightingale Rose / Coxcomb chart where each category occupies an
+ * equal angular sector and its outer radius (or area when `scale: 'area'`) encodes `value`.
+ *
+ * Supports:
+ * - 2D and 3D extruded wedges (`extrude3D: true` or `depth > 0` with `tilt`)
+ * - Pre-exploded wedges (`exploded`: `'max'`, index, label, array, or per-item `d.exploded`)
+ * - Interactive radial hover pull-out (`hoverExplode = true`, `hoverOffset = 14`)
+ * - Concentric reference rings (`showGrid = true`)
+ */
+export class PolarAreaChart extends Chart {
+    static chartType = 'polarArea';
+
+    _render() {
+        const rawData = Array.isArray(this.data) ? this.data.filter(d => (d?.value ?? 0) >= 0) : [];
+        const options = this.options || {};
+        const w = this.renderer?.width ?? 640;
+        const h = this.renderer?.height ?? 400;
+        const {
+            extrude3D = false,
+            depth = extrude3D ? 22 : 0,
+            tilt = depth > 0 ? 0.62 : 1,
+            innerRadiusRatio = 0.12,
+            padAngle = 0.02,
+            scale = 'radius', // 'radius' | 'area'
+            showGrid = true,
+            showValues = false,
+            legend: showLegend = true,
+            hoverExplode = true,
+            hoverOffset = 14,
+            colors,
+            title,
+        } = options;
+
+        const rxMax = options.radius ?? (Math.min(w, h) / 2 - 58);
+        const ryMax = rxMax * tilt;
+        const rxInner = rxMax * innerRadiusRatio;
+        const ryInner = ryMax * innerRadiusRatio;
+        const cx = options.cx ?? (showLegend ? Math.max(rxMax + 45, w / 2 - 45) : w / 2);
+        const cy = options.cy ?? (h / 2 - depth / 2 + 10);
+
+        const palette = new ColorPalette(colors);
+        if (title) {
+            this.renderer.text(title, w / 2, Math.max(24, cy - ryMax - 26), {
+                textAnchor: 'middle',
+                fontSize: '18px',
+                fill: '#333',
+            });
+        }
+        if (!rawData.length) return;
+
+        const maxValue = Math.max(...rawData.map(d => d.value), 1);
+        const total = rawData.reduce((s, d) => s + d.value, 0) || 1;
+        const n = rawData.length;
+        const sectorSpan = (Math.PI * 2) / n;
+
+        // Draw subtle concentric reference rings
+        if (showGrid) {
+            for (const frac of [0.33, 0.66, 1.0]) {
+                const grx = rxInner + (rxMax - rxInner) * frac;
+                const gry = ryInner + (ryMax - ryInner) * frac;
+                const ringPath = ShapePaths.ellipticalSlicePath(cx, cy, grx, gry, Math.max(0.1, grx - 0.5), Math.max(0.1, gry - 0.5), 0, Math.PI * 2);
+                const ringEl = this.renderer.path(ringPath, 'none', { color: '#e2e8f0', width: 1 });
+                ringEl?.setAttribute?.('stroke-dasharray', '3 3');
+            }
+        }
+
+        const sectors = rawData.map((d, i) => {
+            const startAngle = -Math.PI / 2 + i * sectorSpan + padAngle / 2;
+            const endAngle = -Math.PI / 2 + (i + 1) * sectorSpan - padAngle / 2;
+            const midAngle = (startAngle + endAngle) / 2;
+            const norm = Math.max(0, d.value) / maxValue;
+            const ratio = scale === 'area' ? Math.sqrt(norm) : norm;
+            const rx = rxInner + ratio * (rxMax - rxInner);
+            const ry = ryInner + ratio * (ryMax - ryInner);
+            const explodeDistance = PieChart.resolveExplodeDistance(d, i, rawData, {
+                explodeOffset: 14,
+                ...options,
+            });
+            return {
+                index: i,
+                datum: d,
+                label: d.label,
+                value: d.value,
+                percent: (d.value / total) * 100,
+                color: d.color || palette.colorAt(i),
+                startAngle,
+                endAngle,
+                midAngle,
+                rx,
+                ry,
+                explodeDistance,
+            };
+        });
+
+        // Sort back-to-front when extruded in 3D so front wedges occlude back wedges cleanly
+        const ordered = depth > 0
+            ? [...sectors].sort((a, b) => Math.sin(a.midAngle) - Math.sin(b.midAngle))
+            : sectors;
+
+        for (const s of ordered) {
+            const dx = Math.cos(s.midAngle) * s.explodeDistance;
+            const dy = Math.sin(s.midAngle) * s.explodeDistance * tilt;
+            const scx = cx + dx;
+            const scy = cy + dy;
+            const tooltip = `${s.label}: ${s.value} (${s.percent.toFixed(1)}%)`;
+            const datum = { label: s.label };
+            const wedgeEls = [];
+
+            if (depth > 0) {
+                const stroke = { color: ColorPalette.lighten(s.color, -0.32), width: 0.8 };
+                const walls = [
+                    { angle: s.startAngle, depthOrder: Math.sin(s.startAngle), color: ColorPalette.lighten(s.color, -0.15) },
+                    { angle: s.endAngle,   depthOrder: Math.sin(s.endAngle),   color: ColorPalette.lighten(s.color, -0.25) },
+                ].sort((a, b) => a.depthOrder - b.depthOrder);
+
+                const w0 = this._datum(this.renderer.path(
+                    ShapePaths.radialWallPath(scx, scy, rxInner, ryInner, s.rx, s.ry, depth, walls[0].angle),
+                    walls[0].color, stroke, { tooltip }
+                ), datum);
+                if (w0) wedgeEls.push(w0);
+
+                if (rxInner > 0) {
+                    for (const [a0, a1] of ShapePaths.visibleArcIntervals(s.startAngle, s.endAngle, 'back')) {
+                        const innerSkirt = ShapePaths.cylinderSkirtPath(scx, scy, rxInner, ryInner, depth, a0, a1);
+                        if (innerSkirt) {
+                            const el = this._datum(this.renderer.path(innerSkirt, ColorPalette.lighten(s.color, -0.28), stroke, { tooltip }), datum);
+                            if (el) wedgeEls.push(el);
+                        }
+                    }
+                }
+
+                const w1 = this._datum(this.renderer.path(
+                    ShapePaths.radialWallPath(scx, scy, rxInner, ryInner, s.rx, s.ry, depth, walls[1].angle),
+                    walls[1].color, stroke, { tooltip }
+                ), datum);
+                if (w1) wedgeEls.push(w1);
+
+                for (const [a0, a1] of ShapePaths.visibleArcIntervals(s.startAngle, s.endAngle, 'front')) {
+                    const outerSkirt = ShapePaths.cylinderSkirtPath(scx, scy, s.rx, s.ry, depth, a0, a1);
+                    if (outerSkirt) {
+                        const el = this._datum(this.renderer.path(outerSkirt, ColorPalette.lighten(s.color, -0.22), stroke, { tooltip }), datum);
+                        if (el) wedgeEls.push(el);
+                    }
+                }
+            }
+
+            const topColor = depth > 0 ? ColorPalette.lighten(s.color, 0.06) : s.color;
+            const topPath = ShapePaths.ellipticalSlicePath(scx, scy, s.rx, s.ry, rxInner, ryInner, s.startAngle, s.endAngle);
+            const topEl = this._datum(this.renderer.path(topPath, topColor, { color: '#fff', width: 1 }, { tooltip }), datum);
+            if (topEl) wedgeEls.push(topEl);
+
+            if (showValues) {
+                const lx = scx + (s.rx + 14) * Math.cos(s.midAngle);
+                const ly = scy + (s.ry + 14 * tilt) * Math.sin(s.midAngle);
+                const txtEl = this.renderer.text(`${s.label} (${s.value})`, lx, ly + 4, {
+                    textAnchor: Math.cos(s.midAngle) >= 0 ? 'start' : 'end',
+                    fontSize: '10px',
+                    fill: '#334155',
+                });
+                if (txtEl) wedgeEls.push(txtEl);
+            }
+
+            if (hoverExplode && hoverOffset > 0) {
+                this._wireRadialHover(wedgeEls, s.midAngle, { offset: hoverOffset, ryRatio: tilt });
+            }
+        }
+
+        if (showLegend) {
+            const legendItems = sectors.map(s => ({
+                label: `${s.label} (${s.value})`,
+                color: s.color,
+            }));
+            new Legend({
+                items: legendItems,
+                x: cx + rxMax + 28,
+                y: cy - ryMax,
+                itemHeight: 20,
+                markerSize: 12,
+            }).draw(this.renderer);
+        }
+    }
+}

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);
@@ -53,21 +53,28 @@ export class RadarChart extends Chart {
         });
 
         series.forEach((s, seriesIndex) => {
+            if (this._dataFilter.has(seriesIndex)) return;
             const color = palette.colorAt(seriesIndex);
             const pts = s.values.map((v, i) => pointFor(i, v.value));
             const path = 'M' + pts.map(p => `${p.px},${p.py}`).join(' L') + ' Z';
             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 });
             });
         });
 
         if (isMulti && showLegend) {
             new Legend({
-                items: series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) })),
+                items: series.map((s, i) => ({
+                    name: s.name,
+                    color: palette.colorAt(i),
+                    hidden: this._dataFilter.has(i),
+                    dataIndex: i,
+                })),
                 x: cx + radius + 40, y: cy - radius, markerSize: 12,
             }).draw(this.renderer);
         }

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 }, {
+            const sliceEl = 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;
@@ -71,15 +71,18 @@ export class RadialBarChart extends Chart {
                 transform: `rotate(${rotate - 90},${lx},${ly})`,
             });
 
+            const hoverEls = [sliceEl];
             if (showValues && barLen > 16) {
                 const vmid = (innerRadius + rOuter) / 2;
                 const vx = cx + vmid * Math.cos(midAngle);
                 const vy = cy + vmid * Math.sin(midAngle);
-                this.renderer.text(String(d.value), vx, vy, {
+                const valEl = this.renderer.text(String(d.value), vx, vy, {
                     textAnchor: 'middle', verticalAlign: 'middle', fontSize: '9px',
                     fill: ColorPalette.isDark(color) ? '#fff' : '#333',
                 });
+                hoverEls.push(valEl);
             }
+            this._wireRadialHover(hoverEls, midAngle, { offset: options.hoverOffset ?? 10 });
         });
 
         if (showLegend) {

package/src/charting/charts/RenkoChart.js

@@ -0,0 +1,178 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * RenkoChart — financial price-action brick and Heikin-Ashi chart.
+ *
+ * Filters out time noise by plotting price movements of fixed box size.
+ * In `heikinAshi: true` mode, renders smoothed trend momentum candlesticks.
+ */
+export class RenkoChart extends Chart {
+    static chartType = 'renko';
+
+    /**
+     * Compute Heikin-Ashi smoothed candles from raw OHLC data.
+     */
+    static computeHeikinAshi(candles) {
+        if (!Array.isArray(candles) || !candles.length) return [];
+        const result = [];
+        let prevOpen = (candles[0].open + candles[0].close) / 2;
+        let prevClose = (candles[0].open + candles[0].high + candles[0].low + candles[0].close) / 4;
+
+        for (let i = 0; i < candles.length; i++) {
+            const c = candles[i];
+            const haClose = (c.open + c.high + c.low + c.close) / 4;
+            const haOpen = i === 0 ? prevOpen : (prevOpen + prevClose) / 2;
+            const haHigh = Math.max(c.high, haOpen, haClose);
+            const haLow = Math.min(c.low, haOpen, haClose);
+
+            result.push({
+                ...c,
+                open: haOpen,
+                high: haHigh,
+                low: haLow,
+                close: haClose,
+                raw: c,
+            });
+            prevOpen = haOpen;
+            prevClose = haClose;
+        }
+        return result;
+    }
+
+    /**
+     * Compute discrete Renko bricks from price sequence.
+     * @param {Array<{close?: number, value?: number, label?: string, date?: string}>} data
+     * @param {number} [boxSize]
+     * @returns {Array<{index: number, bottom: number, top: number, isUp: boolean, date: string}>}
+     */
+    static computeRenkoBricks(data, boxSize) {
+        if (!Array.isArray(data) || !data.length) return [];
+        const prices = data.map(d => d.close ?? d.value ?? d.price ?? d.open ?? 0);
+        const dates = data.map(d => d.date ?? d.label ?? d.time ?? '');
+
+        let computedBox = boxSize;
+        if (!computedBox || computedBox <= 0) {
+            const minP = Math.min(...prices);
+            const maxP = Math.max(...prices);
+            computedBox = Math.max(0.1, (maxP - minP) / 24);
+        }
+
+        const bricks = [];
+        let lastPrice = prices[0];
+        let trend = 0; // +1 up, -1 down
+
+        for (let i = 1; i < prices.length; i++) {
+            const p = prices[i];
+            const diff = p - lastPrice;
+
+            if (diff >= computedBox) {
+                const count = Math.floor(diff / computedBox);
+                for (let k = 0; k < count; k++) {
+                    const bottom = lastPrice;
+                    const top = lastPrice + computedBox;
+                    bricks.push({ bottom, top, isUp: true, date: dates[i] });
+                    lastPrice = top;
+                }
+                trend = 1;
+            } else if (diff <= -computedBox) {
+                const count = Math.floor(-diff / computedBox);
+                for (let k = 0; k < count; k++) {
+                    const top = lastPrice;
+                    const bottom = lastPrice - computedBox;
+                    bricks.push({ bottom, top, isUp: false, date: dates[i] });
+                    lastPrice = bottom;
+                }
+                trend = -1;
+            }
+        }
+        return bricks;
+    }
+
+    _render() {
+        const data = this.data;
+        if (!Array.isArray(data) || !data.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, xAxisLabel, yAxisLabel,
+            upColor = '#27ae60', downColor = '#e74c3c',
+            boxSize, heikinAshi = false,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        // 1. Heikin-Ashi mode: Render smoothed candlestick bars
+        if (heikinAshi) {
+            const candles = RenkoChart.computeHeikinAshi(data);
+            const highPrices = candles.map(c => c.high);
+            const lowPrices = candles.map(c => c.low);
+            const rawMax = Math.max(...highPrices, 1);
+            const rawMin = Math.min(...lowPrices);
+
+            new Axis().drawYRange(this.renderer, plotBox, rawMin, rawMax);
+            this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: '#999', width: 1 });
+
+            const n = candles.length;
+            const candleSlot = width / n;
+            const bodyWidth = Math.max(3, candleSlot * 0.7);
+            const toY = (v) => y + height - ((v - rawMin) / (rawMax - rawMin || 1)) * height;
+
+            candles.forEach((c, i) => {
+                const cx = x + i * candleSlot + candleSlot / 2;
+                const isBull = c.close >= c.open;
+                const color = isBull ? upColor : downColor;
+
+                // Wicks
+                const yHigh = toY(c.high);
+                const yLow = toY(c.low);
+                this.renderer.path(`M${cx},${yHigh} L${cx},${yLow}`, 'none', { color, width: 1.5 });
+
+                // Body
+                const yTop = toY(Math.max(c.open, c.close));
+                const yBottom = toY(Math.min(c.open, c.close));
+                const bodyH = Math.max(2, yBottom - yTop);
+                const bodyX = cx - bodyWidth / 2;
+
+                this._datum(this.renderer.rect(bodyX, yTop, bodyWidth, bodyH, color, null, {
+                    tooltip: `${c.date || c.label || `Bar ${i + 1}`}: Open=${Axis.formatValue(c.open)}, High=${Axis.formatValue(c.high)}, Low=${Axis.formatValue(c.low)}, Close=${Axis.formatValue(c.close)}`,
+                }), { label: c.date || c.label, value: c.close });
+            });
+            return;
+        }
+
+        // 2. Renko Brick mode
+        const bricks = RenkoChart.computeRenkoBricks(data, boxSize);
+        if (!bricks.length) return;
+
+        const allBottoms = bricks.map(b => b.bottom);
+        const allTops = bricks.map(b => b.top);
+        const rawMin = Math.min(...allBottoms);
+        const rawMax = Math.max(...allTops, 1);
+
+        new Axis().drawYRange(this.renderer, plotBox, rawMin, rawMax);
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: '#999', width: 1 });
+
+        const toY = (v) => y + height - ((v - rawMin) / (rawMax - rawMin || 1)) * height;
+        const n = bricks.length;
+        const brickSlot = width / n;
+        const brickW = Math.max(4, brickSlot * 0.85);
+
+        bricks.forEach((b, i) => {
+            const bx = x + i * brickSlot + (brickSlot - brickW) / 2;
+            const byTop = toY(b.top);
+            const byBottom = toY(b.bottom);
+            const bh = Math.max(2, byBottom - byTop);
+            const color = b.isUp ? upColor : downColor;
+
+            this._datum(this.renderer.rect(bx, byTop, brickW, bh, color, { color: '#ffffff', width: 1 }, {
+                tooltip: `${b.date || `Brick ${i + 1}`}: ${b.isUp ? 'Up' : 'Down'} [${Axis.formatValue(b.bottom)} - ${Axis.formatValue(b.top)}]`,
+            }), { label: b.date || `Brick ${i + 1}`, value: b.top });
+        });
+    }
+}

package/src/charting/charts/RidgelineChart.js

@@ -0,0 +1,113 @@
+import { Axis } from '../Axis.js';
+import { Statistics } from '../Statistics.js';
+import { GroupedDistributionChart } from './GroupedDistributionChart.js';
+
+/**
+ * RidgelineChart (Joy Plot) — vertically staggered, partially overlapping
+ * Gaussian-KDE density curves (`Array<{label, values: number[]}>`, the same
+ * data contract as `BoxPlotChart`, `DensityChart`, and `ViolinChart`).
+ *
+ * Reuses `GroupedDistributionChart` for cartesian setup and value-domain math
+ * and `Statistics.kernelDensityEstimate` for smooth density estimation.
+ */
+export class RidgelineChart extends GroupedDistributionChart {
+    static chartType = 'ridgeline';
+
+    _render() {
+        if (!Array.isArray(this.data) || !this.data.length) return;
+        this._setup();
+        this._domain = this._computeDomain();
+
+        const options = this.options;
+        const {
+            overlap = 0.65,
+            fillOpacity = 0.74,
+            showMedian = true,
+        } = options;
+
+        const data = this.data;
+        const n = data.length;
+        const leftPad = 56;
+        const plotX = this._plotBox.x + leftPad;
+        const plotW = Math.max(40, this._plotBox.width - leftPad);
+        const plotY = this._plotBox.y;
+        const plotH = this._plotBox.height;
+
+        // Allocate vertical lanes with headroom for the top ridge's peak
+        const rowStep = plotH / (n + overlap);
+        const maxPeakH = rowStep * (1 + Math.max(0, overlap));
+        const { vMin, vMax, range } = this._domain;
+        const toX = v => plotX + ((v - vMin) / range) * plotW;
+
+        // Draw bottom X-axis and nice ticks
+        this.renderer.path(`M${plotX},${plotY + plotH} L${plotX + plotW},${plotY + plotH}`, 'none', {
+            color: 'black', width: 1,
+        });
+        const ticks = Axis.niceTicks(range, 5).map(t => vMin + t).filter(t => t <= vMax + 1e-6);
+        for (const tick of ticks) {
+            const tx = toX(tick);
+            this.renderer.path(`M${tx},${plotY} L${tx},${plotY + plotH}`, 'none', {
+                color: '#eee', width: 1, dasharray: '3,3',
+            });
+            this.renderer.text(Axis.formatValue(tick), tx, plotY + plotH + 16, {
+                textAnchor: this.renderer.centerTextAnchor, fontSize: '10px', fill: '#666',
+            });
+        }
+
+        // Render from top row (i=0) to bottom row (i=n-1) so lower ridges
+        // naturally overlap in front of upper ridges (the classic Joy Plot look).
+        data.forEach((d, i) => {
+            const values = Array.isArray(d.values) ? d.values : [];
+            if (!values.length) return;
+            const baselineY = plotY + (i + 1 + overlap * 0.35) * rowStep;
+            const clampedBaselineY = Math.min(plotY + plotH, baselineY);
+            const color = this._palette.colorAt(i);
+            const curve = Statistics.kernelDensityEstimate(values, { min: vMin, max: vMax });
+            const maxDensity = Math.max(...curve.map(p => p.density)) || 1;
+
+            const pts = curve.map(p => ({
+                px: toX(p.x),
+                py: clampedBaselineY - (p.density / maxDensity) * maxPeakH,
+            }));
+
+            const sorted = [...values].sort((a, b) => a - b);
+            const median = Statistics.quantile(sorted, 0.5);
+            const tooltip = `${d.label}: n=${values.length}, median=${Axis.formatValue(median)}`;
+
+            // Baseline guide + category label on left
+            this.renderer.path(`M${plotX},${clampedBaselineY} L${plotX + plotW},${clampedBaselineY}`, 'none', {
+                color: '#ddd', width: 1,
+            });
+            this.renderer.text(d.label, plotX - 8, clampedBaselineY - 2, {
+                textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fontWeight: '600', fill: '#333',
+            });
+
+            // Closed area path + crisp upper ridge stroke
+            const areaPath = `M${pts[0].px},${clampedBaselineY} L`
+                + pts.map(p => `${p.px},${p.py}`).join(' L')
+                + ` L${pts[pts.length - 1].px},${clampedBaselineY} Z`;
+            const ridgePath = 'M' + pts.map(p => `${p.px},${p.py}`).join(' L');
+
+            const areaEl = this._datum(this.renderer.path(areaPath, color, null, {
+                'fill-opacity': fillOpacity, tooltip,
+            }), { label: d.label, series: d.label, value: median });
+            const strokeEl = this.renderer.path(ridgePath, 'none', {
+                color: this._palette.darken(color, 0.22), width: 2,
+            }, { tooltip });
+
+            const groupEls = [areaEl, strokeEl];
+            if (showMedian) {
+                const mx = toX(median);
+                // Interpolate density at median for median tick height
+                const nearest = curve.reduce((best, p) => Math.abs(p.x - median) < Math.abs(best.x - median) ? p : best, curve[0]);
+                const myTop = clampedBaselineY - ((nearest?.density ?? maxDensity * 0.5) / maxDensity) * maxPeakH;
+                const medLine = this.renderer.path(`M${mx},${clampedBaselineY} L${mx},${myTop}`, 'none', {
+                    color: '#ffffff', width: 1.8, dasharray: '3,2',
+                });
+                groupEls.push(medLine);
+            }
+
+            this._wireHoverTransform(groupEls, { dx: 0, dy: -4 });
+        });
+    }
+}