@rowsncolumns/charts 28.1.2 → 28.1.4

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

@@ -0,0 +1,338 @@
+"use strict";
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reservePlotlyLegendBand = exports.reserveEchartsLegendBand = exports.echartsTitleBand = exports.categoryAxisNameGap = exports.echartsAxisLabelDepth = exports.legendLabelsFrom = exports.estimateLegendBand = exports.measureTextWidth = exports.LEGEND_ITEM_GAP = exports.LEGEND_PADDING = exports.EDGE_PAD = exports.BAND_GAP = void 0;
+var tslib_1 = require("tslib");
+/** Space kept between neighbouring bands (legend ↔ axis title ↔ labels). */
+exports.BAND_GAP = 8;
+/** Inset of the outermost band from the chart frame. */
+exports.EDGE_PAD = 10;
+/** echarts `legend.padding` default used by both adapters' legend boxes. */
+exports.LEGEND_PADDING = 10;
+/** echarts `legend.itemGap` default. */
+exports.LEGEND_ITEM_GAP = 10;
+/** Gap echarts leaves between a legend icon and its text. */
+var LEGEND_ICON_TEXT_GAP = 5;
+/** Approximate rendered width of `text` at `fontSize` (canvas when available). */
+var measureTextWidth = function (text, fontSize) {
+    if (typeof document !== "undefined") {
+        var ctx = document.createElement("canvas").getContext("2d");
+        if (ctx) {
+            ctx.font = "".concat(fontSize, "px sans-serif");
+            var 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;
+};
+exports.measureTextWidth = measureTextWidth;
+/**
+ * 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.
+ */
+var estimateLegendBand = function (_a) {
+    var e_1, _b;
+    var labels = _a.labels, _c = _a.fontSize, fontSize = _c === void 0 ? 12 : _c, _d = _a.itemWidth, itemWidth = _d === void 0 ? 10 : _d, _e = _a.itemGap, itemGap = _e === void 0 ? exports.LEGEND_ITEM_GAP : _e, _f = _a.padding, padding = _f === void 0 ? exports.LEGEND_PADDING : _f, orientation = _a.orientation, availableWidth = _a.availableWidth, availableHeight = _a.availableHeight;
+    if (!labels.length)
+        return { rows: 0, columns: 0, width: 0, height: 0 };
+    var lineHeight = Math.ceil(fontSize * 1.3);
+    var itemWidths = labels.map(function (label) {
+        return itemWidth + LEGEND_ICON_TEXT_GAP + Math.ceil((0, exports.measureTextWidth)(label, fontSize));
+    });
+    if (orientation === "horizontal") {
+        var maxRowWidth = Math.max(1, availableWidth - padding * 2);
+        var rows_1 = 1;
+        var rowWidth = 0;
+        var widestRow = 0;
+        try {
+            for (var itemWidths_1 = tslib_1.__values(itemWidths), itemWidths_1_1 = itemWidths_1.next(); !itemWidths_1_1.done; itemWidths_1_1 = itemWidths_1.next()) {
+                var w = itemWidths_1_1.value;
+                var next = rowWidth === 0 ? w : rowWidth + itemGap + w;
+                if (next > maxRowWidth && rowWidth > 0) {
+                    widestRow = Math.max(widestRow, rowWidth);
+                    rows_1 += 1;
+                    rowWidth = w;
+                }
+                else {
+                    rowWidth = next;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (itemWidths_1_1 && !itemWidths_1_1.done && (_b = itemWidths_1.return)) _b.call(itemWidths_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        widestRow = Math.max(widestRow, rowWidth);
+        return {
+            rows: rows_1,
+            columns: 1,
+            width: padding * 2 + widestRow,
+            height: padding * 2 + rows_1 * lineHeight + (rows_1 - 1) * itemGap,
+        };
+    }
+    var maxColumnHeight = Math.max(1, availableHeight - padding * 2);
+    var perColumn = Math.max(1, Math.floor((maxColumnHeight + itemGap) / (lineHeight + itemGap)));
+    var columns = Math.ceil(labels.length / perColumn);
+    var rows = Math.min(labels.length, perColumn);
+    var widestItem = Math.max.apply(Math, tslib_1.__spreadArray([], tslib_1.__read(itemWidths), false));
+    return {
+        rows: rows,
+        columns: columns,
+        width: padding * 2 + columns * widestItem + (columns - 1) * itemGap,
+        height: padding * 2 + rows * lineHeight + (rows - 1) * itemGap,
+    };
+};
+exports.estimateLegendBand = estimateLegendBand;
+/**
+ * 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.
+ */
+var legendLabelsFrom = function (legendData, seriesNames) {
+    var fromData = (legendData !== null && legendData !== void 0 ? legendData : [])
+        .map(function (d) {
+        return typeof d === "string"
+            ? d
+            : d && typeof d === "object" && typeof d.name === "string"
+                ? d.name
+                : "";
+    })
+        .filter(function (s) { return s.length > 0; });
+    if (fromData.length)
+        return fromData;
+    return seriesNames
+        .map(function (n) { return (typeof n === "string" ? n : n === undefined || n === null ? "" : String(n)); })
+        .filter(function (s) { return s.length > 0; });
+};
+exports.legendLabelsFrom = legendLabelsFrom;
+/**
+ * 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.
+ */
+var echartsAxisLabelDepth = function (fontSize) {
+    if (fontSize === void 0) { fontSize = 12; }
+    return 5 + 8 + Math.ceil(fontSize * 1.1);
+};
+exports.echartsAxisLabelDepth = echartsAxisLabelDepth;
+/**
+ * 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.
+ */
+var categoryAxisNameGap = function (fontSize) {
+    if (fontSize === void 0) { fontSize = 12; }
+    return (0, exports.echartsAxisLabelDepth)(fontSize) + exports.BAND_GAP / 2 + Math.ceil(fontSize / 2);
+};
+exports.categoryAxisNameGap = categoryAxisNameGap;
+/** Height of the echarts chart-title band (padding 10 each side + one line). */
+var echartsTitleBand = function (titleFontSize) {
+    if (titleFontSize === void 0) { titleFontSize = 16; }
+    return exports.LEGEND_PADDING * 2 + Math.ceil(titleFontSize * 1.25);
+};
+exports.echartsTitleBand = echartsTitleBand;
+/**
+ * Echarts cartesian geometry with a band reserved for the legend in its
+ * position, outside the axis-title band, outside the tick labels.
+ */
+var reserveEchartsLegendBand = function (_a) {
+    var position = _a.position, visible = _a.visible, labels = _a.labels, _b = _a.legendFontSize, legendFontSize = _b === void 0 ? 12 : _b, _c = _a.legendItemWidth, legendItemWidth = _c === void 0 ? 10 : _c, width = _a.width, height = _a.height, hasTitle = _a.hasTitle, _d = _a.titleFontSize, titleFontSize = _d === void 0 ? 16 : _d, hasBottomAxisTitle = _a.hasBottomAxisTitle, bottomAxisNameGap = _a.bottomAxisNameGap, hasLeftAxisTitle = _a.hasLeftAxisTitle, _e = _a.axisFontSize, axisFontSize = _e === void 0 ? 12 : _e;
+    var pos = visible ? (position !== null && position !== void 0 ? position : "top") : "none";
+    var horizontal = pos === "top" || pos === "bottom";
+    var band = pos === "none"
+        ? { rows: 0, columns: 0, width: 0, height: 0 }
+        : (0, exports.estimateLegendBand)({
+            labels: labels,
+            fontSize: legendFontSize,
+            itemWidth: legendItemWidth,
+            orientation: horizontal ? "horizontal" : "vertical",
+            availableWidth: width,
+            availableHeight: height,
+        });
+    var titleBand = hasTitle ? (0, exports.echartsTitleBand)(titleFontSize) : 0;
+    var labelDepth = (0, exports.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.
+    var bottomTitleOverhang = hasBottomAxisTitle
+        ? Math.max(0, bottomAxisNameGap + Math.ceil(axisFontSize / 2) - labelDepth) + exports.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.
+    var leftTitleOverhang = hasLeftAxisTitle
+        ? Math.ceil(axisFontSize * 1.5) + 6 + exports.BAND_GAP / 2
+        : 0;
+    // Half a tick label pokes past the top / right end of an axis.
+    var topHeadroom = Math.ceil(axisFontSize / 2) + 4;
+    var rightHeadroom = Math.ceil(axisFontSize / 2) + 10;
+    var legend = {};
+    var top = (hasTitle ? titleBand : exports.EDGE_PAD) + topHeadroom;
+    var bottom = exports.EDGE_PAD + bottomTitleOverhang;
+    var left = exports.EDGE_PAD + leftTitleOverhang;
+    var right = rightHeadroom;
+    switch (pos) {
+        case "top": {
+            legend.top = hasTitle ? titleBand : exports.EDGE_PAD;
+            legend.bottom = undefined;
+            top = legend.top + band.height + exports.BAND_GAP + topHeadroom;
+            break;
+        }
+        case "bottom": {
+            legend.bottom = exports.EDGE_PAD;
+            legend.top = undefined;
+            bottom = exports.EDGE_PAD + band.height + exports.BAND_GAP + bottomTitleOverhang;
+            break;
+        }
+        case "left": {
+            legend.left = exports.EDGE_PAD;
+            legend.right = undefined;
+            left = exports.EDGE_PAD + band.width + exports.BAND_GAP + leftTitleOverhang;
+            break;
+        }
+        case "right": {
+            legend.right = exports.EDGE_PAD;
+            legend.left = undefined;
+            right = exports.EDGE_PAD + band.width + exports.BAND_GAP;
+            break;
+        }
+        case "topRight": {
+            legend.right = exports.EDGE_PAD;
+            legend.left = undefined;
+            legend.top = hasTitle ? titleBand : exports.EDGE_PAD;
+            legend.bottom = undefined;
+            right = exports.EDGE_PAD + band.width + exports.BAND_GAP;
+            break;
+        }
+        default:
+            break;
+    }
+    return {
+        band: band,
+        grid: { left: left, right: right, top: top, bottom: bottom, containLabel: true },
+        legend: legend,
+    };
+};
+exports.reserveEchartsLegendBand = reserveEchartsLegendBand;
+/** Plotly text line height (its LINE_SPACING is 1.3em). */
+var plotlyLineHeight = function (fontSize) { return Math.ceil(fontSize * 1.3); };
+/** Plotly default `legend.itemwidth`. */
+var 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.
+ */
+var reservePlotlyLegendBand = function (_a) {
+    var position = _a.position, visible = _a.visible, labels = _a.labels, _b = _a.legendFontSize, legendFontSize = _b === void 0 ? 12 : _b, width = _a.width, height = _a.height, hasTitle = _a.hasTitle, _c = _a.titleFontSize, titleFontSize = _c === void 0 ? 16 : _c, hasBottomAxisTitle = _a.hasBottomAxisTitle, hasLeftAxisTitle = _a.hasLeftAxisTitle, leftAxisDepth = _a.leftAxisDepth, _d = _a.rightAxisDepth, rightAxisDepth = _d === void 0 ? 0 : _d, _e = _a.bottomAxisTitleStandoff, bottomAxisTitleStandoff = _e === void 0 ? exports.BAND_GAP : _e, _f = _a.axisFontSize, axisFontSize = _f === void 0 ? 12 : _f;
+    var pos = visible ? (position !== null && position !== void 0 ? position : "right") : "none";
+    var horizontal = pos === "top" || pos === "bottom";
+    var band = pos === "none"
+        ? { rows: 0, columns: 0, width: 0, height: 0 }
+        : (0, exports.estimateLegendBand)({
+            labels: labels,
+            fontSize: legendFontSize,
+            itemWidth: PLOTLY_LEGEND_ITEM_WIDTH,
+            itemGap: 5,
+            padding: 5,
+            orientation: horizontal ? "horizontal" : "vertical",
+            availableWidth: width,
+            availableHeight: height,
+        });
+    var titleBand = hasTitle
+        ? exports.EDGE_PAD + plotlyLineHeight(titleFontSize) + exports.BAND_GAP
+        : 0;
+    // One row of bottom tick labels: plotly pads them ~3px off the axis.
+    var bottomLabelDepth = 3 + plotlyLineHeight(axisFontSize);
+    var bottomTitleBand = hasBottomAxisTitle
+        ? bottomAxisTitleStandoff + plotlyLineHeight(axisFontSize)
+        : 0;
+    var bottomAxisDepth = bottomLabelDepth + bottomTitleBand;
+    var topHeadroom = Math.ceil(axisFontSize / 2) + 4;
+    var t = Math.max(exports.EDGE_PAD + topHeadroom, titleBand + topHeadroom);
+    var b = bottomAxisDepth + exports.EDGE_PAD;
+    var l = leftAxisDepth + (hasLeftAxisTitle ? exports.BAND_GAP : 0) + exports.EDGE_PAD;
+    var r = Math.max(exports.EDGE_PAD + Math.ceil(axisFontSize / 2), rightAxisDepth + exports.EDGE_PAD);
+    var legend = null;
+    switch (pos) {
+        case "top": {
+            t = (hasTitle ? titleBand : exports.EDGE_PAD) + band.height + exports.BAND_GAP + topHeadroom;
+            legend = { orientation: "h", x: 0.5, xanchor: "center", y: 1, yanchor: "bottom" };
+            break;
+        }
+        case "bottom": {
+            b = bottomAxisDepth + exports.BAND_GAP + band.height + exports.EDGE_PAD;
+            legend = { orientation: "h", x: 0.5, xanchor: "center", y: 0, yanchor: "top" };
+            break;
+        }
+        case "left": {
+            l = leftAxisDepth + exports.BAND_GAP + band.width + exports.EDGE_PAD;
+            legend = { orientation: "v", x: 0, xanchor: "right", y: 0.5, yanchor: "middle" };
+            break;
+        }
+        case "right": {
+            r = rightAxisDepth + exports.BAND_GAP + band.width + exports.EDGE_PAD;
+            legend = { orientation: "v", x: 1, xanchor: "left", y: 0.5, yanchor: "middle" };
+            break;
+        }
+        case "topRight": {
+            r = rightAxisDepth + exports.BAND_GAP + band.width + exports.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.
+    var plotWidth = Math.max(1, width - l - r);
+    var plotHeight = Math.max(1, height - t - b);
+    if (legend) {
+        switch (pos) {
+            case "top":
+                legend.y = 1 + (exports.BAND_GAP + topHeadroom) / plotHeight;
+                break;
+            case "bottom":
+                legend.y = -(bottomAxisDepth + exports.BAND_GAP) / plotHeight;
+                break;
+            case "left":
+                legend.x = -(leftAxisDepth + exports.BAND_GAP) / plotWidth;
+                break;
+            case "right":
+            case "topRight":
+                legend.x = 1 + (rightAxisDepth + exports.BAND_GAP) / plotWidth;
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        band: band,
+        margin: { l: l, r: r, t: t, b: b },
+        legend: legend,
+        bottomAxisTitleStandoff: bottomAxisTitleStandoff,
+        title: { yref: "container", y: 1, yanchor: "top", pad: { t: exports.EDGE_PAD } },
+    };
+};
+exports.reservePlotlyLegendBand = reservePlotlyLegendBand;

package/dist/esm/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA0PrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAkEnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAmuGjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAmQrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAqEnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAwyGjB,CAAC"}

package/dist/esm/basic-chart/basic-chart.js

@@ -10,7 +10,7 @@ import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../utils/aggregation";
-import { circularTooltipFormatter, formatAxisValue, resolveSeriesNumberFormats, resolveSourceNumberFormat, resolveValueAxisNumberFormat, tooltipValueFormatter, valueAxisLabelFormatter, } from "../utils/axis-number-format";
+import { circularTooltipFormatter, formatAxisValue, resolveSeriesNumberFormats, resolveSourceNumberFormat, resolveValueAxisNumberFormat, tooltipValueFormatter, valueAxisLabelFormatter, valueAxisNameGap, } from "../utils/axis-number-format";
 import { gapWidthToBarCategoryGap, overlapToBarGap, } from "../utils/bar-layout";
 import { computeBoxplotSummary } from "../utils/boxplot";
 import { createBubbleSizeScale, prepareBubbleSeriesData, } from "../utils/bubble";
@@ -18,13 +18,14 @@ import { coerceCalculatedLabel, getChartDataRanges, } from "../utils/chart-spec-
 import { canSwitchRowColumn, cellLabelGetterFromRangeReader, switchRowColumn, } from "../utils/chart-orientation";
 import { dataUrlToBlob } from "../utils/chart-image";
 import { getChartPalette } from "../utils/chart-styles";
-import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, isLineLikeChartType, } from "../utils/empty-cells";
+import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, isolatedPointIndexes, isLineLikeChartType, } from "../utils/empty-cells";
 import { getEchartsGlState, loadEchartsGl, } from "../utils/echarts-gl-loader";
 import { computeErrorBars, resolveCustomErrorBarValues, } from "../utils/error-bars";
 import { echartsGroupedCategoryAxes, resolveCategoryLevels, } from "../utils/category-levels";
 import { gradientToEcharts } from "../utils/gradient";
 import { buildHierarchyTree, extractHierarchyRows, getHierarchyHeaderTitle, } from "../utils/hierarchy";
 import { binHistogram, computePareto, isParetoSpec, } from "../utils/histogram";
+import { categoryAxisNameGap, legendLabelsFrom, reserveEchartsLegendBand, } from "../utils/legend-layout";
 import { clampSecondPieSize, isOfPieChartSpec, otherSliceHalfAngle, resolveOfPieType, splitOfPie, } from "../utils/of-pie";
 import { applyAxisOverrides, applyLegendOverrides, buildSeriesLabelOption, } from "../utils/overrides";
 import { buildRadarIndicators, buildRadarSeriesData } from "../utils/radar";
@@ -37,7 +38,7 @@ import { buildBar3DData, buildContourData, buildLine3DSeries, buildSurfaceData,
 import { computeTrendline } from "../utils/trendline";
 import { computeWaterfall } from "../utils/waterfall";
 import { isWebGLAvailable } from "../utils/webgl";
-import { chartTypeToEchartsType, getEchartsSeriesStyle, mapMarkerSymbolToEcharts, showXAxis, } from "./helpers";
+import { chartTypeToEchartsType, circularLegendEntries, getEchartsSeriesStyle, isCircularChartType, mapMarkerSymbolToEcharts, showXAxis, } from "./helpers";
 // Excel error values that should be treated as null in charts
 const EXCEL_ERROR_VALUES = new Set([
     "#N/A",
@@ -180,6 +181,8 @@ const defaultLegendConfig = {
     itemHeight: 4,
     top: 20,
 };
+/** Category-axis title gap: clears one row of tick labels (#986). */
+const CATEGORY_AXIS_NAME_GAP = categoryAxisNameGap();
 export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, }) => {
     const spec = chart.spec;
     const explicitChartTitle = chart.spec.title ?? undefined;
@@ -306,7 +309,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             rawDomainValues.length === seriesValues.length;
         if (canAggregate) {
             const aggregatedValues = aggregateSeriesByDomain(rawDomainValues, seriesValues, aggregateType, orderedDomainValues);
-            if (spec.chartType === "pie") {
+            if (isCircularChartType(spec.chartType)) {
                 return orderedDomainValues.map((name, idx) => ({
                     value: aggregatedValues[idx] ?? 0,
                     name,
@@ -315,7 +318,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             return aggregatedValues;
         }
         const numericValues = seriesValues;
-        if (spec.chartType === "pie") {
+        // Pie and doughnut points are slices keyed by their category name;
+        // a doughnut is a pie series with a hole, so it labels the same way.
+        if (isCircularChartType(spec.chartType)) {
             if (options.pieLabels) {
                 const { domainLabels, offset } = options.pieLabels;
                 const labels = offset === undefined
@@ -1458,7 +1463,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ? spec.verticalAxisTitle ?? ""
                     : spec.horizontalAxisTitle ?? "",
                 nameLocation: "middle",
-                nameGap: 30 + 24 * categoryLevels.outer.length,
+                nameGap: CATEGORY_AXIS_NAME_GAP + 24 * categoryLevels.outer.length,
             }));
         }
         // One category axis per domain (Excel): a domain drawn from several
@@ -1485,7 +1490,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 splitLine: { show: !isCircularChart },
                 name: axisTitle,
                 nameLocation: "middle",
-                nameGap: 30,
+                nameGap: CATEGORY_AXIS_NAME_GAP,
             });
         });
         if (chartDomains.length === 0 && !isCircularChart) {
@@ -1500,7 +1505,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ? spec.verticalAxisTitle ?? ""
                     : spec.horizontalAxisTitle ?? "",
                 nameLocation: "middle",
-                nameGap: 30,
+                nameGap: CATEGORY_AXIS_NAME_GAP,
             });
         }
         // Trendline + error-bar overlays are extra series appended after the
@@ -1689,7 +1694,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // domain range's labels in sequence, each series range taking its own
             // window — not the primary domain range alone (C-78).
             const domainSources = spec.domains?.[0]?.sources ?? [];
-            const pieDomainLabels = spec.chartType === "pie" &&
+            const pieDomainLabels = isCircularChart &&
                 (domainSources.length > 1 || series.sources.length > 1)
                 ? domainSources.flatMap((sheetRange) => getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? [])
                 : undefined;
@@ -1766,6 +1771,22 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         mapMarkerSymbolToEcharts(markerSymbol) ?? "circle";
                     seriesEntry.symbolSize = seriesAny.marker?.size ?? 6;
                 }
+                else if (Array.isArray(data)) {
+                    // A marker-less line draws nothing for a point with a gap on both
+                    // sides (a data row followed by a blank row), so that row vanishes
+                    // from the chart. Excel plots an isolated marker there: keep the
+                    // series symbol-less and mark only those points.
+                    const isolated = isolatedPointIndexes(data, connectsAcrossEmptyCells(spec, lineLike));
+                    if (isolated.length) {
+                        seriesEntry.showSymbol = true;
+                        seriesEntry.symbol = "none";
+                        const marked = [...data];
+                        for (const i of isolated) {
+                            marked[i] = { value: marked[i], symbol: "circle", symbolSize: 6 };
+                        }
+                        seriesEntry.data = marked;
+                    }
+                }
             }
             // Gradient fill — overrides solid color when present. echarts
             // paints it natively via a LinearGradient on itemStyle.color
@@ -1876,6 +1897,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             chartSeries.push(seriesEntry);
             pushSeriesOverlays(series, data, dataLabel);
         }
+        if (isCircularChart && !isOfPie) {
+            // Excel's pie / doughnut legend lists the categories, one entry per
+            // slice — not the series name (the loop above collected those). The
+            // of-pie branch below builds its own category legend.
+            legend.data = circularLegendEntries(chartSeries);
+        }
         if (isOfPie) {
             // Pie-of-pie / bar-of-pie — Excel splits the minor slices into a
             // secondary pie or stacked bar beside the main pie, replaces them
@@ -2298,27 +2325,6 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             previousSeriesCount.current !== renderedSeriesCount
             ? ["series", "xAxis", "yAxis", "legend", "grid", "tooltip"]
             : [];
-        // Of-pie uses a full-container grid (for the connector overlay's
-        // hidden 0-1 axes) plus, for bar-of-pie, a second grid hosting the
-        // stacked secondary bar.
-        const gridConfig = isOfPie
-            ? [
-                { left: 0, right: 0, top: 0, bottom: 0 },
-                ...(ofPieLayout?.barGrid ? [ofPieLayout.barGrid] : []),
-            ]
-            : isCircularChart
-                ? {
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    bottom: 0,
-                }
-                : {
-                    left: "3%",
-                    right: "4%",
-                    bottom: "3%",
-                    containLabel: true,
-                };
         const valueAxisBase = {
             type: "value",
             show: !isCircularChart,
@@ -2380,6 +2386,49 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         };
         // Phase 5.1: apply legend / axis / dataLabels / doughnut overrides.
         const finalLegend = applyLegendOverrides(legend, spec.legend);
+        // Reserve a band for the legend outside the axis-title band, outside
+        // the tick labels — Excel shrinks the plot instead of painting the
+        // legend over the category labels / axis title (#986). The bottom
+        // axis is the value axis on a horizontal bar chart, else the (first)
+        // category axis with whatever nameGap its levels needed.
+        const bottomAxisNameGap = isHorizontalBarChart
+            ? valueAxisBase.nameGap
+            : Number(chartDomains[0]?.nameGap ?? CATEGORY_AXIS_NAME_GAP);
+        const legendBand = reserveEchartsLegendBand({
+            position: spec.legend?.position,
+            visible: finalLegend.show !== false,
+            labels: legendLabelsFrom(finalLegend.data, chartSeries.map((s) => s?.name)),
+            legendFontSize: finalLegend.textStyle?.fontSize ??
+                spec.legend?.textFormat?.fontSize ??
+                12,
+            legendItemWidth: defaultLegendConfig.itemWidth,
+            width: width ?? 0,
+            height: height ?? 0,
+            hasTitle: Boolean(title),
+            titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+            hasBottomAxisTitle: !isCircularChart && Boolean(spec.horizontalAxisTitle),
+            bottomAxisNameGap,
+            hasLeftAxisTitle: !isCircularChart && Boolean(spec.verticalAxisTitle),
+        });
+        const positionedLegend = isCircularChart
+            ? finalLegend
+            : { ...finalLegend, ...legendBand.legend };
+        // Of-pie uses a full-container grid (for the connector overlay's
+        // hidden 0-1 axes) plus, for bar-of-pie, a second grid hosting the
+        // stacked secondary bar.
+        const gridConfig = isOfPie
+            ? [
+                { left: 0, right: 0, top: 0, bottom: 0 },
+                ...(ofPieLayout?.barGrid ? [ofPieLayout.barGrid] : []),
+            ]
+            : isCircularChart
+                ? {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }
+                : legendBand.grid;
         // Data labels fall back to the series' axis format when the spec has
         // no explicit `<c:dLbls><c:numFmt>` — Excel's "Linked to source".
         const dataLabelOptions = spec.dataLabels;
@@ -2540,7 +2589,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             splitLine: { show: true },
                             name: spec.horizontalAxisTitle ?? "",
                             nameLocation: "middle",
-                            nameGap: 30,
+                            nameGap: CATEGORY_AXIS_NAME_GAP,
                         },
                     ];
                 return base.map((axis) => applyAxisOverrides(axis, spec.categoryAxisOptions));
@@ -2595,13 +2644,26 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 splitLine: { show: true },
                                 name: spec.verticalAxisTitle ?? "",
                                 nameLocation: "middle",
-                                nameGap: 30,
+                                nameGap: CATEGORY_AXIS_NAME_GAP,
                             },
                         ];
                     return base.map((axis) => applyAxisOverrides(axis, spec.categoryAxisOptions));
                 }
                 const axes = [
-                    applyAxisOverrides({ ...valueAxisBase, name: spec.verticalAxisTitle ?? "" }, spec.valueAxisOptions, primaryAxisNumberFormat),
+                    applyAxisOverrides({
+                        ...valueAxisBase,
+                        name: spec.verticalAxisTitle ?? "",
+                        // Clear the tick labels: "$2,000.00" is wider than the 50px
+                        // default gap, and the title painted over its own labels.
+                        nameGap: valueAxisNameGap({
+                            values: chartSeries
+                                .filter((s) => s?.yAxisIndex !== 1)
+                                .flatMap((s) => Array.isArray(s?.data)
+                                ? s.data.map((d) => d !== null && typeof d === "object" ? d.value : d)
+                                : []),
+                            pattern: primaryAxisNumberFormat,
+                        }),
+                    }, spec.valueAxisOptions, primaryAxisNumberFormat),
                 ];
                 if (hasSecondaryAxis) {
                     axes.push(applyAxisOverrides({
@@ -2621,7 +2683,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 return axes;
             })(),
             series: seriesWithLabels,
-            legend: finalLegend,
+            legend: positionedLegend,
             grid: gridConfig,
             tooltip: tooltipConfig,
         }, { replaceMerge, lazyUpdate: true });

package/dist/esm/basic-chart/helpers.d.ts

@@ -5,6 +5,15 @@ export declare const chartTypeToEchartsType: (type: EmbeddedChart["spec"]["chart
  * Returns undefined for "auto" / unknown — caller defaults to "circle".
  */
 export declare const mapMarkerSymbolToEcharts: (symbol: string | undefined | null) => string | undefined;
+/** Pie and doughnut — the pie-family types whose points are slices. */
+export declare const isCircularChartType: (type: EmbeddedChart["spec"]["chartType"] | undefined) => boolean;
+/**
+ * Legend entries of a pie / doughnut: the slice names (the categories), in
+ * order, each once across every pie series — Excel's pie legend lists the
+ * categories, not the series name. echarts keys pie legend items by data
+ * item name, so an entry toggles that slice in every series.
+ */
+export declare const circularLegendEntries: (series: ReadonlyArray<unknown>) => string[];
 export declare const getEchartsSeriesStyle: (type: EmbeddedChart["spec"]["chartType"]) => {
     areaStyle: {};
 } | undefined;

package/dist/esm/basic-chart/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAuBX,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAejE,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAuBX,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,KACnD,OAAgD,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,aAAa,CAAC,OAAO,CAAC,KAC7B,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAejE,CAAC"}

package/dist/esm/basic-chart/helpers.js

@@ -74,6 +74,36 @@ export const mapMarkerSymbolToEcharts = (symbol) => {
             return undefined;
     }
 };
+/** Pie and doughnut — the pie-family types whose points are slices. */
+export const isCircularChartType = (type) => type === "pie" || type === "doughnut";
+/**
+ * Legend entries of a pie / doughnut: the slice names (the categories), in
+ * order, each once across every pie series — Excel's pie legend lists the
+ * categories, not the series name. echarts keys pie legend items by data
+ * item name, so an entry toggles that slice in every series.
+ */
+export const circularLegendEntries = (series) => {
+    const seen = new Set();
+    const entries = [];
+    for (const raw of series) {
+        const entry = raw;
+        if (entry?.type !== "pie" || !Array.isArray(entry.data))
+            continue;
+        for (const item of entry.data) {
+            const name = item !== null && typeof item === "object" && "name" in item
+                ? item.name
+                : undefined;
+            if (name === undefined || name === null)
+                continue;
+            const label = String(name);
+            if (label === "" || seen.has(label))
+                continue;
+            seen.add(label);
+            entries.push(label);
+        }
+    }
+    return entries;
+};
 export const getEchartsSeriesStyle = (type) => {
     switch (type) {
         case "area":

package/dist/esm/plotly/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA4VxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAmrEjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA+WxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAg0EjB,CAAC"}