@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/charts/LineChart.js

@@ -4,6 +4,7 @@ import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { Legend } from '../Legend.js';
 import { ColorPalette } from '../ColorPalette.js';
 import { ErrorBars } from '../ErrorBars.js';
+import { Annotations } from '../Annotations.js';
 
 /**
  * LineChart — single or multi-series line chart with optional 3D ribbon
@@ -25,27 +26,59 @@ export class LineChart extends Chart {
         // Check if data is multiline (array of series) or single line
         const isMultiline = Array.isArray(data[0]?.values);
         const series = isMultiline ? data : [{ name: 'default', values: data }];
-        const legendOptions = { items: series.map(s => ({ name: s.name })), itemHeight: 20, markerSize: 12 };
+        const lineColors = colors || ColorPalette.DEFAULT;
+        const palette = new ColorPalette(lineColors);
+
+        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,
+        };
         // With a legend, the plot leaves room for it beside, so it does not cover the last points.
         const width = options.width ?? (isMultiline && showLegend
             ? Legend.plotWidthBeside({ x, width: box.width }, this.renderer.width, legendOptions) : box.width);
         const plotBox = { x, y, width, height };
 
-        // Determine max value across all series
-        const maxValue = Math.max(...series.flatMap(s =>
-            isMultiline ? s.values.map(d => d.value) : s.values.map(d => d.value)
-        )) || 1;
+        // Determine max values per axis (supports secondary right Y-axis and active series)
+        const activeSeries = series.filter((_, idx) => !this._dataFilter.has(idx));
+        const workingSeries = activeSeries.length ? activeSeries : series;
+        const leftSeries = workingSeries.filter(s => s.yAxis !== 'right');
+        const rightSeries = workingSeries.filter(s => s.yAxis === 'right');
+        const hasSecondaryY = rightSeries.length > 0;
+
+        const maxLeftValue = Math.max(...leftSeries.flatMap(s => s.values.map(d => d.value)), 1);
+        const maxRightValue = hasSecondaryY ? Math.max(...rightSeries.flatMap(s => s.values.map(d => d.value)), 1) : 1;
 
         const pointMargin = (isMultiline ? series[0].values.length : data.length) > 1
             ? width / ((isMultiline ? series[0].values.length : data.length) - 1)
             : width;
 
         const depth = zAxis ? zDepth : 0;
-        const lineColors = colors || ColorPalette.DEFAULT;
-        const palette = new ColorPalette(lineColors);
 
         new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
 
+        // Draw Left Y Axis and optional Secondary Right Y Axis
+        let leftAxisRes;
+        if (!zAxis) {
+            leftAxisRes = new Axis().drawYRange(this.renderer, plotBox, 0, maxLeftValue, { scale: options.scale });
+            if (hasSecondaryY) {
+                new Axis().drawSecondaryYRange(this.renderer, plotBox, 0, maxRightValue);
+            }
+        }
+
+        const toY = leftAxisRes?.yOf ?? ((v) => y + height - (v / maxLeftValue) * height);
+        const toX = (idx) => x + idx * pointMargin;
+
+        // Draw 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 });
+
         // 3D Axes
         const axisPath = zAxis
             ? `M${x + depth},${y - depth} L${x},${y} L${x},${y + height} L${x + width},${y + height} L${x + width + depth},${y + height - depth} M${x},${y + height} L${x + depth},${y + height - depth}`
@@ -55,35 +88,55 @@ export class LineChart extends Chart {
 
         // Draw each series
         series.forEach((seriesData, seriesIndex) => {
+            if (this._dataFilter.has(seriesIndex)) return;
             const seriesValues = isMultiline ? seriesData.values : seriesData.values;
             const seriesColor = palette.colorAt(seriesIndex);
             const seriesDepth = zAxis ? (depth / series.length) * (series.length - 1 - seriesIndex) : 0;
+            const seriesMax = seriesData.yAxis === 'right' ? maxRightValue : maxLeftValue;
+            const stepMode = seriesData.step ?? options.step;
 
             // Draw line
             if (zAxis) {
                 // 3D effect: draw a "ribbon"
                 const ribbonPath = seriesValues.map((d, i) => {
-                    const pY = y + height - (d.value / maxValue) * height;
+                    const pY = toY(d.value);
                     return `L${x + i * pointMargin + seriesDepth},${pY - seriesDepth}`;
                 }).join(' ').replace('L', 'M');
                 this.renderer.path(ribbonPath, palette.lighten(seriesColor, -0.2), null);
             }
             let pathData = '';
+            let prevX = 0, prevY = 0;
             seriesValues.forEach((d, i) => {
                 const pointX = x + i * pointMargin + seriesDepth;
-                const pointY = y + height - (d.value / maxValue) * height - seriesDepth;
+                const pointY = toY(d.value) - seriesDepth;
                 if (i === 0) {
-                    pathData += `M${pointX},${pointY}`;
+                    pathData = `M${pointX},${pointY}`;
+                } else if (stepMode === 'before') {
+                    pathData += ` V${pointY} H${pointX}`;
+                } else if (stepMode === 'center') {
+                    const midX = (prevX + pointX) / 2;
+                    pathData += ` H${midX} V${pointY} H${pointX}`;
+                } else if (stepMode) {
+                    // 'after' or true
+                    pathData += ` H${pointX} V${pointY}`;
                 } else {
                     pathData += ` L${pointX},${pointY}`;
                 }
+                prevX = pointX;
+                prevY = pointY;
             });
             this.renderer.path(pathData, 'none', { color: seriesColor, width: 2 });
 
+            // Optional trendline per series or for primary
+            if (options.trendline && (seriesIndex === 0 || options.trendline?.series === seriesData.name)) {
+                const trendPts = seriesValues.map((d, i) => ({ x: i, y: d.value }));
+                Annotations.drawTrendline(this.renderer, plotBox, trendPts, options.trendline, { toX, toY });
+            }
+
             // Draw points + optional error bars
             seriesValues.forEach((d, i) => {
                 const pointX = x + i * pointMargin + seriesDepth;
-                const pointY = y + height - (d.value / maxValue) * height - seriesDepth;
+                const pointY = toY(d.value) - seriesDepth;
                 const textAnchor = this.renderer.centerTextAnchor;
 
                 this._datum(this.renderer.circle(
@@ -94,20 +147,24 @@ export class LineChart extends Chart {
                     { tooltip: `${isMultiline ? seriesData.name + ': ' : ''}${d.label}: ${d.value}` }
                 ), { label: d.label, series: isMultiline ? seriesData.name : null });
 
+                if (options.showValues) {
+                    this.renderer.text(Axis.formatValue(d.value), pointX, pointY - 8, {
+                        textAnchor, fontSize: '10px', fill: '#333',
+                    });
+                }
+
                 const errMinus = d.errorMinus != null ? d.errorMinus : d.error != null ? d.error : null;
                 const errPlus = d.errorPlus != null ? d.errorPlus : d.error != null ? d.error : null;
                 if (errMinus != null || errPlus != null) {
                     const yHighVal = d.value + (errPlus ?? 0);
                     const yLowVal = d.value - (errMinus ?? 0);
-                    const yHigh = y + height - (yHighVal / maxValue) * height - seriesDepth;
-                    const yLow = y + height - (yLowVal / maxValue) * height - seriesDepth;
+                    const yHigh = toY(yHighVal) - seriesDepth;
+                    const yLow = toY(yLowVal) - seriesDepth;
                     ErrorBars.draw(this.renderer, pointX, pointY, null, null, yLow, yHigh, seriesColor);
                 }
             });
 
-            // Draw labels only for first series to avoid clutter. Use this
-            // series' own seriesDepth (not the raw max `depth`) for the x-shift
-            // so labels line up under series 0's actual (depth-shifted) points.
+            // Draw labels only for first series to avoid clutter.
             if (seriesIndex === 0) {
                 const step = Axis.categoryLabelStep(seriesValues.map(d => d.label), width);
                 seriesValues.forEach((d, i) => {
@@ -121,8 +178,7 @@ export class LineChart extends Chart {
 
         // Draw legend for multiline
         if (isMultiline && showLegend) {
-            const legendItems = series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) }));
-            Legend.beside({ x, y, width }, this.renderer.width, { ...legendOptions, items: legendItems }).draw(this.renderer);
+            Legend.beside({ x, y, width }, this.renderer.width, legendOptions).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/LollipopChart.js

@@ -0,0 +1,104 @@
+import { Axis } from '../Axis.js';
+import { Legend } from '../Legend.js';
+import { BarChartBase } from './BarChartBase.js';
+
+/**
+ * LollipopChart — stem-and-dot alternative to a bar chart for high-cardinality or multi-series
+ * categorical comparisons with minimal ink density.
+ *
+ * Accepts either:
+ *   - 1D `Array<{label: string, value: number}>`, or
+ *   - Multi-series `Array<{name: string, values: Array<{label: string, value: number}>}>`.
+ */
+export class LollipopChart extends BarChartBase {
+    static chartType = 'lollipop';
+
+    static _normalize(data) {
+        if (!Array.isArray(data) || data.length === 0) return { isMulti: false, series: [], labels: [] };
+        if (Array.isArray(data[0]?.values)) {
+            const labels = [...new Set(data.flatMap(s => s.values.map(v => v.label)))];
+            return { isMulti: true, series: data, labels };
+        }
+        return {
+            isMulti: false,
+            series: [{ name: 'default', values: data }],
+            labels: data.map(d => d.label),
+        };
+    }
+
+    _setup() {
+        this._norm = LollipopChart._normalize(this.data);
+        super._setup();
+        const showLegend = this.options.legend ?? this._norm.isMulti;
+        if (showLegend && this._norm.isMulti && this.options.width === undefined) {
+            this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, this._legendOptions());
+        }
+    }
+
+    _legendOptions() {
+        return {
+            items: this._norm.series.map((s, i) => ({ label: s.name, color: this._palette.colorAt(i), dataIndex: i })),
+            itemHeight: 20, markerSize: 10,
+        };
+    }
+
+    _computeMaxValue() {
+        const allValues = this._norm.series.flatMap(s => s.values.map(v => v.value)).filter(v => typeof v === 'number');
+        const rawMax = Math.max(0, ...allValues) || 1;
+        const rawMin = Math.min(0, ...allValues);
+        return this._drawYAxis(rawMax, rawMin);
+    }
+
+    _renderBars() {
+        const { isMulti, series, labels } = this._norm;
+        if (labels.length === 0) return;
+        const { x, y, width, height } = this._plotBox;
+        const {
+            color: singleColor = '#2563eb',
+            colors,
+            radius = 5,
+            stemWidth = 2,
+        } = this.options;
+        const { bandWidth, margin } = this._bandScale(labels.length);
+        const labelStep = Axis.categoryLabelStep(labels, width);
+        const textAnchor = this.renderer.centerTextAnchor;
+        const zeroY = this._barSpan(0).end;
+        const seriesCount = series.length;
+
+        labels.forEach((label, i) => {
+            const bandX = x + i * (bandWidth + margin);
+            series.forEach((s, sIdx) => {
+                const pt = s.values.find(v => v.label === label);
+                if (!pt || typeof pt.value !== 'number') return;
+                const cx = seriesCount === 1
+                    ? bandX + bandWidth / 2
+                    : bandX + ((sIdx + 0.5) / seriesCount) * bandWidth;
+                const span = this._barSpan(pt.value);
+                const col = isMulti || colors ? this._palette.colorAt(sIdx) : singleColor;
+                const tip = isMulti ? `${s.name} - ${label}: ${pt.value}` : `${label}: ${pt.value}`;
+
+                this.renderer.path(`M${cx},${zeroY} L${cx},${span.end}`, 'none', { color: col, width: stemWidth });
+                if (typeof this.renderer.circle === 'function') {
+                    this._datum(this.renderer.circle(cx, span.end, radius, col, { color: '#fff', width: 1.5 }, {
+                        tooltip: tip,
+                    }), { label, series: isMulti ? s.name : null });
+                } else {
+                    this._datum(this.renderer.rect(cx - radius, span.end - radius, radius * 2, radius * 2, col, null, {
+                        tooltip: tip,
+                    }), { label, series: isMulti ? s.name : null });
+                }
+            });
+            if (i % labelStep === 0) {
+                this.renderer.text(label, bandX + bandWidth / 2, y + height + 20, { textAnchor });
+            }
+        });
+    }
+
+    _afterBars() {
+        const showLegend = this.options.legend ?? this._norm.isMulti;
+        if (showLegend && this._norm.isMulti) {
+            const { x, y, width } = this._plotBox;
+            Legend.beside({ x, y, width }, this.renderer.width, this._legendOptions()).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/MarimekkoChart.js

@@ -0,0 +1,75 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Legend } from '../Legend.js';
+import { StackedBarChart } from './StackedBarChart.js';
+import { TableChart } from './TableChart.js';
+
+/**
+ * MarimekkoChart — two-dimensional 100%-stacked mosaic chart where column width is proportional to
+ * each category's total across series and segment height is each series' percentage share within
+ * that category.
+ */
+export class MarimekkoChart extends Chart {
+    static chartType = 'marimekko';
+
+    _render() {
+        const normalized = StackedBarChart._normalize(this.data, this.options.seriesLabels);
+        const { categories, seriesNames } = normalized;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width: rawWidth = box.width, height = box.height,
+            colors, title, xAxisLabel, yAxisLabel, legend: showLegend = true,
+        } = this.options;
+        const palette = new ColorPalette(colors);
+        const legendOpts = {
+            items: seriesNames.map((name, i) => ({ label: name, color: palette.colorAt(i), dataIndex: i })),
+            itemHeight: 20, markerSize: 10,
+        };
+        const width = showLegend && this.options.width === undefined && seriesNames.length > 0
+            ? Legend.plotWidthBeside({ x, y, width: rawWidth, height }, this.renderer.width, legendOpts)
+            : rawWidth;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        new Axis().drawYRange(this.renderer, plotBox, 0, 100);
+
+        const colTotals = categories.map(c => c.values.reduce((sum, v) => sum + Math.max(0, v ?? 0), 0));
+        const grandTotal = colTotals.reduce((sum, v) => sum + v, 0) || 1;
+        const textAnchor = this.renderer.centerTextAnchor;
+        const measure = (s) => this.renderer.measureText?.(s, { fontSize: '11px' }) ?? s.length * 11 * 0.55;
+
+        let cursorX = x;
+        categories.forEach((cat, i) => {
+            const colTotal = colTotals[i];
+            if (colTotal <= 0) return;
+            const colW = (colTotal / grandTotal) * width;
+            let cursorY = y + height;
+
+            cat.values.forEach((value, j) => {
+                if (value == null || value <= 0) return;
+                const share = (value / colTotal) * 100;
+                const segH = (share / 100) * height;
+                cursorY -= segH;
+                const series = seriesNames[j] ?? `Series ${j + 1}`;
+                const color = palette.colorAt(j);
+                this._datum(this.renderer.rect(cursorX, cursorY, colW, segH, color, { color: '#fff', width: 1 }, {
+                    tooltip: `${cat.label} - ${series}: ${value} (${share.toFixed(1)}%)`,
+                }), { label: cat.label, series });
+            });
+
+            if (colW >= 24) {
+                const labelText = TableChart.fit(String(cat.label), colW - 4, measure);
+                this.renderer.text(labelText, cursorX + colW / 2, y + height + 18, { textAnchor, fontSize: '11px' });
+            }
+            cursorX += colW;
+        });
+
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        if (showLegend && seriesNames.length > 0) {
+            Legend.beside({ x, y, width }, this.renderer.width, legendOpts).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/OhlcChart.js

@@ -0,0 +1,79 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+
+/**
+ * OhlcChart — Open-High-Low-Close financial price bar chart.
+ *
+ * Visualizes asset price action with a vertical high-to-low spine, a left tick
+ * at open, and a right tick at close, shaded green (up) or red (down).
+ */
+export class OhlcChart extends Chart {
+    static chartType = 'ohlc';
+
+    _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 = '#26a69a', downColor = '#ef5350',
+            tickWidth = 5,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        const allHighs = data.map(d => Number(d.high) || 0);
+        const allLows = data.map(d => Number(d.low) || 0);
+        const minVal = Math.min(...allLows);
+        const maxVal = Math.max(...allHighs);
+
+        // Draw axes
+        new Axis().drawYRange(this.renderer, plotBox, minVal, maxVal);
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        const toY = v => y + height - ((v - minVal) / ((maxVal - minVal) || 1)) * height;
+        const N = data.length;
+        const slotW = width / N;
+
+        data.forEach((bar, i) => {
+            const cx = x + i * slotW + slotW / 2;
+            const yHigh = toY(bar.high);
+            const yLow = toY(bar.low);
+            const yOpen = toY(bar.open);
+            const yClose = toY(bar.close);
+            const isUp = bar.close >= bar.open;
+            const color = isUp ? upColor : downColor;
+            const tooltip = `${bar.label}: Open ${bar.open}, High ${bar.high}, Low ${bar.low}, Close ${bar.close}`;
+
+            // Vertical spine (high to low)
+            const spine = this._datum(this.renderer.path(`M${cx},${yHigh} L${cx},${yLow}`, 'none', {
+                color, width: 2,
+            }, { tooltip }), { label: bar.label, ...bar });
+
+            // Left open tick
+            const openTick = this.renderer.path(`M${cx - tickWidth},${yOpen} L${cx},${yOpen}`, 'none', {
+                color, width: 2,
+            });
+
+            // Right close tick
+            const closeTick = this.renderer.path(`M${cx},${yClose} L${cx + tickWidth},${yClose}`, 'none', {
+                color, width: 2,
+            });
+
+            this._wireHoverTransform([spine, openTick, closeTick], { dx: 0, dy: -2 });
+
+            // Category label along X
+            const step = Axis.categoryLabelStep(data.map(d => d.label), width);
+            if (i % step === 0) {
+                this.renderer.text(bar.label, cx, y + height + 20, {
+                    textAnchor: this.renderer.centerTextAnchor, fontSize: '10px', fill: '#333',
+                });
+            }
+        });
+    }
+}

package/src/charting/charts/OutlineChart.js

@@ -35,15 +35,16 @@ export class OutlineChart extends HierarchyChart {
             const accentColor = this._colorForNode(topAncestor, depth);
 
             const g = this.renderer.group();
-            g.appendChild(this.renderer.rect(indentX - 2, rowCenterY - 5, 10, 10, accentColor, null));
+            const addChild = (child) => g?.appendChild?.(child);
+            addChild(this.renderer.rect(indentX - 2, rowCenterY - 5, 10, 10, accentColor, null));
 
             let labelX = indentX + 16;
             if (hasChildren) {
                 const collapsedHere = this.collapsed ? this.collapsed.has(node) : false;
                 const badgeX = indentX + 26;
                 const badge = this.renderer.circle(badgeX, rowCenterY, 7, '#ffffff', { color: '#888', width: 1.2 });
-                g.appendChild(badge);
-                g.appendChild(this.renderer.text(collapsedHere ? '+' : '−', badgeX, rowCenterY, {
+                addChild(badge);
+                addChild(this.renderer.text(collapsedHere ? '+' : '−', badgeX, rowCenterY, {
                     textAnchor: 'middle', verticalAlign: 'middle', fontSize: '10px', fill: '#555', 'pointer-events': 'none',
                 }));
                 badge.style.cursor = 'pointer';
@@ -57,22 +58,23 @@ export class OutlineChart extends HierarchyChart {
                 labelX = badgeX + 16;
             }
 
-            g.appendChild(this.renderer.text(node.label, labelX, rowCenterY, {
+            const labelEl = this._datum(this.renderer.text(node.label, labelX, rowCenterY, {
                 textAnchor: 'start', verticalAlign: 'middle', fontSize: '12px', fill: '#222',
-            }));
+            }), { label: node.label, series: null });
+            addChild(labelEl);
 
             if (hasChildren) {
-                g.appendChild(this.renderer.text(this._formatNodeValue(node), countX, rowCenterY, {
+                addChild(this.renderer.text(this._formatNodeValue(node), countX, rowCenterY, {
                     textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                 }));
             } else if (Number.isFinite(node.value)) {
-                g.appendChild(this.renderer.text(Axis.formatValue(node.value), countX, rowCenterY, {
+                addChild(this.renderer.text(Axis.formatValue(node.value), countX, rowCenterY, {
                     textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                 }));
             } else {
                 const extra = Hierarchy.outlineExtraText(node, structuralKeys);
                 if (extra) {
-                    g.appendChild(this.renderer.text(extra, detailX, rowCenterY, {
+                    addChild(this.renderer.text(extra, detailX, rowCenterY, {
                         textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                     }));
                 }

package/src/charting/charts/ParallelCoordinatesChart.js

@@ -64,6 +64,9 @@ export class ParallelCoordinatesChart extends Chart {
         }
 
         data.forEach((row, rowIndex) => {
+            const catIdx = hasCategories ? categories.indexOf(row.category) : -1;
+            if (catIdx >= 0 && this._dataFilter.has(catIdx)) return;
+
             const pts = [];
             let valid = true;
             dimensions.forEach((dim, i) => {
@@ -85,15 +88,20 @@ export class ParallelCoordinatesChart extends Chart {
                 pathData += `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`;
             });
             const label = row.label || (hasCategories ? row.category : null);
-            this.renderer.path(pathData, 'none', {
+            this._datum(this.renderer.path(pathData, 'none', {
                 color, width: lineWidth,
                 opacity: lineOpacity,
                 tooltip: label ? `${label}: ${dimensions.map(d => `${d}=${this._fmt(row[d])}`).join(', ')}` : undefined,
-            });
+            }), { label: label ?? String(rowIndex) });
         });
 
         if (legendVisible && hasCategories) {
-            const legendItems = categories.map((c, i) => ({ name: c, color: palette.colorAt(i) }));
+            const legendItems = categories.map((c, i) => ({
+                name: c,
+                color: palette.colorAt(i),
+                hidden: this._dataFilter.has(i),
+                dataIndex: i,
+            }));
             Legend.beside({ x, y, width }, this.renderer.width, {
                 items: legendItems,
                 itemHeight: 20, markerSize: 12,

package/src/charting/charts/ParetoChart.js

@@ -0,0 +1,92 @@
+import { Axis } from '../Axis.js';
+import { BarChartBase } from './BarChartBase.js';
+
+/**
+ * ParetoChart — descending bar chart combined with a cumulative percentage line (0–100%)
+ * on a right-hand axis and an 80% cutoff reference line.
+ */
+export class ParetoChart extends BarChartBase {
+    static chartType = 'pareto';
+
+    _setup() {
+        super._setup();
+        if (this.options.width === undefined) {
+            this._plotBox.width = Math.max(80, this._plotBox.width - 36);
+        }
+        const items = (this.data ?? []).filter(d => d && typeof d.value === 'number' && d.value >= 0);
+        this._sorted = this.options.sorted === false ? [...items] : [...items].sort((a, b) => b.value - a.value);
+    }
+
+    _computeMaxValue() {
+        const rawMax = Math.max(0, ...this._sorted.map(d => d.value)) || 1;
+        return this._drawYAxis(rawMax, 0);
+    }
+
+    _renderBars(maxValue) {
+        const items = this._sorted;
+        if (items.length === 0) return;
+        const { x, y, width, height } = this._plotBox;
+        const {
+            barColor = '#3b82f6',
+            lineColor = '#dc2626',
+            cutoff = 80,
+            colors,
+        } = this.options;
+        const { bandWidth, margin } = this._bandScale(items.length);
+        const labelStep = Axis.categoryLabelStep(items.map(d => d.label), width);
+        const textAnchor = this.renderer.centerTextAnchor;
+        const total = items.reduce((sum, d) => sum + d.value, 0) || 1;
+
+        // Right-hand percentage axis (0%..100%).
+        const rightX = x + width;
+        this.renderer.path(`M${rightX},${y} L${rightX},${y + height}`, 'none', { color: '#64748b', width: 1 });
+        for (const pct of [0, 20, 40, 60, 80, 100]) {
+            const py = y + height - (pct / 100) * height;
+            this.renderer.path(`M${rightX},${py} L${rightX + 4},${py}`, 'none', { color: '#64748b', width: 1 });
+            this.renderer.text(`${pct}%`, rightX + 8, py + 3, { textAnchor: 'start', fontSize: '10px', fill: '#475569' });
+        }
+
+        // Dashed 80% cutoff reference line.
+        if (cutoff > 0 && cutoff < 100) {
+            const cutY = y + height - (cutoff / 100) * height;
+            this.renderer.path(`M${x},${cutY} L${rightX},${cutY}`, 'none', {
+                color: lineColor, width: 1, dashArray: '4,4',
+            });
+        }
+
+        let running = 0;
+        const linePts = [];
+        items.forEach((d, i) => {
+            running += d.value;
+            const cumPct = (running / total) * 100;
+            const color = colors ? this._palette.colorAt(i) : barColor;
+            const bar = this._barSpan(d.value);
+            const barX = x + i * (bandWidth + margin);
+            const cx = barX + bandWidth / 2;
+            const py = y + height - (cumPct / 100) * height;
+            linePts.push({ cx, py, label: d.label, value: d.value, cumPct });
+
+            this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, {
+                bar: true,
+                dataIndex: i,
+                tooltip: `${d.label}: ${d.value} (${cumPct.toFixed(1)}% cumulative)`,
+            }), { label: d.label });
+
+            if (i % labelStep === 0) {
+                this.renderer.text(d.label, cx, y + height + 20, { textAnchor });
+            }
+        });
+
+        if (linePts.length > 0) {
+            const dPath = 'M' + linePts.map(p => `${p.cx},${p.py}`).join(' L');
+            this.renderer.path(dPath, 'none', { color: lineColor, width: 2 });
+            if (typeof this.renderer.circle === 'function') {
+                linePts.forEach(p => {
+                    this._datum(this.renderer.circle(p.cx, p.py, 3.5, lineColor, { color: '#fff', width: 1.5 }, {
+                        tooltip: `${p.label}: ${p.cumPct.toFixed(1)}% cumulative`,
+                    }), { label: p.label });
+                });
+            }
+        }
+    }
+}