@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/charting/charts/PointAndFigureChart.js

@@ -0,0 +1,198 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+
+/**
+ * PointAndFigureChart — classical financial charting using columns of X's (rising)
+ * and O's (falling) to filter out time and track supply/demand breakouts.
+ */
+export class PointAndFigureChart extends Chart {
+    static chartType = 'pointAndFigure';
+
+    /**
+     * Compute Point and Figure columns from price data.
+     * @param {Array<number|object>} data
+     * @param {object} [options]
+     * @param {number} [options.boxSize] - Price increment per box
+     * @param {number} [options.reversal=3] - Number of boxes to trigger reversal
+     */
+    static computePointAndFigure(data, { boxSize, reversal = 3 } = {}) {
+        if (!Array.isArray(data) || data.length === 0) return { columns: [], boxSize: 1, minPrice: 0, maxPrice: 1 };
+
+        const items = data.map((d, i) => {
+            const high = Number(d.high ?? d.close ?? d.value ?? d) || 0;
+            const low = Number(d.low ?? d.close ?? d.value ?? d) || 0;
+            const label = typeof d === 'object' && d !== null ? (d.label ?? d.date ?? `#${i + 1}`) : `#${i + 1}`;
+            return { high, low, label };
+        });
+
+        const p0 = items[0].high;
+        const bSize = boxSize ?? Math.max(0.5, Math.round(p0 * 0.015 * 10) / 10);
+        const toBox = (price) => Math.floor(price / bSize);
+
+        let curType = items[1]?.high >= p0 ? 'X' : 'O';
+        let curBoxes = [toBox(p0)];
+        const columns = [{ type: curType, boxes: curBoxes, label: items[0].label }];
+
+        for (let i = 1; i < items.length; i++) {
+            const { high, low, label } = items[i];
+            const col = columns[columns.length - 1];
+            const topBox = Math.max(...col.boxes);
+            const botBox = Math.min(...col.boxes);
+
+            if (col.type === 'X') {
+                const highBox = toBox(high);
+                if (highBox > topBox) {
+                    for (let b = topBox + 1; b <= highBox; b++) col.boxes.push(b);
+                    col.label = label;
+                } else {
+                    const lowBox = toBox(low);
+                    if (topBox - lowBox >= reversal) {
+                        const newBoxes = [];
+                        for (let b = topBox - 1; b >= lowBox; b--) newBoxes.push(b);
+                        columns.push({ type: 'O', boxes: newBoxes, label });
+                    }
+                }
+            } else {
+                const lowBox = toBox(low);
+                if (lowBox < botBox) {
+                    for (let b = botBox - 1; b >= lowBox; b--) col.boxes.push(b);
+                    col.label = label;
+                } else {
+                    const highBox = toBox(high);
+                    if (highBox - botBox >= reversal) {
+                        const newBoxes = [];
+                        for (let b = botBox + 1; b <= highBox; b++) newBoxes.push(b);
+                        columns.push({ type: 'X', boxes: newBoxes, label });
+                    }
+                }
+            }
+        }
+
+        let minB = Infinity;
+        let maxB = -Infinity;
+        columns.forEach(col => {
+            col.boxes.forEach(b => {
+                if (b < minB) minB = b;
+                if (b > maxB) maxB = b;
+            });
+        });
+
+        if (!Number.isFinite(minB)) { minB = 0; maxB = 10; }
+
+        return {
+            columns,
+            boxSize: bSize,
+            minBox: minB,
+            maxBox: maxB,
+            minPrice: minB * bSize,
+            maxPrice: (maxB + 1) * bSize,
+        };
+    }
+
+    _render() {
+        const options = this.options || {};
+        const { columns, boxSize, minBox, maxBox, minPrice, maxPrice } = PointAndFigureChart.computePointAndFigure(this.data, options);
+        if (!columns.length) return;
+
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            xColor = '#26a69a', oColor = '#ef5350',
+            showGrid = true, showTrendlines = true,
+            title, xAxisLabel, yAxisLabel,
+        } = options;
+
+        const plotBox = { x, y, width, height };
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        const totalBoxes = (maxBox - minBox + 1) || 1;
+        const totalCols = columns.length;
+        const colW = width / Math.max(1, totalCols);
+        const boxH = height / totalBoxes;
+
+        const toScreenY = (bIndex) => y + (maxBox - bIndex) * boxH;
+
+        // 1. Grid lines
+        if (showGrid) {
+            for (let b = minBox; b <= maxBox + 1; b++) {
+                const gy = toScreenY(b);
+                this.renderer.path(`M${x},${gy} L${x + width},${gy}`, 'none', { color: '#f0f0f0', width: 0.75 });
+            }
+            for (let c = 0; c <= totalCols; c++) {
+                const gx = x + c * colW;
+                this.renderer.path(`M${gx},${y} L${gx},${y + height}`, 'none', { color: '#f0f0f0', width: 0.75 });
+            }
+        }
+
+        // 2. Y-axis price labels
+        const axisStep = Math.max(1, Math.round(totalBoxes / 8));
+        for (let b = minBox; b <= maxBox; b += axisStep) {
+            const py = toScreenY(b) + boxH / 2;
+            const priceVal = b * boxSize;
+            this.renderer.text(Axis.formatValue(priceVal), x - 8, py, {
+                textAnchor: 'end', verticalAlign: 'middle', fontSize: '9px', fill: '#666',
+            });
+        }
+
+        // 3. Columns of X and O
+        columns.forEach((col, cIdx) => {
+            const cx = x + cIdx * colW + colW / 2;
+            const isX = col.type === 'X';
+            const color = isX ? xColor : oColor;
+            const glyphSize = Math.min(colW, boxH) * 0.7;
+
+            col.boxes.forEach(bIndex => {
+                const cy = toScreenY(bIndex) + boxH / 2;
+                const price = bIndex * boxSize;
+
+                if (isX) {
+                    // Draw X
+                    const hs = glyphSize / 2;
+                    const pathD = `M${cx - hs},${cy - hs} L${cx + hs},${cy + hs} M${cx - hs},${cy + hs} L${cx + hs},${cy - hs}`;
+                    const el = this.renderer.path(pathD, 'none', { color, width: 2 }, {
+                        tooltip: `X (${col.label}): ${Axis.formatValue(price)}`,
+                    });
+                    this._datum(el, { label: col.label, type: 'X', price });
+                } else {
+                    // Draw O
+                    const r = glyphSize / 2;
+                    const el = this.renderer.circle(cx, cy, r, 'none', { color, width: 2 }, {
+                        tooltip: `O (${col.label}): ${Axis.formatValue(price)}`,
+                    });
+                    this._datum(el, { label: col.label, type: 'O', price });
+                }
+            });
+
+            // Column label along X axis
+            const step = Math.max(1, Math.floor(totalCols / 8));
+            if (cIdx % step === 0) {
+                this.renderer.text(col.label, cx, y + height + 18, {
+                    textAnchor: this.renderer.centerTextAnchor, fontSize: '9px', fill: '#555',
+                });
+            }
+        });
+
+        // 4. Optional 45-degree support/resistance trendlines
+        if (showTrendlines && totalCols > 3) {
+            // Find major low for bullish support (45 deg up)
+            let lowestBox = Infinity, lowestCol = 0;
+            columns.forEach((c, idx) => {
+                const minB = Math.min(...c.boxes);
+                if (minB < lowestBox) { lowestBox = minB; lowestCol = idx; }
+            });
+
+            if (lowestCol < totalCols - 1) {
+                const x1 = x + lowestCol * colW + colW / 2;
+                const y1 = toScreenY(lowestBox) + boxH;
+                const steps = totalCols - 1 - lowestCol;
+                const x2 = x1 + steps * colW;
+                const y2 = y1 - steps * boxH;
+                this.renderer.path(`M${x1},${y1} L${x2},${y2}`, 'none', { color: '#26a69a', width: 1.5, strokeDasharray: '4 4' });
+            }
+        }
+
+        // Draw baseline axis
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+    }
+}

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/RadarChart.js

@@ -53,6 +53,7 @@ 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';
@@ -68,7 +69,12 @@ export class RadarChart extends Chart {
 
         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,7 +56,7 @@ 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._datum(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 });
 
@@ -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 });
+        });
+    }
+}