@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/charts/PieChart.js

@@ -4,11 +4,174 @@ import { ColorPalette } from '../ColorPalette.js';
 import { ShapePaths } from '../ShapePaths.js';
 
 /**
- * PieChart — pie or doughnut chart with optional legend.
+ * PieChart — pie or doughnut chart with optional legend, exploded slices,
+ * interactive hover slice pull-out (`hoverExplode`), callout leader lines
+ * (`showLabels`), `"Other"` slice roll-up (`maxSlices`), and center KPI label
+ * (`centerLabel` / `showTotal` when `innerRadiusRatio > 0`).
+ *
+ * Also serves as the shared base class for `DonutChart`, `PieChart3D`, and `DonutChart3D`.
  */
 export class PieChart extends Chart {
     static chartType = 'pie';
 
+    /**
+     * Resolve whether/how far slice `(d, i)` is pre-exploded in pixels.
+     * Supports:
+     * - per-slice `d.exploded` (`true` -> `explodeOffset`, or a numeric pixel offset)
+     * - `options.exploded`:
+     *   - `true`: all slices exploded by `explodeOffset`
+     *   - `'max'`: explodes the largest slice
+     *   - `number`: slice index
+     *   - `string`: slice label
+     *   - `Array<number|string>`: matching indices or labels
+     *   - `Function`: `(d, i) => boolean | number`
+     */
+    static resolveExplodeDistance(d, i, data, options = {}) {
+        const explodeOffset = options.explodeOffset ?? 14;
+        if (typeof d?.exploded === 'number') return d.exploded;
+        if (d?.exploded === true) return explodeOffset;
+
+        const { exploded } = options;
+        if (exploded == null || exploded === false) return 0;
+        if (exploded === true) return explodeOffset;
+        if (exploded === 'max') {
+            let maxIdx = 0;
+            let maxVal = -Infinity;
+            data.forEach((item, idx) => {
+                if ((item?.value ?? 0) > maxVal) {
+                    maxVal = item.value;
+                    maxIdx = idx;
+                }
+            });
+            return i === maxIdx ? explodeOffset : 0;
+        }
+        if (typeof exploded === 'number') return i === exploded ? explodeOffset : 0;
+        if (typeof exploded === 'string') return d?.label === exploded ? explodeOffset : 0;
+        if (Array.isArray(exploded)) {
+            return (exploded.includes(i) || exploded.includes(d?.label)) ? explodeOffset : 0;
+        }
+        if (typeof exploded === 'function') {
+            const res = exploded(d, i);
+            if (typeof res === 'number') return res;
+            return res ? explodeOffset : 0;
+        }
+        return 0;
+    }
+
+    /**
+     * Prepare normalized slice geometry (angles, percentages, colors, explosion offsets,
+     * and optional `maxSlices` roll-up into an `"Other"` slice).
+     */
+    static prepareSlices(data = [], options = {}) {
+        const {
+            colors,
+            maxSlices = 0,
+            otherLabel = 'Other',
+            startAngle: initialAngle = -Math.PI / 2,
+        } = options;
+        const palette = new ColorPalette(colors);
+        let items = Array.isArray(data) ? data.filter(d => (d?.value ?? 0) > 0) : [];
+        if (maxSlices > 1 && items.length > maxSlices) {
+            const head = items.slice(0, maxSlices - 1);
+            const tail = items.slice(maxSlices - 1);
+            const otherVal = tail.reduce((s, d) => s + (d.value || 0), 0);
+            items = [...head, { label: otherLabel, value: otherVal }];
+        }
+        const total = items.reduce((s, d) => s + d.value, 0) || 1;
+        let angle = initialAngle;
+        const slices = items.map((d, i) => {
+            const span = (d.value / total) * Math.PI * 2;
+            const startAngle = angle;
+            const endAngle = angle + span;
+            const midAngle = startAngle + span / 2;
+            angle = endAngle;
+            const explodeDistance = PieChart.resolveExplodeDistance(d, i, items, 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,
+                explodeDistance,
+            };
+        });
+        return { slices, total, palette };
+    }
+
+    /**
+     * Wire smooth hover pull-out on a slice's SVG elements (`elements` moves as a unit).
+     */
+    _wireSliceHover(elements, midAngle, ryRatio = 1) {
+        const { hoverExplode = true, hoverOffset = 14 } = this.options;
+        if (!hoverExplode || hoverOffset <= 0) return;
+        this._wireRadialHover(elements, midAngle, { offset: hoverOffset, ryRatio });
+    }
+
+    /**
+     * Draw optional callout leader lines and external labels for slices.
+     */
+    _drawCalloutLabel(slice, cx, cy, rxOuter, ryOuter, ryRatio = 1, sliceEls = null) {
+        const { showLabels = false, minLabelPercent = 2 } = this.options;
+        if (!showLabels || slice.percent < minLabelPercent) return;
+
+        const cos = Math.cos(slice.midAngle);
+        const sin = Math.sin(slice.midAngle);
+        const sx = cx + Math.cos(slice.midAngle) * slice.explodeDistance;
+        const sy = cy + Math.sin(slice.midAngle) * slice.explodeDistance * ryRatio;
+
+        const x0 = sx + rxOuter * cos;
+        const y0 = sy + ryOuter * sin;
+        const x1 = sx + (rxOuter + 14) * cos;
+        const y1 = sy + (ryOuter + 14 * ryRatio) * sin;
+        const rightSide = cos >= 0;
+        const x2 = x1 + (rightSide ? 12 : -12);
+        const y2 = y1;
+
+        const lineEl = this.renderer.path(`M${x0},${y0} L${x1},${y1} L${x2},${y2}`, 'none', { color: '#64748b', width: 1 });
+        const labelText = showLabels === 'percent'
+            ? `${slice.percent.toFixed(1)}%`
+            : showLabels === 'label'
+                ? slice.label
+                : `${slice.label} (${slice.percent.toFixed(0)}%)`;
+        const textEl = this.renderer.text(labelText, x2 + (rightSide ? 4 : -4), y2 + 4, {
+            textAnchor: rightSide ? 'start' : 'end',
+            fontSize: '11px',
+            fill: '#334155',
+        });
+        if (sliceEls) {
+            if (lineEl) sliceEls.push(lineEl);
+            if (textEl) sliceEls.push(textEl);
+        }
+    }
+
+    /**
+     * Draw an optional center KPI / total label inside a doughnut hole.
+     */
+    _drawCenterLabel(cx, cy, total, rInner) {
+        if (rInner <= 0) return;
+        const { centerLabel, centerSubLabel, showTotal = false } = this.options;
+        if (centerLabel == null && !showTotal) return;
+        const mainText = centerLabel != null ? String(centerLabel) : total.toLocaleString();
+        this.renderer.text(mainText, cx, cy + (centerSubLabel ? -2 : 5), {
+            textAnchor: 'middle',
+            fontSize: '18px',
+            fontWeight: 'bold',
+            fill: '#1e293b',
+        });
+        const sub = centerSubLabel ?? (showTotal && centerLabel == null ? 'Total' : null);
+        if (sub) {
+            this.renderer.text(String(sub), cx, cy + 16, {
+                textAnchor: 'middle',
+                fontSize: '11px',
+                fill: '#64748b',
+            });
+        }
+    }
+
     _render() {
         const data = this.data;
         const options = this.options;
@@ -18,31 +181,46 @@ export class PieChart extends Chart {
             cx = w / 2, cy = h / 2 + 10,
             radius = Math.min(w, h) / 2 - 60,
             innerRadiusRatio = 0,
-            colors, legend: showLegend = true, title,
+            legend: showLegend = true, title,
         } = options;
-        const palette = new ColorPalette(colors);
-        const total = data.reduce((s, d) => s + d.value, 0) || 1;
+        const { slices, total } = PieChart.prepareSlices(data, options);
         const rInner = radius * innerRadiusRatio;
 
         if (title) {
             this.renderer.text(title, cx, cy - radius - 20, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
         }
 
-        let angle = -Math.PI / 2; // start at 12 o'clock
-        data.forEach((d, i) => {
-            const slice = (d.value / total) * Math.PI * 2;
-            const color = palette.colorAt(i);
-            const path = ShapePaths.donutSlicePath(cx, cy, radius, rInner, angle, angle + slice);
-            this._datum(this.renderer.path(path, color, { color: '#fff', width: 1 }, {
-                tooltip: `${d.label}: ${d.value} (${(d.value / total * 100).toFixed(1)}%)`,
-            }), { label: d.label });
-            angle += slice;
-        });
+        for (const s of slices) {
+            const dx = Math.cos(s.midAngle) * s.explodeDistance;
+            const dy = Math.sin(s.midAngle) * s.explodeDistance;
+            const path = ShapePaths.donutSlicePath(cx + dx, cy + dy, radius, rInner, s.startAngle, s.endAngle);
+            const el = this._datum(this.renderer.path(path, s.color, { color: '#fff', width: 1 }, {
+                tooltip: `${s.label}: ${s.value} (${s.percent.toFixed(1)}%)`,
+            }), { label: s.label });
+            const sliceEls = [el];
+            if (options.showValues && s.percent >= 4) {
+                const rMid = (radius + rInner) / 2;
+                const vx = cx + dx + Math.cos(s.midAngle) * rMid;
+                const vy = cy + dy + Math.sin(s.midAngle) * rMid;
+                const valText = typeof options.format === 'function' ? options.format(s.value) : s.value.toLocaleString();
+                const textEl = this.renderer.text(valText, vx, vy + 4, {
+                    textAnchor: 'middle',
+                    fontSize: '11px',
+                    fontWeight: 'bold',
+                    fill: '#ffffff',
+                });
+                if (textEl) sliceEls.push(textEl);
+            }
+            this._drawCalloutLabel(s, cx, cy, radius, radius, 1, sliceEls);
+            this._wireSliceHover(sliceEls, s.midAngle, 1);
+        }
+
+        this._drawCenterLabel(cx, cy, total, rInner);
 
         if (showLegend) {
-            const legendItems = data.map((d, i) => ({
-                label: `${d.label} (${(d.value / total * 100).toFixed(0)}%)`,
-                color: palette.colorAt(i),
+            const legendItems = slices.map(s => ({
+                label: `${s.label} (${s.percent.toFixed(0)}%)`,
+                color: s.color,
             }));
             new Legend({
                 items: legendItems,

package/src/charting/charts/PieChart3D.js

@@ -0,0 +1,137 @@
+import { PieChart } from './PieChart.js';
+import { Legend } from '../Legend.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { ShapePaths } from '../ShapePaths.js';
+
+/**
+ * PieChart3D — extruded 3D tilted pie/doughnut chart with shaded outer/inner
+ * cylinder skirts, radial cut walls, pre-exploded slices (`exploded`), and
+ * interactive hover pull-out (`hoverExplode`: hovering over any slice smoothly
+ * slides the entire 3D wedge out along its radial angle).
+ */
+export class PieChart3D extends PieChart {
+    static chartType = 'pie3D';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const w = this.renderer?.width ?? 640;
+        const h = this.renderer?.height ?? 400;
+        const {
+            tilt = 0.58,
+            depth = 26,
+            innerRadiusRatio = 0,
+            legend: showLegend = true,
+            title,
+        } = options;
+        const rx = options.radius ?? (Math.min(w, h) / 2 - 55);
+        const ry = rx * tilt;
+        const rxInner = rx * innerRadiusRatio;
+        const ryInner = ry * innerRadiusRatio;
+        const cx = options.cx ?? (showLegend ? Math.max(rx + 45, w / 2 - 45) : w / 2);
+        const cy = options.cy ?? (h / 2 - depth / 2 + 8);
+
+        const { slices, total } = PieChart.prepareSlices(data, {
+            explodeOffset: 16,
+            ...options,
+        });
+
+        if (title) {
+            this.renderer.text(title, w / 2, Math.max(24, cy - ry - 26), {
+                textAnchor: 'middle',
+                fontSize: '18px',
+                fill: '#333',
+            });
+        }
+
+        // Sort slices from back (12 o'clock, sin(θ) = -1) to front (6 o'clock, sin(θ) = +1)
+        // so painter's algorithm naturally occludes back wedges with front wedges while keeping
+        // all faces of each slice grouped for smooth hover pull-out.
+        const ordered = [...slices].sort((a, b) => Math.sin(a.midAngle) - Math.sin(b.midAngle));
+
+        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 sliceEls = [];
+
+            const topColor = ColorPalette.lighten(s.color, 0.06);
+            const outerSkirtColor = ColorPalette.lighten(s.color, -0.22);
+            const innerSkirtColor = ColorPalette.lighten(s.color, -0.28);
+            const wallColorA = ColorPalette.lighten(s.color, -0.15);
+            const wallColorB = ColorPalette.lighten(s.color, -0.25);
+            const stroke = { color: ColorPalette.lighten(s.color, -0.32), width: 0.8 };
+
+            // Order the two radial cut walls from further back (smaller average sin) to further front
+            const walls = [
+                { angle: s.startAngle, depthOrder: Math.sin(s.startAngle), color: wallColorA },
+                { angle: s.endAngle,   depthOrder: Math.sin(s.endAngle),   color: wallColorB },
+            ].sort((a, b) => a.depthOrder - b.depthOrder);
+
+            const drawWall = (wSpec) => {
+                if (depth <= 0 || slices.length <= 1) return;
+                const dPath = ShapePaths.radialWallPath(scx, scy, rxInner, ryInner, rx, ry, depth, wSpec.angle);
+                const el = this._datum(this.renderer.path(dPath, wSpec.color, stroke, { tooltip }), datum);
+                if (el) sliceEls.push(el);
+            };
+
+            // 1. Back-most radial cut wall
+            drawWall(walls[0]);
+
+            // 2. Inner donut hole cylinder wall (visible along the back half where sin(θ) <= 0)
+            if (rxInner > 0 && depth > 0) {
+                for (const [a0, a1] of ShapePaths.visibleArcIntervals(s.startAngle, s.endAngle, 'back')) {
+                    const innerPath = ShapePaths.cylinderSkirtPath(scx, scy, rxInner, ryInner, depth, a0, a1);
+                    if (innerPath) {
+                        const el = this._datum(this.renderer.path(innerPath, innerSkirtColor, stroke, { tooltip }), datum);
+                        if (el) sliceEls.push(el);
+                    }
+                }
+            }
+
+            // 3. Front-most radial cut wall
+            drawWall(walls[1]);
+
+            // 4. Outer cylinder rim skirt (visible along the front half where sin(θ) >= 0)
+            if (depth > 0) {
+                for (const [a0, a1] of ShapePaths.visibleArcIntervals(s.startAngle, s.endAngle, 'front')) {
+                    const skirtPath = ShapePaths.cylinderSkirtPath(scx, scy, rx, ry, depth, a0, a1);
+                    if (skirtPath) {
+                        const el = this._datum(this.renderer.path(skirtPath, outerSkirtColor, stroke, { tooltip }), datum);
+                        if (el) sliceEls.push(el);
+                    }
+                }
+            }
+
+            // 5. Top elliptical slice face
+            const topPath = ShapePaths.ellipticalSlicePath(scx, scy, rx, ry, rxInner, ryInner, s.startAngle, s.endAngle);
+            const topEl = this._datum(this.renderer.path(topPath, topColor, { color: '#fff', width: 1 }, { tooltip }), datum);
+            if (topEl) sliceEls.push(topEl);
+
+            // 6. Optional callout leader line + label (moves with slice on hover)
+            this._drawCalloutLabel(s, cx, cy, rx, ry, tilt, sliceEls);
+
+            // 7. Wire smooth radial hover pull-out across all 3D faces of this slice
+            this._wireSliceHover(sliceEls, s.midAngle, tilt);
+        }
+
+        this._drawCenterLabel(cx, cy, total, rxInner);
+
+        if (showLegend) {
+            const legendItems = slices.map(s => ({
+                label: `${s.label} (${s.percent.toFixed(0)}%)`,
+                color: s.color,
+            }));
+            new Legend({
+                items: legendItems,
+                x: cx + rx + 28,
+                y: cy - ry,
+                itemHeight: 20,
+                markerSize: 12,
+            }).draw(this.renderer);
+        }
+    }
+}

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