@rowsncolumns/charts 28.1.2 → 28.1.5

package/dist/esm/utils/legend-layout.js

@@ -0,0 +1,299 @@
+// Legend band reservation (rowsncolumns/spreadsheet#986).
+//
+// Excel and Google Sheets never let the legend paint over the plot: for
+// every legend position the chart reserves a band of its own — legend
+// outermost, then the axis title, then the tick labels, then the plot
+// area shrinks to whatever is left. Both renderers here used to pin the
+// legend a fixed distance from the frame edge and leave the plot margin
+// constant, so a bottom legend sat on the category labels and hid the
+// horizontal axis title (and a top legend crowded the chart title).
+//
+// This module estimates the legend's rendered size from its actual items
+// (count, label widths, font size, wrapping into rows / columns) and turns
+// that into renderer geometry: the echarts `grid` + legend offsets +
+// category-axis `nameGap`, and the plotly `margin` + paper-relative legend
+// anchor. The estimate is deliberately generous — a few px of slack beats
+// a legend on top of the labels.
+/** Space kept between neighbouring bands (legend ↔ axis title ↔ labels). */
+export const BAND_GAP = 8;
+/** Inset of the outermost band from the chart frame. */
+export const EDGE_PAD = 10;
+/** echarts `legend.padding` default used by both adapters' legend boxes. */
+export const LEGEND_PADDING = 10;
+/** echarts `legend.itemGap` default. */
+export const LEGEND_ITEM_GAP = 10;
+/** Gap echarts leaves between a legend icon and its text. */
+const LEGEND_ICON_TEXT_GAP = 5;
+/** Approximate rendered width of `text` at `fontSize` (canvas when available). */
+export const measureTextWidth = (text, fontSize) => {
+    if (typeof document !== "undefined") {
+        const ctx = document.createElement("canvas").getContext("2d");
+        if (ctx) {
+            ctx.font = `${fontSize}px sans-serif`;
+            const width = ctx.measureText(text).width;
+            if (Number.isFinite(width) && width > 0)
+                return width;
+        }
+    }
+    // Headless fallback: ~0.6em per character.
+    return text.length * fontSize * 0.6;
+};
+/**
+ * Estimate the legend's rendered box from its items. Horizontal legends
+ * pack items greedily into rows no wider than the frame; vertical legends
+ * stack items and spill into a new column when taller than the frame.
+ */
+export const estimateLegendBand = ({ labels, fontSize = 12, itemWidth = 10, itemGap = LEGEND_ITEM_GAP, padding = LEGEND_PADDING, orientation, availableWidth, availableHeight, }) => {
+    if (!labels.length)
+        return { rows: 0, columns: 0, width: 0, height: 0 };
+    const lineHeight = Math.ceil(fontSize * 1.3);
+    const itemWidths = labels.map((label) => itemWidth + LEGEND_ICON_TEXT_GAP + Math.ceil(measureTextWidth(label, fontSize)));
+    if (orientation === "horizontal") {
+        const maxRowWidth = Math.max(1, availableWidth - padding * 2);
+        let rows = 1;
+        let rowWidth = 0;
+        let widestRow = 0;
+        for (const w of itemWidths) {
+            const next = rowWidth === 0 ? w : rowWidth + itemGap + w;
+            if (next > maxRowWidth && rowWidth > 0) {
+                widestRow = Math.max(widestRow, rowWidth);
+                rows += 1;
+                rowWidth = w;
+            }
+            else {
+                rowWidth = next;
+            }
+        }
+        widestRow = Math.max(widestRow, rowWidth);
+        return {
+            rows,
+            columns: 1,
+            width: padding * 2 + widestRow,
+            height: padding * 2 + rows * lineHeight + (rows - 1) * itemGap,
+        };
+    }
+    const maxColumnHeight = Math.max(1, availableHeight - padding * 2);
+    const perColumn = Math.max(1, Math.floor((maxColumnHeight + itemGap) / (lineHeight + itemGap)));
+    const columns = Math.ceil(labels.length / perColumn);
+    const rows = Math.min(labels.length, perColumn);
+    const widestItem = Math.max(...itemWidths);
+    return {
+        rows,
+        columns,
+        width: padding * 2 + columns * widestItem + (columns - 1) * itemGap,
+        height: padding * 2 + rows * lineHeight + (rows - 1) * itemGap,
+    };
+};
+/**
+ * Pull the legend entry labels out of an echarts `legend.data` (strings or
+ * `{ name }` items); falls back to the series names, which is what echarts
+ * itself lists when `data` is empty.
+ */
+export const legendLabelsFrom = (legendData, seriesNames) => {
+    const fromData = (legendData ?? [])
+        .map((d) => typeof d === "string"
+        ? d
+        : d && typeof d === "object" && typeof d.name === "string"
+            ? d.name
+            : "")
+        .filter((s) => s.length > 0);
+    if (fromData.length)
+        return fromData;
+    return seriesNames
+        .map((n) => (typeof n === "string" ? n : n === undefined || n === null ? "" : String(n)))
+        .filter((s) => s.length > 0);
+};
+/**
+ * Depth (px) of one row of echarts axis tick labels measured from the axis
+ * line: 5px tick + 8px label margin + one 12px line, rounded up. With
+ * `grid.containLabel` this is the part the grid already accounts for; the
+ * axis title sits beyond it.
+ */
+export const echartsAxisLabelDepth = (fontSize = 12) => 5 + 8 + Math.ceil(fontSize * 1.1);
+/**
+ * echarts `nameGap` for a category axis whose title sits in the middle
+ * below the tick labels: clear one row of labels plus a small gap, measured
+ * to the title's centre line.
+ */
+export const categoryAxisNameGap = (fontSize = 12) => echartsAxisLabelDepth(fontSize) + BAND_GAP / 2 + Math.ceil(fontSize / 2);
+/** Height of the echarts chart-title band (padding 10 each side + one line). */
+export const echartsTitleBand = (titleFontSize = 16) => LEGEND_PADDING * 2 + Math.ceil(titleFontSize * 1.25);
+/**
+ * Echarts cartesian geometry with a band reserved for the legend in its
+ * position, outside the axis-title band, outside the tick labels.
+ */
+export const reserveEchartsLegendBand = ({ position, visible, labels, legendFontSize = 12, legendItemWidth = 10, width, height, hasTitle, titleFontSize = 16, hasBottomAxisTitle, bottomAxisNameGap, hasLeftAxisTitle, axisFontSize = 12, }) => {
+    const pos = visible ? (position ?? "top") : "none";
+    const horizontal = pos === "top" || pos === "bottom";
+    const band = pos === "none"
+        ? { rows: 0, columns: 0, width: 0, height: 0 }
+        : estimateLegendBand({
+            labels,
+            fontSize: legendFontSize,
+            itemWidth: legendItemWidth,
+            orientation: horizontal ? "horizontal" : "vertical",
+            availableWidth: width,
+            availableHeight: height,
+        });
+    const titleBand = hasTitle ? echartsTitleBand(titleFontSize) : 0;
+    const labelDepth = echartsAxisLabelDepth(axisFontSize);
+    // The bottom axis title's centre sits `nameGap` below the axis line and
+    // its line box extends half a font below that; the contained labels
+    // already cover `labelDepth` of it.
+    const bottomTitleOverhang = hasBottomAxisTitle
+        ? Math.max(0, bottomAxisNameGap + Math.ceil(axisFontSize / 2) - labelDepth) + BAND_GAP
+        : 0;
+    // The rotated left axis title clears its labels by `fontSize + 6` (see
+    // valueAxisNameGap) and its own line box extends half a font further.
+    const leftTitleOverhang = hasLeftAxisTitle
+        ? Math.ceil(axisFontSize * 1.5) + 6 + BAND_GAP / 2
+        : 0;
+    // Half a tick label pokes past the top / right end of an axis.
+    const topHeadroom = Math.ceil(axisFontSize / 2) + 4;
+    const rightHeadroom = Math.ceil(axisFontSize / 2) + 10;
+    const legend = {};
+    let top = (hasTitle ? titleBand : EDGE_PAD) + topHeadroom;
+    let bottom = EDGE_PAD + bottomTitleOverhang;
+    let left = EDGE_PAD + leftTitleOverhang;
+    let right = rightHeadroom;
+    switch (pos) {
+        case "top": {
+            legend.top = hasTitle ? titleBand : EDGE_PAD;
+            legend.bottom = undefined;
+            top = legend.top + band.height + BAND_GAP + topHeadroom;
+            break;
+        }
+        case "bottom": {
+            legend.bottom = EDGE_PAD;
+            legend.top = undefined;
+            bottom = EDGE_PAD + band.height + BAND_GAP + bottomTitleOverhang;
+            break;
+        }
+        case "left": {
+            legend.left = EDGE_PAD;
+            legend.right = undefined;
+            left = EDGE_PAD + band.width + BAND_GAP + leftTitleOverhang;
+            break;
+        }
+        case "right": {
+            legend.right = EDGE_PAD;
+            legend.left = undefined;
+            right = EDGE_PAD + band.width + BAND_GAP;
+            break;
+        }
+        case "topRight": {
+            legend.right = EDGE_PAD;
+            legend.left = undefined;
+            legend.top = hasTitle ? titleBand : EDGE_PAD;
+            legend.bottom = undefined;
+            right = EDGE_PAD + band.width + BAND_GAP;
+            break;
+        }
+        default:
+            break;
+    }
+    return {
+        band,
+        grid: { left, right, top, bottom, containLabel: true },
+        legend,
+    };
+};
+/** Plotly text line height (its LINE_SPACING is 1.3em). */
+const plotlyLineHeight = (fontSize) => Math.ceil(fontSize * 1.3);
+/** Plotly default `legend.itemwidth`. */
+const PLOTLY_LEGEND_ITEM_WIDTH = 30;
+/**
+ * Plotly geometry with a band reserved for the legend in its position.
+ * Legend coordinates are paper-relative (fractions of the plot area), so
+ * they are derived from the margins this returns; `automargin` on the
+ * axes may still grow a margin further for unusually deep tick labels.
+ */
+export const reservePlotlyLegendBand = ({ position, visible, labels, legendFontSize = 12, width, height, hasTitle, titleFontSize = 16, hasBottomAxisTitle, hasLeftAxisTitle, leftAxisDepth, rightAxisDepth = 0, bottomAxisTitleStandoff = BAND_GAP, axisFontSize = 12, }) => {
+    const pos = visible ? (position ?? "right") : "none";
+    const horizontal = pos === "top" || pos === "bottom";
+    const band = pos === "none"
+        ? { rows: 0, columns: 0, width: 0, height: 0 }
+        : estimateLegendBand({
+            labels,
+            fontSize: legendFontSize,
+            itemWidth: PLOTLY_LEGEND_ITEM_WIDTH,
+            itemGap: 5,
+            padding: 5,
+            orientation: horizontal ? "horizontal" : "vertical",
+            availableWidth: width,
+            availableHeight: height,
+        });
+    const titleBand = hasTitle
+        ? EDGE_PAD + plotlyLineHeight(titleFontSize) + BAND_GAP
+        : 0;
+    // One row of bottom tick labels: plotly pads them ~3px off the axis.
+    const bottomLabelDepth = 3 + plotlyLineHeight(axisFontSize);
+    const bottomTitleBand = hasBottomAxisTitle
+        ? bottomAxisTitleStandoff + plotlyLineHeight(axisFontSize)
+        : 0;
+    const bottomAxisDepth = bottomLabelDepth + bottomTitleBand;
+    const topHeadroom = Math.ceil(axisFontSize / 2) + 4;
+    let t = Math.max(EDGE_PAD + topHeadroom, titleBand + topHeadroom);
+    let b = bottomAxisDepth + EDGE_PAD;
+    let l = leftAxisDepth + (hasLeftAxisTitle ? BAND_GAP : 0) + EDGE_PAD;
+    let r = Math.max(EDGE_PAD + Math.ceil(axisFontSize / 2), rightAxisDepth + EDGE_PAD);
+    let legend = null;
+    switch (pos) {
+        case "top": {
+            t = (hasTitle ? titleBand : EDGE_PAD) + band.height + BAND_GAP + topHeadroom;
+            legend = { orientation: "h", x: 0.5, xanchor: "center", y: 1, yanchor: "bottom" };
+            break;
+        }
+        case "bottom": {
+            b = bottomAxisDepth + BAND_GAP + band.height + EDGE_PAD;
+            legend = { orientation: "h", x: 0.5, xanchor: "center", y: 0, yanchor: "top" };
+            break;
+        }
+        case "left": {
+            l = leftAxisDepth + BAND_GAP + band.width + EDGE_PAD;
+            legend = { orientation: "v", x: 0, xanchor: "right", y: 0.5, yanchor: "middle" };
+            break;
+        }
+        case "right": {
+            r = rightAxisDepth + BAND_GAP + band.width + EDGE_PAD;
+            legend = { orientation: "v", x: 1, xanchor: "left", y: 0.5, yanchor: "middle" };
+            break;
+        }
+        case "topRight": {
+            r = rightAxisDepth + BAND_GAP + band.width + EDGE_PAD;
+            legend = { orientation: "v", x: 1, xanchor: "left", y: 1, yanchor: "top" };
+            break;
+        }
+        default:
+            break;
+    }
+    // Paper coordinates: offsets outside the plot area are fractions of it.
+    const plotWidth = Math.max(1, width - l - r);
+    const plotHeight = Math.max(1, height - t - b);
+    if (legend) {
+        switch (pos) {
+            case "top":
+                legend.y = 1 + (BAND_GAP + topHeadroom) / plotHeight;
+                break;
+            case "bottom":
+                legend.y = -(bottomAxisDepth + BAND_GAP) / plotHeight;
+                break;
+            case "left":
+                legend.x = -(leftAxisDepth + BAND_GAP) / plotWidth;
+                break;
+            case "right":
+            case "topRight":
+                legend.x = 1 + (rightAxisDepth + BAND_GAP) / plotWidth;
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        band,
+        margin: { l, r, t, b },
+        legend,
+        bottomAxisTitleStandoff,
+        title: { yref: "container", y: 1, yanchor: "top", pad: { t: EDGE_PAD } },
+    };
+};

package/dist/esm/utils/trendline.d.ts

@@ -7,12 +7,24 @@
  * so the regressions are hand-rolled here as pure least-squares math and
  * the renderers draw the returned points as an overlay line series.
  *
- * All fits operate on the index domain x = 0, 1, 2, … (one step per
- * category) which matches how a category-axis chart positions points.
- * The caller passes the raw y-values; gaps (null/NaN) are skipped during
- * fitting but the fitted curve is still emitted for every x in range.
+ * All fits operate on Excel's category domain x = 1, 2, …, n (one step per
+ * category, first category = 1) — the domain Excel fits and prints for a
+ * category-axis chart (line, column, bar, area). Linear, polynomial and
+ * exponential curves are invariant to where the domain starts (only the
+ * equation text moves), but logarithmic and power fits are not: fitting
+ * them on x = 0, 1, … dropped the first category from the fit and evaluated
+ * ln(x) at x → 0 for it, which drew the Jan point of a 12-month log trend
+ * at about −524 instead of Excel's ≈6.4 (rowsncolumns/spreadsheet#1028).
+ *
+ * The emitted points keep the renderer-facing 0-based CATEGORY INDEX in `x`
+ * (echarts plots `[x, y]` on the category axis, plotly maps `x` onto the
+ * category labels), so a forecast of k periods still extends to index
+ * n−1+k forward and −k backward. The caller passes the raw y-values; gaps
+ * (null/NaN) are skipped during fitting but the fitted curve is still
+ * emitted for every x in range.
  */
 export type TrendlineType = "linear" | "exp" | "log" | "poly" | "power" | "movingAvg";
+/** `x` is the 0-based category index (−k … n−1+k with forecasting), `y` the fitted value. */
 export type TrendlinePoint = {
     x: number;
     y: number;
@@ -28,7 +40,8 @@ export type TrendlineResult = {
 /**
  * Compute a trendline for a series of y-values.
  *
- * @param values  Raw y-values; the category index is used as x.
+ * @param values  Raw y-values; the 1-based category position is used as x
+ *                for the fit, the 0-based index is reported in the points.
  * @param spec    Trendline parameters (type/order/period/forecast).
  */
 export declare const computeTrendline: (values: (number | null | undefined)[], spec?: {

package/dist/esm/utils/trendline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trendline.d.ts","sourceRoot":"","sources":["../../../utils/trendline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,sEAAsE;IACtE,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,uEAAuE;IACvE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AA+IF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EACrC,OAAM;IACJ,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,KACL,eAAe,GAAG,IA6FpB,CAAC"}
+{"version":3,"file":"trendline.d.ts","sourceRoot":"","sources":["../../../utils/trendline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,WAAW,CAAC;AAEhB,6FAA6F;AAC7F,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,sEAAsE;IACtE,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,uEAAuE;IACvE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AAsJF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EACrC,OAAM;IACJ,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,KACL,eAAe,GAAG,IAiGpB,CAAC"}

package/dist/esm/utils/trendline.js

@@ -7,14 +7,26 @@
  * so the regressions are hand-rolled here as pure least-squares math and
  * the renderers draw the returned points as an overlay line series.
  *
- * All fits operate on the index domain x = 0, 1, 2, … (one step per
- * category) which matches how a category-axis chart positions points.
- * The caller passes the raw y-values; gaps (null/NaN) are skipped during
- * fitting but the fitted curve is still emitted for every x in range.
+ * All fits operate on Excel's category domain x = 1, 2, …, n (one step per
+ * category, first category = 1) — the domain Excel fits and prints for a
+ * category-axis chart (line, column, bar, area). Linear, polynomial and
+ * exponential curves are invariant to where the domain starts (only the
+ * equation text moves), but logarithmic and power fits are not: fitting
+ * them on x = 0, 1, … dropped the first category from the fit and evaluated
+ * ln(x) at x → 0 for it, which drew the Jan point of a 12-month log trend
+ * at about −524 instead of Excel's ≈6.4 (rowsncolumns/spreadsheet#1028).
+ *
+ * The emitted points keep the renderer-facing 0-based CATEGORY INDEX in `x`
+ * (echarts plots `[x, y]` on the category axis, plotly maps `x` onto the
+ * category labels), so a forecast of k periods still extends to index
+ * n−1+k forward and −k backward. The caller passes the raw y-values; gaps
+ * (null/NaN) are skipped during fitting but the fitted curve is still
+ * emitted for every x in range.
  */
 const isFiniteNum = (v) => typeof v === "number" && Number.isFinite(v);
 /**
- * Build (x, y) pairs from raw y-values using the category index as x.
+ * Build (x, y) pairs from raw y-values using Excel's 1-based category
+ * position as x (the first category is x = 1, see the module comment).
  * Non-finite y-values are dropped (they cannot be fitted).
  */
 const toPairs = (values) => {
@@ -22,7 +34,7 @@ const toPairs = (values) => {
     for (let i = 0; i < values.length; i++) {
         const y = values[i];
         if (isFiniteNum(y))
-            pairs.push({ x: i, y });
+            pairs.push({ x: i + 1, y });
     }
     return pairs;
 };
@@ -48,6 +60,11 @@ const round = (n, digits = 4) => {
     const f = 10 ** digits;
     return Math.round(n * f) / f;
 };
+/** `+ 2` / `- 2` for an additive term, the way Excel prints an equation. */
+const signed = (n) => {
+    const r = round(n);
+    return r < 0 ? `- ${Math.abs(r)}` : `+ ${r}`;
+};
 /** Solve a small linear system A·x = b via Gaussian elimination. */
 const solveLinearSystem = (A, b) => {
     const n = b.length;
@@ -157,7 +174,8 @@ const fitPower = (pairs) => {
 /**
  * Compute a trendline for a series of y-values.
  *
- * @param values  Raw y-values; the category index is used as x.
+ * @param values  Raw y-values; the 1-based category position is used as x
+ *                for the fit, the 0-based index is reported in the points.
  * @param spec    Trendline parameters (type/order/period/forecast).
  */
 export const computeTrendline = (values, spec = {}) => {
@@ -187,9 +205,9 @@ export const computeTrendline = (values, spec = {}) => {
         }
         return { points, rSquared: null, equation: null };
     }
-    const lastX = values.length - 1;
-    const xStart = -backward;
-    const xEnd = lastX + forward;
+    // Fit domain is 1..n; a forecast of k periods extends it to 1−k / n+k.
+    const xStart = 1 - backward;
+    const xEnd = values.length + forward;
     const xs = [];
     for (let x = xStart; x <= xEnd; x++)
         xs.push(x);
@@ -201,7 +219,7 @@ export const computeTrendline = (values, spec = {}) => {
             if (!fit)
                 return null;
             predict = (x) => fit.m * x + fit.b;
-            equation = `y = ${round(fit.m)}x + ${round(fit.b)}`;
+            equation = `y = ${round(fit.m)}x ${signed(fit.b)}`;
             break;
         }
         case "poly": {
@@ -212,8 +230,8 @@ export const computeTrendline = (values, spec = {}) => {
             equation =
                 "y = " +
                     coeffs
-                        .map((c, i) => (i === 0 ? `${round(c)}` : `${round(c)}x^${i}`))
-                        .join(" + ");
+                        .map((c, i) => i === 0 ? `${round(c)}` : `${signed(c)}x${i === 1 ? "" : `^${i}`}`)
+                        .join(" ");
             break;
         }
         case "exp": {
@@ -228,9 +246,10 @@ export const computeTrendline = (values, spec = {}) => {
             const fit = fitLog(pairs);
             if (!fit)
                 return null;
-            // ln(0) and ln(negative) are undefined; clamp x to >0 for the curve.
+            // Only a backward forecast reaches x ≤ 0 (the fit domain starts at 1);
+            // ln(0) and ln(negative) are undefined, so clamp x to >0 for the curve.
             predict = (x) => fit.a + fit.b * Math.log(x <= 0 ? 1e-9 : x);
-            equation = `y = ${round(fit.a)} + ${round(fit.b)}ln(x)`;
+            equation = `y = ${round(fit.b)}ln(x) ${signed(fit.a)}`;
             break;
         }
         case "power": {
@@ -244,8 +263,9 @@ export const computeTrendline = (values, spec = {}) => {
         default:
             return null;
     }
+    // Report the renderer-facing 0-based category index (see module comment).
     const points = xs
-        .map((x) => ({ x, y: predict(x) }))
+        .map((x) => ({ x: x - 1, y: predict(x) }))
         .filter((p) => Number.isFinite(p.y));
     if (points.length < 2)
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/charts",
-  "version": "28.1.2",
+  "version": "28.1.5",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -67,19 +67,19 @@
   },
   "devDependencies": {
     "@rowsncolumns/calculator": ">=7.3.1",
-    "@rowsncolumns/common-types": ">=5.3.1",
+    "@rowsncolumns/common-types": ">=5.3.2",
     "@rowsncolumns/grid": ">=13.2.35",
     "@rowsncolumns/icons": ">=7.2.33",
-    "@rowsncolumns/spreadsheet": ">=10.4.2",
-    "@rowsncolumns/spreadsheet-state": ">=29.1.4",
-    "@rowsncolumns/toolkit": ">=24.5.4",
-    "@rowsncolumns/ui": ">=16.0.3",
-    "@rowsncolumns/utils": ">=9.5.1",
+    "@rowsncolumns/spreadsheet": ">=10.4.5",
+    "@rowsncolumns/spreadsheet-state": ">=29.1.7",
+    "@rowsncolumns/toolkit": ">=24.5.6",
+    "@rowsncolumns/ui": ">=16.0.4",
+    "@rowsncolumns/utils": ">=9.5.4",
     "@types/react-plotly.js": "^2.6.3",
     "echarts": "^5.6.0",
     "formik": "^2.4.6",
     "immer": "^10.1.1",
-    "plotly.js": "^3.1.1",
+    "plotly.js-dist-min": "^3.1.1",
     "react-plotly.js": "^2.6.0"
   },
   "peerDependencies": {
@@ -94,7 +94,7 @@
     "@rowsncolumns/utils": ">=9.3.0",
     "immer": ">10.0.0",
     "jotai": ">=2.10.3",
-    "plotly.js": ">=3",
+    "plotly.js-dist-min": ">=3",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-plotly.js": ">=2"