photon-grid-core 0.0.2 → 1.0.0

package/chart/chart-renderer.js

@@ -1,3 +1,4 @@
+import { resolveChartTheme } from './chart-theme';
 const DEFAULTS = {
     type: 'column-grouped',
     width: 600,
@@ -9,23 +10,55 @@ const DEFAULTS = {
     barWidth: 0.75,
     lineWidth: 2,
     smooth: false,
-    fontFamily: 'system-ui, sans-serif',
+    fontFamily: '',
     fontSize: 12,
-    textColor: '#374151',
-    gridColor: '#e5e7eb',
+    textColor: '',
+    gridColor: '',
     backgroundColor: 'transparent',
     animationDuration: 400,
+    title: '',
+    titleColor: '',
+    titleFontSize: 15,
+    titleAlign: 'left',
+    subtitle: '',
+    subtitleColor: '',
+    subtitleFontSize: 12,
+    subtitleAlign: 'left',
+    legendPosition: 'bottom',
+    xAxisTitle: '',
+    yAxisTitle: '',
+    axisTitleColor: '',
+    axisLabelColor: '',
+    axisLineColor: '',
+    showXTicks: true,
+    showYTicks: true,
+    showXLabels: true,
+    showYLabels: true,
+    seriesColors: {},
+    strokeWidth: 0,
+    fillOpacity: 0,
+    compact: false,
 };
 const APEX_COLORS = [
     '#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0',
     '#3F51B5', '#03A9F4', '#4CAF50', '#F9CE1D', '#FF9800',
 ];
-function assignColors(data) {
+/**
+ * Assigns a concrete color to every dataset. Precedence: an explicit override
+ * in `seriesColors` (keyed by the dataset label), then a color already on the
+ * dataset, then the theme `palette` cycled by index.
+ *
+ * @param data - Source chart data (datasets may lack colors).
+ * @param palette - Theme-resolved series palette.
+ * @param seriesColors - Per-label color overrides from the chart model.
+ */
+function assignColors(data, palette, seriesColors) {
+    const pal = palette.length > 0 ? palette : APEX_COLORS;
     return {
         labels: data.labels,
         datasets: data.datasets.map((ds, i) => ({
             ...ds,
-            color: ds.color ?? APEX_COLORS[i % APEX_COLORS.length],
+            color: seriesColors[ds.label] ?? ds.color ?? pal[i % pal.length],
         })),
     };
 }
@@ -45,6 +78,12 @@ export class ChartRenderer {
         this.seriesScales = [];
         /** Active RAF IDs for per-series toggle animations, keyed by dataset index. */
         this.seriesToggleRafs = new Map();
+        /**
+         * Theme colors/palette resolved once per {@link render} / {@link toggleSeries}
+         * call and reused across every animation and hover frame — never re-resolved
+         * per frame (that would force layout via `getComputedStyle`).
+         */
+        this.theme = null;
         this.canvas = canvas;
         const ctx = canvas.getContext('2d');
         if (!ctx)
@@ -52,11 +91,30 @@ export class ChartRenderer {
         this.ctx = ctx;
         this.attachEvents();
     }
+    /**
+     * Resolves theme tokens once and back-fills any color/font option the caller
+     * left blank (empty string) with the theme value. Explicit overrides win over
+     * theme defaults. Mutates `options` in place and caches the resolved theme.
+     */
+    prepareOptions(options) {
+        const theme = resolveChartTheme(this.canvas);
+        this.theme = theme;
+        if (!options.fontFamily)
+            options.fontFamily = theme.fontFamily;
+        options.textColor = options.axisLabelColor || options.textColor || theme.textColor;
+        options.gridColor = options.axisLineColor || options.gridColor || theme.gridColor;
+    }
+    /** Theme palette color for a given series/slice index, cycling as needed. */
+    paletteColor(i) {
+        const pal = this.theme?.palette ?? APEX_COLORS;
+        return pal[i % pal.length];
+    }
     render(data, opts = { type: 'column-grouped' }) {
         const options = { ...DEFAULTS, ...opts };
         this.canvas.width = options.width;
         this.canvas.height = options.height;
-        const coloredData = assignColors(data);
+        this.prepareOptions(options);
+        const coloredData = assignColors(data, this.theme.palette, options.seriesColors);
         this.lastData = coloredData;
         this.lastOptions = options;
         // Full re-render: reset every series to fully visible
@@ -98,7 +156,8 @@ export class ChartRenderer {
      */
     toggleSeries(index, toVisible, data, opts = { type: 'column-grouped' }) {
         const options = { ...DEFAULTS, ...opts };
-        const coloredData = assignColors(data);
+        this.prepareOptions(options);
+        const coloredData = assignColors(data, this.theme.palette, options.seriesColors);
         this.lastData = coloredData;
         this.lastOptions = options;
         while (this.seriesScales.length < coloredData.datasets.length)
@@ -276,7 +335,7 @@ export class ChartRenderer {
         const { ctx } = this;
         const legendH = opts.showLegend && data.datasets.length > 1 ? 40 : 0;
         const plotLeft = 80;
-        const plotTop = 10;
+        const plotTop = 10 + this.titleBandHeight(opts);
         const plotRight = opts.width - 20;
         const plotBottom = opts.height - legendH - 30;
         const plotH = plotBottom - plotTop;
@@ -420,12 +479,60 @@ export class ChartRenderer {
         };
         this.rafId = requestAnimationFrame(tick);
     }
+    /**
+     * Vertical space (px) reserved at the top of the canvas for the title and
+     * subtitle bands. Returns 0 when neither is set so no space is wasted.
+     */
+    titleBandHeight(opts) {
+        let h = 0;
+        if (opts.title)
+            h += opts.titleFontSize + 8;
+        if (opts.subtitle)
+            h += opts.subtitleFontSize + 6;
+        return h > 0 ? h + 6 : 0;
+    }
+    /** Whether a shared series legend should be drawn. */
+    legendActive(opts, data) {
+        return opts.showLegend && data.datasets.length > 1;
+    }
+    /**
+     * Whether the legend may be placed on a side (left/right). Only cartesian
+     * charts (which route layout through {@link getPlotArea}) reserve side space;
+     * pie/polar/funnel/bar keep the legend on the bottom to avoid overlap.
+     */
+    supportsSideLegend(opts) {
+        const type = opts.type;
+        return type.startsWith('column') || type === 'line' || type === 'area' || type === 'scatter';
+    }
+    /** Effective legend position, clamped to bottom for non-cartesian charts. */
+    effectiveLegendPosition(opts) {
+        if (!this.supportsSideLegend(opts))
+            return 'bottom';
+        return opts.legendPosition;
+    }
     getPlotArea(opts, data) {
-        const legendH = opts.showLegend && data.datasets.length > 1 ? 40 : 0;
-        const plotLeft = 65;
-        const plotTop = 20;
-        const plotRight = opts.width - 20;
-        const plotBottom = opts.height - legendH - 36;
+        const legendOn = this.legendActive(opts, data);
+        const pos = this.effectiveLegendPosition(opts);
+        const band = ChartRenderer.LEGEND_BAND;
+        const side = ChartRenderer.LEGEND_SIDE;
+        const titleH = this.titleBandHeight(opts);
+        const xTitleH = opts.xAxisTitle ? opts.fontSize + 10 : 0;
+        const yTitleW = opts.yAxisTitle ? opts.fontSize + 12 : 0;
+        // Compact previews use a uniform padding gutter so the plot fills the canvas.
+        let plotTop = opts.compact ? opts.padding + titleH : 20 + titleH;
+        let plotBottom = opts.compact ? opts.height - opts.padding : opts.height - 36 - xTitleH;
+        let plotLeft = opts.compact ? opts.padding : 65 + yTitleW;
+        let plotRight = opts.width - (opts.compact ? opts.padding : 20);
+        if (legendOn) {
+            if (pos === 'top')
+                plotTop += band;
+            else if (pos === 'bottom')
+                plotBottom -= band;
+            else if (pos === 'left')
+                plotLeft += side;
+            else if (pos === 'right')
+                plotRight -= side;
+        }
         return {
             plotLeft,
             plotTop,
@@ -433,7 +540,7 @@ export class ChartRenderer {
             plotBottom,
             plotW: plotRight - plotLeft,
             plotH: plotBottom - plotTop,
-            legendH,
+            legendH: legendOn && (pos === 'top' || pos === 'bottom') ? band : 0,
         };
     }
     draw(data, options, progress = 1) {
@@ -489,10 +596,81 @@ export class ChartRenderer {
                 this.drawColumnGrouped(data, options, progress);
                 break;
         }
-        if (options.showLegend && data.datasets.length > 1) {
+        if (this.supportsSideLegend(options)) {
+            this.drawAxisTitles(options);
+        }
+        this.drawTitleBlock(options);
+        if (this.legendActive(options, data)) {
             this.drawLegend(data, options);
         }
     }
+    /**
+     * Draws the chart title and subtitle in the reserved top band, honoring the
+     * configured color (falling back to theme) and alignment. No-op when both are
+     * empty.
+     */
+    drawTitleBlock(opts) {
+        if (!opts.title && !opts.subtitle)
+            return;
+        const { ctx } = this;
+        const theme = this.theme;
+        ctx.save();
+        ctx.textBaseline = 'alphabetic';
+        let y = 20;
+        if (opts.title) {
+            ctx.font = `600 ${opts.titleFontSize}px ${opts.fontFamily}`;
+            ctx.fillStyle = opts.titleColor || theme?.textColor || opts.textColor;
+            const x = this.alignedX(opts.titleAlign, opts.width);
+            ctx.textAlign = opts.titleAlign;
+            ctx.fillText(opts.title, x, y);
+            y += opts.titleFontSize + 4;
+        }
+        if (opts.subtitle) {
+            ctx.font = `${opts.subtitleFontSize}px ${opts.fontFamily}`;
+            ctx.fillStyle = opts.subtitleColor || theme?.mutedColor || opts.textColor;
+            const x = this.alignedX(opts.subtitleAlign, opts.width);
+            ctx.textAlign = opts.subtitleAlign;
+            ctx.fillText(opts.subtitle, x, y + opts.subtitleFontSize);
+        }
+        ctx.restore();
+    }
+    /** X coordinate for a given horizontal alignment across the canvas width. */
+    alignedX(align, width) {
+        if (align === 'center')
+            return width / 2;
+        if (align === 'right')
+            return width - 20;
+        return 20;
+    }
+    /**
+     * Draws the x- and y-axis titles (cartesian charts only). The y-axis title is
+     * rotated −90° and centered along the left margin; the x-axis title sits below
+     * the category labels.
+     */
+    drawAxisTitles(opts) {
+        if (!opts.xAxisTitle && !opts.yAxisTitle)
+            return;
+        const { ctx } = this;
+        const color = opts.axisTitleColor || this.theme?.textColor || opts.textColor;
+        ctx.save();
+        ctx.fillStyle = color;
+        ctx.font = `600 ${opts.fontSize}px ${opts.fontFamily}`;
+        if (opts.xAxisTitle) {
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'bottom';
+            ctx.fillText(opts.xAxisTitle, opts.width / 2, opts.height - 4);
+        }
+        if (opts.yAxisTitle) {
+            ctx.save();
+            ctx.translate(14, opts.height / 2);
+            ctx.rotate(-Math.PI / 2);
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'top';
+            ctx.fillText(opts.yAxisTitle, 0, 0);
+            ctx.restore();
+        }
+        ctx.restore();
+    }
     // ── Column Grouped ──────────────────────────────────────────────────────────
     drawColumnGrouped(data, opts, progress) {
         const { ctx } = this;
@@ -559,28 +737,43 @@ export class ChartRenderer {
     drawColumnStacked(data, opts, progress) {
         const { ctx } = this;
         const { plotLeft, plotTop, plotBottom, plotRight, plotW, plotH } = this.getPlotArea(opts, data);
+        // Match the grouped chart: with multiple series, scale each series to its own
+        // maximum so a small-scale series (e.g. Age next to Salary) stays visible
+        // instead of collapsing to a sub-pixel sliver. Each series then occupies an
+        // equal band of the plot height. Falls back to true absolute stacking for a
+        // single series.
+        const nD = data.datasets.length;
+        const usePerSeries = nD > 1;
+        const seriesMaxes = data.datasets.map((ds) => this.niceMax(Math.max(...ds.data, 0)));
         const stackTotals = data.labels.map((_, gi) => data.datasets.reduce((sum, ds) => sum + (ds.data[gi] ?? 0), 0));
-        const rawMax = Math.max(...stackTotals, 0);
-        const maxVal = this.niceMax(rawMax);
-        if (opts.showGrid)
-            this.drawGridLines(plotLeft, plotTop, plotW, plotH, maxVal, opts);
-        else
+        const maxVal = this.niceMax(Math.max(...stackTotals, 0));
+        if (opts.showGrid) {
+            if (usePerSeries)
+                this.drawGridLinesRelative(plotLeft, plotTop, plotW, plotH, opts);
+            else
+                this.drawGridLines(plotLeft, plotTop, plotW, plotH, maxVal, opts);
+        }
+        else {
             this.drawAxes(plotLeft, plotTop, plotRight, plotBottom, opts);
+        }
         const nGroups = data.labels.length;
         const groupWidth = plotW / Math.max(nGroups, 1);
         const barW = groupWidth * opts.barWidth;
+        const band = plotH / Math.max(nD, 1);
         const labelStep = this.getLabelStep(nGroups, plotW, opts.fontSize);
         const labelAlpha = Math.min(1, progress * 2.5);
         for (let gi = 0; gi < nGroups; gi++) {
             const barX = plotLeft + gi * groupWidth + (groupWidth - barW) / 2;
             let currentY = plotBottom;
-            for (let di = 0; di < data.datasets.length; di++) {
+            for (let di = 0; di < nD; di++) {
                 const value = data.datasets[di].data[gi] ?? 0;
-                const segH = (value / maxVal) * plotH * progress;
+                const segH = (usePerSeries
+                    ? (value / (seriesMaxes[di] || 1)) * band
+                    : (value / maxVal) * plotH) * progress;
                 const segY = currentY - segH;
                 ctx.fillStyle = data.datasets[di].color ?? APEX_COLORS[di % APEX_COLORS.length];
                 ctx.beginPath();
-                if (di === data.datasets.length - 1) {
+                if (di === nD - 1) {
                     ctx.roundRect(barX, segY, Math.max(barW, 1), Math.max(segH, 0), [3, 3, 0, 0]);
                 }
                 else {
@@ -607,22 +800,30 @@ export class ChartRenderer {
             this.drawGridLines(plotLeft, plotTop, plotW, plotH, 100, opts);
         else
             this.drawAxes(plotLeft, plotTop, plotRight, plotBottom, opts);
+        // Weight each series by its own maximum so a small-scale series keeps a
+        // visible share of the 100% bar instead of rounding to ~0%.
+        const nD = data.datasets.length;
+        const usePerSeries = nD > 1;
+        const seriesMaxes = data.datasets.map((ds) => this.niceMax(Math.max(...ds.data, 0)));
         const nGroups = data.labels.length;
         const groupWidth = plotW / Math.max(nGroups, 1);
         const barW = groupWidth * opts.barWidth;
         const labelStep = this.getLabelStep(nGroups, plotW, opts.fontSize);
         const labelAlpha = Math.min(1, progress * 2.5);
         for (let gi = 0; gi < nGroups; gi++) {
-            const total = data.datasets.reduce((sum, ds) => sum + (ds.data[gi] ?? 0), 0) || 1;
+            const shares = data.datasets.map((ds, di) => {
+                const value = ds.data[gi] ?? 0;
+                return usePerSeries ? value / (seriesMaxes[di] || 1) : value;
+            });
+            const total = shares.reduce((sum, s) => sum + s, 0) || 1;
             const barX = plotLeft + gi * groupWidth + (groupWidth - barW) / 2;
             let currentY = plotBottom;
-            for (let di = 0; di < data.datasets.length; di++) {
-                const value = data.datasets[di].data[gi] ?? 0;
-                const segH = (value / total) * plotH * progress;
+            for (let di = 0; di < nD; di++) {
+                const segH = (shares[di] / total) * plotH * progress;
                 const segY = currentY - segH;
                 ctx.fillStyle = data.datasets[di].color ?? APEX_COLORS[di % APEX_COLORS.length];
                 ctx.beginPath();
-                if (di === data.datasets.length - 1) {
+                if (di === nD - 1) {
                     ctx.roundRect(barX, segY, Math.max(barW, 1), Math.max(segH, 0), [3, 3, 0, 0]);
                 }
                 else {
@@ -645,11 +846,11 @@ export class ChartRenderer {
     drawBarGrouped(data, opts, progress) {
         const { ctx } = this;
         const legendH = opts.showLegend && data.datasets.length > 1 ? 40 : 0;
-        const labelAreaW = 80;
+        const labelAreaW = opts.compact ? opts.padding : 80;
         const plotLeft = labelAreaW;
-        const plotTop = 10;
-        const plotRight = opts.width - 20;
-        const plotBottom = opts.height - legendH - 30;
+        const plotTop = (opts.compact ? opts.padding : 10) + this.titleBandHeight(opts);
+        const plotRight = opts.width - (opts.compact ? opts.padding : 20);
+        const plotBottom = opts.height - legendH - (opts.compact ? opts.padding : 30);
         const plotW = plotRight - plotLeft;
         const plotH = plotBottom - plotTop;
         const nDatasets = data.datasets.length;
@@ -723,13 +924,16 @@ export class ChartRenderer {
     drawBarStacked(data, opts, progress) {
         const { ctx } = this;
         const legendH = opts.showLegend && data.datasets.length > 1 ? 40 : 0;
-        const labelAreaW = 80;
+        const labelAreaW = opts.compact ? opts.padding : 80;
         const plotLeft = labelAreaW;
-        const plotTop = 10;
-        const plotRight = opts.width - 20;
-        const plotBottom = opts.height - legendH - 30;
+        const plotTop = (opts.compact ? opts.padding : 10) + this.titleBandHeight(opts);
+        const plotRight = opts.width - (opts.compact ? opts.padding : 20);
+        const plotBottom = opts.height - legendH - (opts.compact ? opts.padding : 30);
         const plotW = plotRight - plotLeft;
         const plotH = plotBottom - plotTop;
+        const nD = data.datasets.length;
+        const usePerSeries = nD > 1;
+        const seriesMaxes = data.datasets.map((ds) => this.niceMax(Math.max(...ds.data, 0)));
         const stackTotals = data.labels.map((_, gi) => data.datasets.reduce((sum, ds) => sum + (ds.data[gi] ?? 0), 0));
         const rawMax = Math.max(...stackTotals, 0);
         const maxVal = this.niceMax(rawMax);
@@ -748,7 +952,9 @@ export class ChartRenderer {
                 ctx.fillStyle = opts.textColor;
                 ctx.font = `${opts.fontSize}px ${opts.fontFamily}`;
                 ctx.textAlign = 'center';
-                ctx.fillText(this.formatNum((maxVal * i) / steps), x, plotBottom + 14);
+                // Per-series normalization uses a relative (0–100%) axis, like grouped.
+                const xLabel = usePerSeries ? `${Math.round((100 * i) / steps)}%` : this.formatNum((maxVal * i) / steps);
+                ctx.fillText(xLabel, x, plotBottom + 14);
             }
             ctx.setLineDash([]);
             ctx.strokeStyle = opts.gridColor;
@@ -768,16 +974,19 @@ export class ChartRenderer {
         const nGroups = data.labels.length;
         const groupH = plotH / Math.max(nGroups, 1);
         const barH = groupH * opts.barWidth;
+        const band = plotW / Math.max(nD, 1);
         const labelStep = this.getLabelStep(nGroups, plotH, opts.fontSize);
         for (let gi = 0; gi < nGroups; gi++) {
             const barY = plotTop + gi * groupH + (groupH - barH) / 2;
             let currentX = plotLeft;
-            for (let di = 0; di < data.datasets.length; di++) {
+            for (let di = 0; di < nD; di++) {
                 const value = data.datasets[di].data[gi] ?? 0;
-                const segW = (value / maxVal) * plotW * progress;
+                const segW = (usePerSeries
+                    ? (value / (seriesMaxes[di] || 1)) * band
+                    : (value / maxVal) * plotW) * progress;
                 ctx.fillStyle = data.datasets[di].color ?? APEX_COLORS[di % APEX_COLORS.length];
                 ctx.beginPath();
-                if (di === data.datasets.length - 1) {
+                if (di === nD - 1) {
                     ctx.roundRect(currentX, barY, Math.max(segW, 0), Math.max(barH, 1), [0, 3, 3, 0]);
                 }
                 else {
@@ -800,11 +1009,11 @@ export class ChartRenderer {
     drawBar100Stacked(data, opts, progress) {
         const { ctx } = this;
         const legendH = opts.showLegend && data.datasets.length > 1 ? 40 : 0;
-        const labelAreaW = 80;
+        const labelAreaW = opts.compact ? opts.padding : 80;
         const plotLeft = labelAreaW;
-        const plotTop = 10;
-        const plotRight = opts.width - 20;
-        const plotBottom = opts.height - legendH - 30;
+        const plotTop = (opts.compact ? opts.padding : 10) + this.titleBandHeight(opts);
+        const plotRight = opts.width - (opts.compact ? opts.padding : 20);
+        const plotBottom = opts.height - legendH - (opts.compact ? opts.padding : 30);
         const plotW = plotRight - plotLeft;
         const plotH = plotBottom - plotTop;
         const labelAlpha = Math.min(1, progress * 2.5);
@@ -843,13 +1052,21 @@ export class ChartRenderer {
         const groupH = plotH / Math.max(nGroups, 1);
         const barH = groupH * opts.barWidth;
         const labelStep = this.getLabelStep(nGroups, plotH, opts.fontSize);
+        // Weight each series by its own maximum so a small-scale series keeps a
+        // visible share of the 100% bar instead of rounding to ~0%.
+        const nD = data.datasets.length;
+        const usePerSeries = nD > 1;
+        const seriesMaxes = data.datasets.map((ds) => this.niceMax(Math.max(...ds.data, 0)));
         for (let gi = 0; gi < nGroups; gi++) {
-            const total = data.datasets.reduce((sum, ds) => sum + (ds.data[gi] ?? 0), 0) || 1;
+            const shares = data.datasets.map((ds, di) => {
+                const value = ds.data[gi] ?? 0;
+                return usePerSeries ? value / (seriesMaxes[di] || 1) : value;
+            });
+            const total = shares.reduce((sum, s) => sum + s, 0) || 1;
             const barY = plotTop + gi * groupH + (groupH - barH) / 2;
             let currentX = plotLeft;
-            for (let di = 0; di < data.datasets.length; di++) {
-                const value = data.datasets[di].data[gi] ?? 0;
-                const segW = (value / total) * plotW * progress;
+            for (let di = 0; di < nD; di++) {
+                const segW = (shares[di] / total) * plotW * progress;
                 ctx.fillStyle = data.datasets[di].color ?? APEX_COLORS[di % APEX_COLORS.length];
                 ctx.beginPath();
                 if (di === data.datasets.length - 1) {
@@ -892,7 +1109,7 @@ export class ChartRenderer {
             ctx.rect(plotLeft, plotTop, plotW, plotH + 1);
             ctx.clip();
             ctx.strokeStyle = ds.color ?? APEX_COLORS[0];
-            ctx.lineWidth = opts.lineWidth;
+            ctx.lineWidth = opts.strokeWidth > 0 ? opts.strokeWidth : opts.lineWidth;
             ctx.lineCap = 'round';
             ctx.lineJoin = 'round';
             ctx.beginPath();
@@ -960,10 +1177,10 @@ export class ChartRenderer {
             ctx.lineTo(getX(Math.min(visibleCount, nPoints) - 1), plotBottom);
             ctx.lineTo(getX(0), plotBottom);
             ctx.closePath();
-            ctx.fillStyle = color + '26';
+            ctx.fillStyle = color + this.alphaHex(opts.fillOpacity > 0 ? opts.fillOpacity : 0.15);
             ctx.fill();
             ctx.strokeStyle = color;
-            ctx.lineWidth = opts.lineWidth;
+            ctx.lineWidth = opts.strokeWidth > 0 ? opts.strokeWidth : opts.lineWidth;
             ctx.lineCap = 'round';
             ctx.lineJoin = 'round';
             ctx.beginPath();
@@ -994,15 +1211,15 @@ export class ChartRenderer {
         const { ctx } = this;
         const legendH = opts.showLegend ? 40 : 0;
         const cx = opts.width / 2;
-        const cy = (opts.height - legendH) / 2;
-        const radius = Math.min(opts.width, opts.height - legendH) / 2 - 20;
+        const cy = this.titleBandHeight(opts) + (opts.height - legendH - this.titleBandHeight(opts)) / 2;
+        const radius = Math.min(opts.width, opts.height - legendH - this.titleBandHeight(opts)) / 2 - (opts.compact ? opts.padding : 20);
         const innerRadius = isDoughnut ? radius * 0.5 : 0;
         const values = data.datasets[0]?.data ?? [];
         const total = values.reduce((a, b) => a + b, 0) || 1;
         let startAngle = -Math.PI / 2;
         for (let i = 0; i < values.length; i++) {
             const sliceAngle = (values[i] / total) * Math.PI * 2 * progress;
-            const color = APEX_COLORS[i % APEX_COLORS.length];
+            const color = this.paletteColor(i);
             ctx.beginPath();
             ctx.moveTo(cx, cy);
             ctx.arc(cx, cy, radius, startAngle, startAngle + sliceAngle);
@@ -1090,8 +1307,8 @@ export class ChartRenderer {
         const { ctx } = this;
         const legendH = opts.showLegend && data.datasets.length > 1 ? 40 : 0;
         const cx = opts.width / 2;
-        const cy = (opts.height - legendH) / 2;
-        const radius = Math.min(opts.width, opts.height - legendH) / 2 - 30;
+        const cy = this.titleBandHeight(opts) + (opts.height - legendH - this.titleBandHeight(opts)) / 2;
+        const radius = Math.min(opts.width, opts.height - legendH - this.titleBandHeight(opts)) / 2 - (opts.compact ? opts.padding : 30);
         const labels = data.labels;
         const nSpokes = labels.length;
         if (nSpokes < 3)
@@ -1164,12 +1381,12 @@ export class ChartRenderer {
         const maxVal = Math.max(...values, 0) || 1;
         const n = labels.length;
         const legendH = opts.showLegend && data.datasets.length > 1 ? 40 : 0;
-        const labelAreaW = 90;
+        const labelAreaW = opts.compact ? opts.padding : 90;
         const plotLeft = labelAreaW;
-        const plotRight = opts.width - 20;
+        const plotRight = opts.width - (opts.compact ? opts.padding : 20);
         const plotWidth = plotRight - plotLeft;
-        const plotTop = 10;
-        const plotBottom = opts.height - legendH - 10;
+        const plotTop = (opts.compact ? opts.padding : 10) + this.titleBandHeight(opts);
+        const plotBottom = opts.height - legendH - (opts.compact ? opts.padding : 10);
         const plotH = plotBottom - plotTop;
         const itemH = Math.max((plotH / Math.max(n, 1)) - 2, 1);
         const cx = plotLeft + plotWidth / 2;
@@ -1179,7 +1396,7 @@ export class ChartRenderer {
             const barW = pct * plotWidth * progress;
             const barX = cx - barW / 2;
             const barY = plotTop + i * (itemH + 2);
-            const color = APEX_COLORS[i % APEX_COLORS.length];
+            const color = this.paletteColor(i);
             ctx.fillStyle = color;
             ctx.beginPath();
             ctx.roundRect(barX, barY, Math.max(barW, 0), itemH, 3);
@@ -1210,10 +1427,12 @@ export class ChartRenderer {
             ctx.moveTo(left, y);
             ctx.lineTo(left + width, y);
             ctx.stroke();
-            ctx.fillStyle = opts.textColor;
-            ctx.font = `${opts.fontSize}px ${opts.fontFamily}`;
-            ctx.textAlign = 'right';
-            ctx.fillText(this.formatNum((maxVal * i) / steps), left - 6, y + 4);
+            if (opts.showYLabels) {
+                ctx.fillStyle = opts.textColor;
+                ctx.font = `${opts.fontSize}px ${opts.fontFamily}`;
+                ctx.textAlign = 'right';
+                ctx.fillText(this.formatNum((maxVal * i) / steps), left - 6, y + 4);
+            }
         }
         ctx.setLineDash([]);
         ctx.strokeStyle = opts.gridColor;
@@ -1243,10 +1462,12 @@ export class ChartRenderer {
             ctx.moveTo(left, y);
             ctx.lineTo(left + width, y);
             ctx.stroke();
-            ctx.fillStyle = opts.textColor;
-            ctx.font = `${opts.fontSize}px ${opts.fontFamily}`;
-            ctx.textAlign = 'right';
-            ctx.fillText(`${Math.round((100 * i) / steps)}%`, left - 6, y + 4);
+            if (opts.showYLabels) {
+                ctx.fillStyle = opts.textColor;
+                ctx.font = `${opts.fontSize}px ${opts.fontFamily}`;
+                ctx.textAlign = 'right';
+                ctx.fillText(`${Math.round((100 * i) / steps)}%`, left - 6, y + 4);
+            }
         }
         ctx.setLineDash([]);
         ctx.strokeStyle = opts.gridColor;
@@ -1262,8 +1483,18 @@ export class ChartRenderer {
     }
     // ── Legend ──────────────────────────────────────────────────────────────────
     drawLegend(data, opts) {
+        const position = this.effectiveLegendPosition(opts);
+        if (position === 'left' || position === 'right') {
+            this.drawLegendVertical(data, opts, position);
+        }
+        else {
+            this.drawLegendHorizontal(data, opts, position);
+        }
+    }
+    /** Horizontal legend row along the top or bottom edge. */
+    drawLegendHorizontal(data, opts, position) {
         const { ctx } = this;
-        const y = opts.height - 20;
+        const y = position === 'top' ? this.titleBandHeight(opts) + 22 : opts.height - 16;
         const totalItems = data.datasets.length;
         const itemWidth = opts.width / totalItems;
         ctx.font = `${opts.fontSize}px ${opts.fontFamily}`;
@@ -1271,8 +1502,29 @@ export class ChartRenderer {
         ctx.textBaseline = 'middle';
         for (let i = 0; i < totalItems; i++) {
             const x = i * itemWidth + (itemWidth - 80) / 2;
-            const color = data.datasets[i].color ?? APEX_COLORS[i % APEX_COLORS.length];
-            ctx.fillStyle = color;
+            ctx.fillStyle = data.datasets[i].color ?? this.paletteColor(i);
+            ctx.beginPath();
+            ctx.roundRect(x, y - 5, 12, 10, 2);
+            ctx.fill();
+            ctx.fillStyle = opts.textColor;
+            ctx.fillText(this.truncate(data.datasets[i].label, 14), x + 16, y);
+        }
+        ctx.textBaseline = 'alphabetic';
+    }
+    /** Vertical legend stack along the left or right edge (cartesian charts only). */
+    drawLegendVertical(data, opts, position) {
+        const { ctx } = this;
+        const rowH = opts.fontSize + 10;
+        const totalItems = data.datasets.length;
+        const blockH = totalItems * rowH;
+        const startY = Math.max(this.titleBandHeight(opts) + 24, (opts.height - blockH) / 2);
+        const x = position === 'left' ? 12 : opts.width - ChartRenderer.LEGEND_SIDE + 12;
+        ctx.font = `${opts.fontSize}px ${opts.fontFamily}`;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        for (let i = 0; i < totalItems; i++) {
+            const y = startY + i * rowH + rowH / 2;
+            ctx.fillStyle = data.datasets[i].color ?? this.paletteColor(i);
             ctx.beginPath();
             ctx.roundRect(x, y - 5, 12, 10, 2);
             ctx.fill();
@@ -1317,6 +1569,15 @@ export class ChartRenderer {
     truncate(str, max) {
         return str.length > max ? str.slice(0, max - 1) + '…' : str;
     }
+    /**
+     * Converts a 0–1 opacity into a two-digit hex alpha suffix for `#rrggbb` +
+     * `aa` color strings. Clamped to the valid range so out-of-bounds model values
+     * never produce a malformed color.
+     */
+    alphaHex(opacity) {
+        const clamped = Math.max(0, Math.min(1, opacity));
+        return Math.round(clamped * 255).toString(16).padStart(2, '0');
+    }
     formatNum(n) {
         if (n >= 1e6)
             return (n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 1) + 'M';
@@ -1327,4 +1588,6 @@ export class ChartRenderer {
         return String(Math.round(n));
     }
 }
+ChartRenderer.LEGEND_BAND = 40;
+ChartRenderer.LEGEND_SIDE = 120;
 //# sourceMappingURL=chart-renderer.js.map