@rowsncolumns/charts 28.1.2 → 28.1.5

package/dist/cjs/plotly/basic-chart/basic-chart.js

@@ -8,7 +8,6 @@ var spreadsheet_state_1 = require("@rowsncolumns/spreadsheet-state");
 var ui_1 = require("@rowsncolumns/ui");
 var utils_1 = require("@rowsncolumns/utils");
 var react_1 = tslib_1.__importStar(require("react"));
-var react_plotly_js_1 = tslib_1.__importDefault(require("react-plotly.js"));
 var aggregation_1 = require("../../utils/aggregation");
 var axis_number_format_1 = require("../../utils/axis-number-format");
 var boxplot_1 = require("../../utils/boxplot");
@@ -21,6 +20,7 @@ var empty_cells_1 = require("../../utils/empty-cells");
 var error_bars_1 = require("../../utils/error-bars");
 var category_levels_1 = require("../../utils/category-levels");
 var gradient_1 = require("../../utils/gradient");
+var legend_layout_1 = require("../../utils/legend-layout");
 var plotly_title_1 = require("../../utils/plotly-title");
 var pie_explosion_1 = require("../../utils/pie-explosion");
 var plotly_click_1 = require("../../utils/plotly-click");
@@ -33,6 +33,7 @@ var radar_1 = require("../../utils/radar");
 var region_map_1 = require("../../utils/region-map");
 var stock_1 = require("../../utils/stock");
 var trendline_1 = require("../../utils/trendline");
+var plot_1 = require("../plot");
 var helpers_1 = require("./helpers");
 var BASIC_CHART_TYPES = new Set([
     "bar",
@@ -119,6 +120,16 @@ var applyLegendOverridesPlotly = function (legend, opts) {
     next.font = applyTextFormatToFont(next.font, opts.textFormat);
     return { legend: next, showlegend: true };
 };
+/**
+ * `title.standoff` for a VALUE axis. Without it plotly places the axis title
+ * a fixed ~34px from the axis line and only nudges it off the tick labels
+ * after measuring them — a currency axis ("$2,000,000.00") is wider than
+ * that, and on the first paint (before `automargin` has grown the margin)
+ * the title lands on top of its own tick labels. With a standoff plotly
+ * positions the title at `tick-label depth + standoff`, so it always clears
+ * the labels, and `automargin` grows the margin to fit (#37265 A8).
+ */
+var VALUE_AXIS_TITLE_STANDOFF = 12;
 /**
  * `numberFormatPattern` is the axis' RESOLVED format (explicit pattern or
  * the linked source-cell format). Plotly formats ticks AND hover values
@@ -363,7 +374,6 @@ var BasicChart = function (_a) {
     var hierarchyTitleRef = (0, react_1.useRef)(undefined);
     var explicitChartTitle = (_b = chart.spec.title) !== null && _b !== void 0 ? _b : undefined;
     var title = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : hierarchyTitleRef.current;
-    var plotRef = (0, react_1.useRef)(null);
     // The plotted `<div>` plotly hands back on init — what `Plotly.toImage`
     // rasterises for Copy as Picture and the print preview.
     var graphDivRef = (0, react_1.useRef)(null);
@@ -443,11 +453,11 @@ var BasicChart = function (_a) {
      * Triggers a chart update
      */
     var updateChart = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-        var traces, chartType, position, isBubble, isHierarchy, textColor, bgColor, gridColor, skipHeaders_1, labels, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _a, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _b, categories_1, preparedSeries, sizeValues, sizeScale_1, hasStringX_1, palette_1, isScatter_1, scatterStyle_1, plotlyModeForScatterStyle_1, lineShapeFor_1, traces_1, titleFmt, xAxisFmt, yAxisFmt, legendFmt, bubbleLayout, hierarchyRows, headerTitle, hierarchyData, seriesName, hierarchyTrace, layoutForHierarchy, labels, seriesEntry, rawValues_1, locations_1, z_1, ramp_1, colorscale, geoScope, regionTrace, surfaceToken, categories, surfaceSeriesInputs, _c, _d, seriesEntry, dataLabel, _e, _f, values, e_2_1, seriesNames, surfaceTrace, surfaceLayout, categories, radarStyle, radarTraces, radarInputs, _g, _h, seriesEntry, label, values, indicators, _loop_1, i, maxR, variant, categories, seriesValues, volumePoints_1, hasVolume, buildVolumeTrace, volumeLayout, priceYAxisDomain, roles, xs_1, candleTrace, lineSeries, stockPalette_1, xs_2, stockTraces, isStacked, isHorizontalBarChart, lineTraceVariant, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, domainData, categoryLevels, multicategoryX, aggregateDomainValues, domainAxisData, secondaryDomainData, categoriesFor, assignCartesianData, themeColorPalette, applyTraceColor, hasSecondaryAxis, hasSecondaryCategoryAxis, valueAxisKey, categoryAxisKey, secondaryValueAxisRef, secondaryCategoryAxisRef, isPareto, isOfPie, ofPieHandled, ofPieExtras, decorateCartesianTrace, domainSources, seriesIndex, _loop_2, _j, _k, series, e_3_1, authoredTitleFmt, isPercentStackedBars, primaryAxisNumberFormat, secondaryAxisNumberFormat, newLayout, dlOpts, doughnutHole, seriesNumberFormats, traceNumberFormat, piePull, formattedTraces, sortedTraces;
-        var e_2, _l, e_4, _m, e_3, _o, _p, _q;
-        var _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68;
-        return tslib_1.__generator(this, function (_69) {
-            switch (_69.label) {
+        var traces, chartType, position, isBubble, isHierarchy, textColor, bgColor, gridColor, skipHeaders_1, labels, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _a, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _b, categories_1, preparedSeries, sizeValues, sizeScale_1, hasStringX_1, palette_1, isScatter_1, scatterStyle_1, plotlyModeForScatterStyle_1, lineShapeFor_1, traces_1, titleFmt, xAxisFmt, yAxisFmt, legendFmt, bubbleLayout, hierarchyRows, headerTitle, hierarchyData, seriesName, hierarchyTrace, layoutForHierarchy, labels, seriesEntry, rawValues_1, locations_1, z_1, ramp_1, colorscale, geoScope, regionTrace, surfaceToken, categories, surfaceSeriesInputs, _c, _d, seriesEntry, dataLabel, _e, _f, values, e_2_1, seriesNames, surfaceTrace, surfaceLayout, categories, radarStyle, radarTraces, radarInputs, _g, _h, seriesEntry, label, values, indicators, _loop_1, i, maxR, variant, categories, seriesValues, volumePoints_1, hasVolume, buildVolumeTrace, volumeLayout, priceYAxisDomain, roles, xs_1, candleTrace, lineSeries, stockPalette_1, xs_2, stockTraces, isStacked, isHorizontalBarChart, lineTraceVariant, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, domainData, categoryLevels, multicategoryX, aggregateDomainValues, domainAxisData, secondaryDomainData, categoriesFor, assignCartesianData, themeColorPalette, applyTraceColor, hasSecondaryAxis, hasSecondaryCategoryAxis, valueAxisKey, categoryAxisKey, secondaryValueAxisRef, secondaryCategoryAxisRef, isPareto, isOfPie, ofPieHandled, ofPieExtras, decorateCartesianTrace, domainSources, seriesIndex, _loop_2, _j, _k, series, e_3_1, authoredTitleFmt, isPercentStackedBars, primaryAxisNumberFormat, secondaryAxisNumberFormat, _l, legendOverrides, showlegend, axisFontSize, primaryValues, leftAxisLabelDepth, leftAxisDepth, rightAxisDepth, bottomAxisTitleStandoff, legendBand, newLayout, dlOpts, doughnutHole, seriesNumberFormats, traceNumberFormat, piePull, formattedTraces, sortedTraces;
+        var e_2, _m, e_4, _o, e_3, _p, _q, _r;
+        var _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75;
+        return tslib_1.__generator(this, function (_76) {
+            switch (_76.label) {
                 case 0:
                     (0, utils_1.debug)("Updating chart", chart);
                     traces = [];
@@ -459,41 +469,41 @@ var BasicChart = function (_a) {
                         theme: 1,
                         tint: isDarkMode ? 1 : 0,
                     }, theme);
-                    bgColor = (_r = spec.backgroundColor) !== null && _r !== void 0 ? _r : (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
+                    bgColor = (_s = spec.backgroundColor) !== null && _s !== void 0 ? _s : (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
                     gridColor = isDarkMode ? "rgba(255,255,255,0.3)" : "#CCCCCC";
                     if (!isBubble) return [3 /*break*/, 6];
                     skipHeaders_1 = spec.useFirstRowAsHeaders !== false;
                     labels = flattenChartDataValues(spec.bubbleLabels, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1).map(bubble_1.toLabelString);
-                    perSeriesX = ((_s = spec.domains) !== null && _s !== void 0 ? _s : []).map(function (dom) {
+                    perSeriesX = ((_t = spec.domains) !== null && _t !== void 0 ? _t : []).map(function (dom) {
                         return flattenChartDataValues([dom], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
-                    perSeriesSize = ((_t = spec.bubbleSizes) !== null && _t !== void 0 ? _t : []).map(function (sz) {
+                    perSeriesSize = ((_u = spec.bubbleSizes) !== null && _u !== void 0 ? _u : []).map(function (sz) {
                         return flattenChartDataValues([sz], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
                     seriesInputs = [];
                     i = 0;
-                    _69.label = 1;
+                    _76.label = 1;
                 case 1:
                     if (!(i < spec.series.length)) return [3 /*break*/, 5];
                     seriesEntry = spec.series[i];
-                    resolvedLabel = (_u = seriesEntry.dataLabel) !== null && _u !== void 0 ? _u : "";
+                    resolvedLabel = (_v = seriesEntry.dataLabel) !== null && _v !== void 0 ? _v : "";
                     if (!(resolvedLabel && (0, utils_1.isAFormula)(resolvedLabel))) return [3 /*break*/, 3];
                     _a = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_v = chart.position.sheetId) !== null && _v !== void 0 ? _v : sheetId, chart.position.overlayPosition.anchorCell.rowIndex, chart.position.overlayPosition.anchorCell.columnIndex)];
+                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_w = chart.position.sheetId) !== null && _w !== void 0 ? _w : sheetId, chart.position.overlayPosition.anchorCell.rowIndex, chart.position.overlayPosition.anchorCell.columnIndex)];
                 case 2:
-                    resolvedLabel = _a.apply(void 0, [_69.sent()]);
-                    _69.label = 3;
+                    resolvedLabel = _a.apply(void 0, [_76.sent()]);
+                    _76.label = 3;
                 case 3:
-                    xValues = (_w = perSeriesX[i]) !== null && _w !== void 0 ? _w : perSeriesX[0];
-                    sizeValues_1 = (_x = perSeriesSize[i]) !== null && _x !== void 0 ? _x : perSeriesSize[0];
+                    xValues = (_x = perSeriesX[i]) !== null && _x !== void 0 ? _x : perSeriesX[0];
+                    sizeValues_1 = (_y = perSeriesSize[i]) !== null && _y !== void 0 ? _y : perSeriesSize[0];
                     seriesInputs.push(tslib_1.__assign(tslib_1.__assign({ name: resolvedLabel, values: flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1) }, (xValues ? { xValues: xValues } : {})), (sizeValues_1 ? { sizeValues: sizeValues_1 } : {})));
-                    _69.label = 4;
+                    _76.label = 4;
                 case 4:
                     i++;
                     return [3 /*break*/, 1];
                 case 5:
-                    sharedXValues = (_y = perSeriesX[0]) !== null && _y !== void 0 ? _y : [];
-                    sharedSizeValues = (_z = perSeriesSize[0]) !== null && _z !== void 0 ? _z : [];
+                    sharedXValues = (_z = perSeriesX[0]) !== null && _z !== void 0 ? _z : [];
+                    sharedSizeValues = (_0 = perSeriesSize[0]) !== null && _0 !== void 0 ? _0 : [];
                     _b = (0, bubble_1.prepareBubbleSeriesData)({
                         xValues: sharedXValues,
                         labelValues: labels,
@@ -511,7 +521,7 @@ var BasicChart = function (_a) {
                         theme.themeColors.accent6,
                     ]);
                     isScatter_1 = spec.chartType === "scatter";
-                    scatterStyle_1 = (_0 = spec.scatterStyle) !== null && _0 !== void 0 ? _0 : (isScatter_1 ? "lineMarker" : undefined);
+                    scatterStyle_1 = (_1 = spec.scatterStyle) !== null && _1 !== void 0 ? _1 : (isScatter_1 ? "lineMarker" : undefined);
                     plotlyModeForScatterStyle_1 = function (style) {
                         switch (style) {
                             case "line":
@@ -590,39 +600,39 @@ var BasicChart = function (_a) {
                         };
                     });
                     titleFmt = spec.titleTextFormat;
-                    xAxisFmt = (_1 = spec.categoryAxisOptions) === null || _1 === void 0 ? void 0 : _1.textFormat;
-                    yAxisFmt = (_2 = spec.valueAxisOptions) === null || _2 === void 0 ? void 0 : _2.textFormat;
-                    legendFmt = (_3 = spec.legend) === null || _3 === void 0 ? void 0 : _3.textFormat;
+                    xAxisFmt = (_2 = spec.categoryAxisOptions) === null || _2 === void 0 ? void 0 : _2.textFormat;
+                    yAxisFmt = (_3 = spec.valueAxisOptions) === null || _3 === void 0 ? void 0 : _3.textFormat;
+                    legendFmt = (_4 = spec.legend) === null || _4 === void 0 ? void 0 : _4.textFormat;
                     bubbleLayout = {
                         title: {
                             text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
                             font: {
-                                family: (_4 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontFamily) !== null && _4 !== void 0 ? _4 : "Untitled Sans, apple-system, sans-serif",
-                                size: (_5 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontSize) !== null && _5 !== void 0 ? _5 : 16,
-                                color: (_6 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.color) !== null && _6 !== void 0 ? _6 : textColor,
+                                family: (_5 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontFamily) !== null && _5 !== void 0 ? _5 : "Untitled Sans, apple-system, sans-serif",
+                                size: (_6 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontSize) !== null && _6 !== void 0 ? _6 : 16,
+                                color: (_7 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.color) !== null && _7 !== void 0 ? _7 : textColor,
                             },
                             x: 0.02,
                             xanchor: "left",
                         },
                         xaxis: {
                             title: {
-                                text: (_7 = spec.horizontalAxisTitle) !== null && _7 !== void 0 ? _7 : "",
-                                font: { color: (_8 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _8 !== void 0 ? _8 : textColor },
+                                text: (_8 = spec.horizontalAxisTitle) !== null && _8 !== void 0 ? _8 : "",
+                                font: { color: (_9 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _9 !== void 0 ? _9 : textColor },
                             },
                             gridcolor: gridColor,
-                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_9 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _9 !== void 0 ? _9 : textColor }, ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontFamily) ? { family: xAxisFmt.fontFamily } : {})), ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontSize) ? { size: xAxisFmt.fontSize } : {})),
+                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_10 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _10 !== void 0 ? _10 : textColor }, ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontFamily) ? { family: xAxisFmt.fontFamily } : {})), ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontSize) ? { size: xAxisFmt.fontSize } : {})),
                             type: hasStringX_1 ? "category" : "linear",
                         },
                         yaxis: {
                             title: {
-                                text: (_10 = spec.verticalAxisTitle) !== null && _10 !== void 0 ? _10 : "",
-                                font: { color: (_11 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _11 !== void 0 ? _11 : textColor },
+                                text: (_11 = spec.verticalAxisTitle) !== null && _11 !== void 0 ? _11 : "",
+                                font: { color: (_12 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _12 !== void 0 ? _12 : textColor },
                             },
                             gridcolor: gridColor,
-                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_12 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _12 !== void 0 ? _12 : textColor }, ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontFamily) ? { family: yAxisFmt.fontFamily } : {})), ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontSize) ? { size: yAxisFmt.fontSize } : {})),
+                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_13 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _13 !== void 0 ? _13 : textColor }, ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontFamily) ? { family: yAxisFmt.fontFamily } : {})), ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontSize) ? { size: yAxisFmt.fontSize } : {})),
                         },
                         legend: {
-                            font: tslib_1.__assign(tslib_1.__assign({ color: (_13 = legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.color) !== null && _13 !== void 0 ? _13 : textColor }, ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontFamily) ? { family: legendFmt.fontFamily } : {})), ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontSize) ? { size: legendFmt.fontSize } : {})),
+                            font: tslib_1.__assign(tslib_1.__assign({ color: (_14 = legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.color) !== null && _14 !== void 0 ? _14 : textColor }, ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontFamily) ? { family: legendFmt.fontFamily } : {})), ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontSize) ? { size: legendFmt.fontSize } : {})),
                         },
                         paper_bgcolor: bgColor,
                         plot_bgcolor: bgColor,
@@ -647,8 +657,8 @@ var BasicChart = function (_a) {
                         hierarchyTitleRef.current = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle;
                         hierarchyData = (0, hierarchy_1.toPlotlyHierarchy)(hierarchyRows);
                         seriesName = hierarchyData.labels.length === 1
-                            ? (_14 = hierarchyData.labels[0]) !== null && _14 !== void 0 ? _14 : ""
-                            : (_15 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _15 !== void 0 ? _15 : "";
+                            ? (_15 = hierarchyData.labels[0]) !== null && _15 !== void 0 ? _15 : ""
+                            : (_16 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _16 !== void 0 ? _16 : "";
                         hierarchyTrace = {
                             type: chartType,
                             labels: hierarchyData.labels,
@@ -697,7 +707,7 @@ var BasicChart = function (_a) {
                     // country-name matching and silently skips labels it can't place.
                     if ((0, region_map_1.isRegionMapSpec)(spec)) {
                         labels = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : "").trim(); });
-                        seriesEntry = (_16 = spec.series) === null || _16 === void 0 ? void 0 : _16[0];
+                        seriesEntry = (_17 = spec.series) === null || _17 === void 0 ? void 0 : _17[0];
                         rawValues_1 = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
                             : [];
@@ -762,39 +772,39 @@ var BasicChart = function (_a) {
                     if (!(surfaceToken === "SURFACE" || surfaceToken === "SURFACE_3D")) return [3 /*break*/, 17];
                     categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
                     surfaceSeriesInputs = [];
-                    _69.label = 7;
+                    _76.label = 7;
                 case 7:
-                    _69.trys.push([7, 14, 15, 16]);
-                    _c = tslib_1.__values((_17 = spec.series) !== null && _17 !== void 0 ? _17 : []), _d = _c.next();
-                    _69.label = 8;
+                    _76.trys.push([7, 14, 15, 16]);
+                    _c = tslib_1.__values((_18 = spec.series) !== null && _18 !== void 0 ? _18 : []), _d = _c.next();
+                    _76.label = 8;
                 case 8:
                     if (!!_d.done) return [3 /*break*/, 13];
                     seriesEntry = _d.value;
                     if (!(!(0, utils_1.isNil)(seriesEntry.dataLabel) && (0, utils_1.isAFormula)(seriesEntry.dataLabel))) return [3 /*break*/, 10];
                     _f = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_18 = position.sheetId) !== null && _18 !== void 0 ? _18 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_19 = position.sheetId) !== null && _19 !== void 0 ? _19 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                 case 9:
-                    _e = _f.apply(void 0, [_69.sent()]);
+                    _e = _f.apply(void 0, [_76.sent()]);
                     return [3 /*break*/, 11];
                 case 10:
-                    _e = (_19 = seriesEntry.dataLabel) !== null && _19 !== void 0 ? _19 : "";
-                    _69.label = 11;
+                    _e = (_20 = seriesEntry.dataLabel) !== null && _20 !== void 0 ? _20 : "";
+                    _76.label = 11;
                 case 11:
                     dataLabel = _e;
                     values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
                     surfaceSeriesInputs.push({ name: dataLabel, values: values });
-                    _69.label = 12;
+                    _76.label = 12;
                 case 12:
                     _d = _c.next();
                     return [3 /*break*/, 8];
                 case 13: return [3 /*break*/, 16];
                 case 14:
-                    e_2_1 = _69.sent();
+                    e_2_1 = _76.sent();
                     e_2 = { error: e_2_1 };
                     return [3 /*break*/, 16];
                 case 15:
                     try {
-                        if (_d && !_d.done && (_l = _c.return)) _l.call(_c);
+                        if (_d && !_d.done && (_m = _c.return)) _m.call(_c);
                     }
                     finally { if (e_2) throw e_2.error; }
                     return [7 /*endfinally*/];
@@ -817,21 +827,21 @@ var BasicChart = function (_a) {
                         }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: false, margin: { l: 60, r: 20, t: 50, b: 50 } }, (surfaceToken === "SURFACE"
                         ? {
                             xaxis: {
-                                title: { text: (_20 = spec.horizontalAxisTitle) !== null && _20 !== void 0 ? _20 : "" },
+                                title: { text: (_21 = spec.horizontalAxisTitle) !== null && _21 !== void 0 ? _21 : "" },
                                 automargin: true,
                                 color: textColor,
                             },
                             yaxis: {
-                                title: { text: (_21 = spec.verticalAxisTitle) !== null && _21 !== void 0 ? _21 : "" },
+                                title: { text: (_22 = spec.verticalAxisTitle) !== null && _22 !== void 0 ? _22 : "" },
                                 automargin: true,
                                 color: textColor,
                             },
                         }
                         : {
                             scene: {
-                                xaxis: { title: { text: (_22 = spec.horizontalAxisTitle) !== null && _22 !== void 0 ? _22 : "" } },
+                                xaxis: { title: { text: (_23 = spec.horizontalAxisTitle) !== null && _23 !== void 0 ? _23 : "" } },
                                 yaxis: { title: { text: "" } },
-                                zaxis: { title: { text: (_23 = spec.verticalAxisTitle) !== null && _23 !== void 0 ? _23 : "" } },
+                                zaxis: { title: { text: (_24 = spec.verticalAxisTitle) !== null && _24 !== void 0 ? _24 : "" } },
                             },
                         }));
                     setPlotData([surfaceTrace]);
@@ -843,11 +853,11 @@ var BasicChart = function (_a) {
                     // theta = the category names (closed by appending the first point).
                     if (spec.chartType === "radar") {
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        radarStyle = (_24 = spec.radarStyle) !== null && _24 !== void 0 ? _24 : "standard";
+                        radarStyle = (_25 = spec.radarStyle) !== null && _25 !== void 0 ? _25 : "standard";
                         radarTraces = [];
                         radarInputs = [];
                         try {
-                            for (_g = tslib_1.__values((_25 = spec.series) !== null && _25 !== void 0 ? _25 : []), _h = _g.next(); !_h.done; _h = _g.next()) {
+                            for (_g = tslib_1.__values((_26 = spec.series) !== null && _26 !== void 0 ? _26 : []), _h = _g.next(); !_h.done; _h = _g.next()) {
                                 seriesEntry = _h.value;
                                 label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                                     ? seriesEntry.dataLabel
@@ -859,14 +869,14 @@ var BasicChart = function (_a) {
                         catch (e_4_1) { e_4 = { error: e_4_1 }; }
                         finally {
                             try {
-                                if (_h && !_h.done && (_m = _g.return)) _m.call(_g);
+                                if (_h && !_h.done && (_o = _g.return)) _o.call(_g);
                             }
                             finally { if (e_4) throw e_4.error; }
                         }
                         indicators = (0, radar_1.buildRadarIndicators)(categories, radarInputs);
                         _loop_1 = function (i) {
                             var input = radarInputs[i];
-                            var seriesColor = (_28 = (_27 = (_26 = spec.series) === null || _26 === void 0 ? void 0 : _26[i]) === null || _27 === void 0 ? void 0 : _27.color) !== null && _28 !== void 0 ? _28 : undefined;
+                            var seriesColor = (_29 = (_28 = (_27 = spec.series) === null || _27 === void 0 ? void 0 : _27[i]) === null || _28 === void 0 ? void 0 : _28.color) !== null && _29 !== void 0 ? _29 : undefined;
                             var r = indicators.map(function (_, idx) { var _a; return (_a = input.values[idx]) !== null && _a !== void 0 ? _a : 0; });
                             var theta = indicators.map(function (ind) { return ind.name; });
                             radarTraces.push(tslib_1.__assign(tslib_1.__assign({ type: "scatterpolar", r: r.length ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(r), false), [r[0]], false) : r, theta: theta.length ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(theta), false), [theta[0]], false) : theta, name: input.name, mode: radarStyle === "standard" ? "lines" : "lines+markers" }, (radarStyle === "filled" ? { fill: "toself" } : {})), (seriesColor ? { line: { color: seriesColor } } : {})));
@@ -898,13 +908,13 @@ var BasicChart = function (_a) {
                     // V-variants additionally get a volume column sub-pane below the
                     // price plot.
                     if (spec.chartType === "stock") {
-                        variant = ((_29 = spec.stockVariant) !== null && _29 !== void 0 ? _29 : "HLC");
+                        variant = ((_30 = spec.stockVariant) !== null && _30 !== void 0 ? _30 : "HLC");
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesValues = ((_30 = spec.series) !== null && _30 !== void 0 ? _30 : []).map(function (seriesEntry) {
+                        seriesValues = ((_31 = spec.series) !== null && _31 !== void 0 ? _31 : []).map(function (seriesEntry) {
                             return flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
                         });
                         volumePoints_1 = (0, stock_1.toVolumeSeries)(seriesValues, variant);
-                        hasVolume = ((_31 = volumePoints_1 === null || volumePoints_1 === void 0 ? void 0 : volumePoints_1.length) !== null && _31 !== void 0 ? _31 : 0) > 0;
+                        hasVolume = ((_32 = volumePoints_1 === null || volumePoints_1 === void 0 ? void 0 : volumePoints_1.length) !== null && _32 !== void 0 ? _32 : 0) > 0;
                         buildVolumeTrace = function (xs) {
                             return ({
                                 type: "bar",
@@ -937,25 +947,25 @@ var BasicChart = function (_a) {
                             roles = (0, stock_1.assignStockRoles)(seriesValues, variant);
                             xs_1 = categories.length > 0
                                 ? categories
-                                : ((_32 = roles.close) !== null && _32 !== void 0 ? _32 : []).map(function (_, i) { return i + 1; });
+                                : ((_33 = roles.close) !== null && _33 !== void 0 ? _33 : []).map(function (_, i) { return i + 1; });
                             candleTrace = {
                                 type: "candlestick",
                                 x: xs_1,
-                                open: ((_33 = roles.open) !== null && _33 !== void 0 ? _33 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                high: ((_34 = roles.high) !== null && _34 !== void 0 ? _34 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                low: ((_35 = roles.low) !== null && _35 !== void 0 ? _35 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                close: ((_36 = roles.close) !== null && _36 !== void 0 ? _36 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                open: ((_34 = roles.open) !== null && _34 !== void 0 ? _34 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                high: ((_35 = roles.high) !== null && _35 !== void 0 ? _35 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                low: ((_36 = roles.low) !== null && _36 !== void 0 ? _36 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                close: ((_37 = roles.close) !== null && _37 !== void 0 ? _37 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
                                 increasing: { line: { color: theme.themeColors.accent1 } },
                                 decreasing: { line: { color: theme.themeColors.accent2 } },
                             };
                             setPlotData(hasVolume ? [candleTrace, buildVolumeTrace(xs_1)] : [candleTrace]);
                             setLayout(tslib_1.__assign(tslib_1.__assign({ title: { text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat) }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: false, xaxis: {
-                                    title: { text: (_37 = spec.horizontalAxisTitle) !== null && _37 !== void 0 ? _37 : "" },
+                                    title: { text: (_38 = spec.horizontalAxisTitle) !== null && _38 !== void 0 ? _38 : "" },
                                     automargin: true,
                                     showgrid: true,
                                     gridcolor: gridColor,
                                     rangeslider: { visible: false },
-                                }, yaxis: tslib_1.__assign({ title: { text: (_38 = spec.verticalAxisTitle) !== null && _38 !== void 0 ? _38 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
+                                }, yaxis: tslib_1.__assign({ title: { text: (_39 = spec.verticalAxisTitle) !== null && _39 !== void 0 ? _39 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
                             return [2 /*return*/];
                         }
                         lineSeries = (0, stock_1.toLineSeries)(seriesValues, variant);
@@ -967,7 +977,7 @@ var BasicChart = function (_a) {
                         ]);
                         xs_2 = categories.length > 0
                             ? categories
-                            : ((_40 = (_39 = lineSeries[0]) === null || _39 === void 0 ? void 0 : _39.values) !== null && _40 !== void 0 ? _40 : []).map(function (_, i) { return i + 1; });
+                            : ((_41 = (_40 = lineSeries[0]) === null || _40 === void 0 ? void 0 : _40.values) !== null && _41 !== void 0 ? _41 : []).map(function (_, i) { return i + 1; });
                         stockTraces = lineSeries.map(function (s, i) { return ({
                             type: "scatter",
                             mode: "lines",
@@ -978,16 +988,16 @@ var BasicChart = function (_a) {
                         }); });
                         setPlotData(hasVolume ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(stockTraces), false), [buildVolumeTrace(xs_2)], false) : stockTraces);
                         setLayout(tslib_1.__assign(tslib_1.__assign({ title: { text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat) }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: stockTraces.length > 1, xaxis: {
-                                title: { text: (_41 = spec.horizontalAxisTitle) !== null && _41 !== void 0 ? _41 : "" },
+                                title: { text: (_42 = spec.horizontalAxisTitle) !== null && _42 !== void 0 ? _42 : "" },
                                 automargin: true,
                                 showgrid: true,
                                 gridcolor: gridColor,
-                            }, yaxis: tslib_1.__assign({ title: { text: (_42 = spec.verticalAxisTitle) !== null && _42 !== void 0 ? _42 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
+                            }, yaxis: tslib_1.__assign({ title: { text: (_43 = spec.verticalAxisTitle) !== null && _43 !== void 0 ? _43 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
                         return [2 /*return*/];
                     }
                     isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
                     isHorizontalBarChart = spec.chartType === "bar";
-                    lineTraceVariant = function (series, effectiveChartType) {
+                    lineTraceVariant = function (series, effectiveChartType, values) {
                         var _a, _b;
                         if (effectiveChartType !== "line" && effectiveChartType !== "area") {
                             return {};
@@ -1009,16 +1019,32 @@ var BasicChart = function (_a) {
                                     size: (_b = marker === null || marker === void 0 ? void 0 : marker.size) !== null && _b !== void 0 ? _b : 6,
                                 };
                             }
+                            else {
+                                // A marker-less line draws nothing for a point with a gap on both sides (a data
+                                // row followed by a blank row — the first row included), so that row vanishes from
+                                // the chart. Excel plots an isolated marker there: keep the line and give only those
+                                // points a marker (plotly's `marker.size` / `marker.opacity` are per-point arrays;
+                                // a 0-size, 0-opacity marker paints nothing on the connected points).
+                                var isolated_1 = new Set((0, empty_cells_1.isolatedPointIndexes)(values, (0, empty_cells_1.connectsAcrossEmptyCells)(spec, true)));
+                                if (isolated_1.size) {
+                                    extra.mode = "lines+markers";
+                                    extra.marker = {
+                                        symbol: "circle",
+                                        size: values.map(function (_, i) { return (isolated_1.has(i) ? 6 : 0); }),
+                                        opacity: values.map(function (_, i) { return (isolated_1.has(i) ? 1 : 0); }),
+                                    };
+                                }
+                            }
                         }
                         return extra;
                     };
                     shouldAggregate = (0, aggregation_1.shouldAggregateSeries)(spec.series);
-                    primaryDomainSource = (_45 = (_44 = (_43 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _43 === void 0 ? void 0 : _43[0]) === null || _44 === void 0 ? void 0 : _44.sources) === null || _45 === void 0 ? void 0 : _45[0];
+                    primaryDomainSource = (_46 = (_45 = (_44 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _44 === void 0 ? void 0 : _44[0]) === null || _45 === void 0 ? void 0 : _45.sources) === null || _46 === void 0 ? void 0 : _46[0];
                     rawPrimaryDomainValues = primaryDomainSource
-                        ? (0, aggregation_1.sanitizeDomainValues)((_46 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _46 !== void 0 ? _46 : [])
+                        ? (0, aggregation_1.sanitizeDomainValues)((_47 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _47 !== void 0 ? _47 : [])
                         : [];
                     domainData = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
-                    categoryLevels = (0, category_levels_1.resolveCategoryLevels)((_47 = spec.categoryLevels) === null || _47 === void 0 ? void 0 : _47.map(function (level) {
+                    categoryLevels = (0, category_levels_1.resolveCategoryLevels)((_48 = spec.categoryLevels) === null || _48 === void 0 ? void 0 : _48.map(function (level) {
                         return flattenChartDataValues([level], getDomainValuesFromRange, spec.hiddenDimensionStrategy, false);
                     }));
                     multicategoryX = categoryLevels
@@ -1028,7 +1054,7 @@ var BasicChart = function (_a) {
                         domainData = categoryLevels.leaf;
                     }
                     aggregateDomainValues = domainData;
-                    domainAxisData = (categoryLevels ? [] : (_48 = spec.domains) !== null && _48 !== void 0 ? _48 : []).map(function (domain, domainIndex) {
+                    domainAxisData = (categoryLevels ? [] : (_49 = spec.domains) !== null && _49 !== void 0 ? _49 : []).map(function (domain, domainIndex) {
                         return domain.sources.flatMap(function (sheetRange, sourceIndex) {
                             var _a;
                             if (domainIndex === 0 && sourceIndex === 0) {
@@ -1284,29 +1310,29 @@ var BasicChart = function (_a) {
                             finally { if (e_6) throw e_6.error; }
                         }
                     };
-                    domainSources = (_51 = (_50 = (_49 = spec.domains) === null || _49 === void 0 ? void 0 : _49[0]) === null || _50 === void 0 ? void 0 : _50.sources) !== null && _51 !== void 0 ? _51 : [];
+                    domainSources = (_52 = (_51 = (_50 = spec.domains) === null || _50 === void 0 ? void 0 : _50[0]) === null || _51 === void 0 ? void 0 : _51.sources) !== null && _52 !== void 0 ? _52 : [];
                     seriesIndex = 0;
                     _loop_2 = function (series) {
-                        var currentSeriesIndex, dataLabel, _70, _71, effectiveChartType, lineLike, pieDomainLabels, piePointOffset, seriesData, seriesPlotlyType, seriesTraceStyle, rawValues, binCount, _72, labels, counts, cumulativePercents, barTrace, trace, rawValues, quartileMethod, showOutliers, showMeanMarker, usePrecomputed, trace, summary, hideOutliers, rawValues, totalIndices_1, trace, rawValues, trace, pieData, _73, main_1, secondary, otherTotal, total, ofPieType, secondScale, halfAngle, paletteAt_1, MAIN_DOMAIN_X, CY, SECONDARY_CX, BAR_LEFT, BAR_RIGHT, plotW, plotH, hasGeometry, r, r2, clampFrac, rx2, ry2, barHalf, shapes, connectorColor, mainCx, px, pyTop, pyBottom, tx, half, line, pieData, trace, _74, x, y, orientation_1, trace, numericValues, _75, x, y, orientation_2, trace;
-                        return tslib_1.__generator(this, function (_76) {
-                            switch (_76.label) {
+                        var currentSeriesIndex, dataLabel, _77, _78, effectiveChartType, lineLike, pieDomainLabels, piePointOffset, seriesData, seriesPlotlyType, seriesTraceStyle, rawValues, binCount, _79, labels, counts, cumulativePercents, barTrace, trace, rawValues, quartileMethod, showOutliers, showMeanMarker, usePrecomputed, trace, summary, hideOutliers, rawValues, totalIndices_1, trace, rawValues, trace, pieData, _80, main_1, secondary, otherTotal, total, ofPieType, secondScale, halfAngle, paletteAt_1, MAIN_DOMAIN_X, CY, SECONDARY_CX, BAR_LEFT, BAR_RIGHT, plotW, plotH, hasGeometry, r, r2, clampFrac, rx2, ry2, barHalf, shapes, connectorColor, mainCx, px, pyTop, pyBottom, tx, half, line, pieData, trace, _81, x, y, orientation_1, trace, numericValues, _82, x, y, orientation_2, trace;
+                        return tslib_1.__generator(this, function (_83) {
+                            switch (_83.label) {
                                 case 0:
                                     currentSeriesIndex = seriesIndex++;
                                     if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 2];
-                                    _71 = chart_spec_utils_1.coerceCalculatedLabel;
-                                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_53 = position.sheetId) !== null && _53 !== void 0 ? _53 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                                    _78 = chart_spec_utils_1.coerceCalculatedLabel;
+                                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_54 = position.sheetId) !== null && _54 !== void 0 ? _54 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                                 case 1:
-                                    _70 = _71.apply(void 0, [_76.sent()]);
+                                    _77 = _78.apply(void 0, [_83.sent()]);
                                     return [3 /*break*/, 3];
                                 case 2:
-                                    _70 = (_54 = series.dataLabel) !== null && _54 !== void 0 ? _54 : "";
-                                    _76.label = 3;
+                                    _77 = (_55 = series.dataLabel) !== null && _55 !== void 0 ? _55 : "";
+                                    _83.label = 3;
                                 case 3:
-                                    dataLabel = _70;
+                                    dataLabel = _77;
                                     // A series with no ranges draws nothing.
                                     if (series.sources.length === 0)
                                         return [2 /*return*/, "continue"];
-                                    effectiveChartType = (_55 = series.seriesChartType) !== null && _55 !== void 0 ? _55 : spec.chartType;
+                                    effectiveChartType = (_56 = series.seriesChartType) !== null && _56 !== void 0 ? _56 : spec.chartType;
                                     lineLike = (0, empty_cells_1.isLineLikeChartType)(effectiveChartType);
                                     pieDomainLabels = (spec.chartType === "pie" || spec.chartType === "doughnut") &&
                                         (domainSources.length > 1 || series.sources.length > 1)
@@ -1344,14 +1370,14 @@ var BasicChart = function (_a) {
                                             : seriesData;
                                         binCount = spec.binCount;
                                         if (isPareto) {
-                                            _72 = (0, histogram_1.computePareto)((0, histogram_1.binHistogram)(rawValues, binCount)), labels = _72.labels, counts = _72.counts, cumulativePercents = _72.cumulativePercents;
+                                            _79 = (0, histogram_1.computePareto)((0, histogram_1.binHistogram)(rawValues, binCount)), labels = _79.labels, counts = _79.counts, cumulativePercents = _79.cumulativePercents;
                                             barTrace = {
                                                 type: "bar",
                                                 x: labels,
                                                 y: counts,
                                                 name: dataLabel,
                                             };
-                                            applyTraceColor(barTrace, (_56 = series.color) !== null && _56 !== void 0 ? _56 : undefined, {
+                                            applyTraceColor(barTrace, (_57 = series.color) !== null && _57 !== void 0 ? _57 : undefined, {
                                                 noFill: series.noFill,
                                                 dataPointColors: series.dataPointColors,
                                                 seriesIndex: currentSeriesIndex,
@@ -1372,7 +1398,7 @@ var BasicChart = function (_a) {
                                             trace = tslib_1.__assign({ type: "histogram", x: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }), name: dataLabel }, (typeof binCount === "number" && binCount > 0
                                                 ? { nbinsx: binCount }
                                                 : {}));
-                                            applyTraceColor(trace, (_57 = series.color) !== null && _57 !== void 0 ? _57 : undefined, {
+                                            applyTraceColor(trace, (_58 = series.color) !== null && _58 !== void 0 ? _58 : undefined, {
                                                 noFill: series.noFill,
                                                 dataPointColors: series.dataPointColors,
                                                 seriesIndex: currentSeriesIndex,
@@ -1422,7 +1448,7 @@ var BasicChart = function (_a) {
                                                 // default and `showOutliers: true` alike).
                                                 boxpoints: "outliers" }, (showMeanMarker ? { boxmean: true } : {}));
                                         }
-                                        applyTraceColor(trace, (_58 = series.color) !== null && _58 !== void 0 ? _58 : undefined, {
+                                        applyTraceColor(trace, (_59 = series.color) !== null && _59 !== void 0 ? _59 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             seriesIndex: currentSeriesIndex,
@@ -1434,7 +1460,7 @@ var BasicChart = function (_a) {
                                         rawValues = "values" in seriesData
                                             ? seriesData.values
                                             : seriesData;
-                                        totalIndices_1 = new Set((_59 = spec.totalIndices) !== null && _59 !== void 0 ? _59 : []);
+                                        totalIndices_1 = new Set((_60 = spec.totalIndices) !== null && _60 !== void 0 ? _60 : []);
                                         trace = {
                                             type: "waterfall",
                                             x: categoriesFor(series),
@@ -1444,7 +1470,7 @@ var BasicChart = function (_a) {
                                             }),
                                             name: dataLabel,
                                         };
-                                        applyTraceColor(trace, (_60 = series.color) !== null && _60 !== void 0 ? _60 : undefined, {
+                                        applyTraceColor(trace, (_61 = series.color) !== null && _61 !== void 0 ? _61 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             seriesIndex: currentSeriesIndex,
@@ -1462,7 +1488,7 @@ var BasicChart = function (_a) {
                                             x: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
                                             name: dataLabel,
                                         };
-                                        applyTraceColor(trace, (_61 = series.color) !== null && _61 !== void 0 ? _61 : undefined, {
+                                        applyTraceColor(trace, (_62 = series.color) !== null && _62 !== void 0 ? _62 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             seriesIndex: currentSeriesIndex,
@@ -1480,10 +1506,10 @@ var BasicChart = function (_a) {
                                             return [2 /*return*/, "continue"];
                                         ofPieHandled = true;
                                         pieData = seriesData;
-                                        _73 = (0, of_pie_1.splitOfPie)(pieData.values, pieData.labels, {
+                                        _80 = (0, of_pie_1.splitOfPie)(pieData.values, pieData.labels, {
                                             splitType: spec.splitType,
                                             splitPos: spec.splitPos,
-                                        }), main_1 = _73.main, secondary = _73.secondary, otherTotal = _73.otherTotal, total = _73.total;
+                                        }), main_1 = _80.main, secondary = _80.secondary, otherTotal = _80.otherTotal, total = _80.total;
                                         ofPieType = (0, of_pie_1.resolveOfPieType)(spec.ofPieType);
                                         secondScale = (0, of_pie_1.clampSecondPieSize)(spec.secondPieSize) / 100;
                                         halfAngle = (0, of_pie_1.otherSliceHalfAngle)(otherTotal, total);
@@ -1614,7 +1640,7 @@ var BasicChart = function (_a) {
                                         trace.meta = {
                                             rncSeriesIndex: currentSeriesIndex,
                                         };
-                                        applyTraceColor(trace, (_62 = series.color) !== null && _62 !== void 0 ? _62 : undefined, {
+                                        applyTraceColor(trace, (_63 = series.color) !== null && _63 !== void 0 ? _63 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             seriesIndex: currentSeriesIndex,
@@ -1623,13 +1649,13 @@ var BasicChart = function (_a) {
                                         traces.push(trace);
                                     }
                                     else if ("values" in seriesData && "labels" in seriesData) {
-                                        _74 = assignCartesianData(categoriesFor(series), seriesData.values), x = _74.x, y = _74.y, orientation_1 = _74.orientation;
-                                        trace = tslib_1.__assign(tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_1, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle), lineTraceVariant(series, effectiveChartType));
+                                        _81 = assignCartesianData(categoriesFor(series), seriesData.values), x = _81.x, y = _81.y, orientation_1 = _81.orientation;
+                                        trace = tslib_1.__assign(tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_1, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle), lineTraceVariant(series, effectiveChartType, seriesData.values));
                                         // Ties the trace back to spec.series for click selection
                                         trace.meta = {
                                             rncSeriesIndex: currentSeriesIndex,
                                         };
-                                        applyTraceColor(trace, (_63 = series.color) !== null && _63 !== void 0 ? _63 : undefined, {
+                                        applyTraceColor(trace, (_64 = series.color) !== null && _64 !== void 0 ? _64 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             invertIfNegative: series.invertIfNegative,
@@ -1644,13 +1670,13 @@ var BasicChart = function (_a) {
                                     }
                                     else {
                                         numericValues = seriesData;
-                                        _75 = assignCartesianData(categoriesFor(series), numericValues), x = _75.x, y = _75.y, orientation_2 = _75.orientation;
-                                        trace = tslib_1.__assign(tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_2, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle), lineTraceVariant(series, effectiveChartType));
+                                        _82 = assignCartesianData(categoriesFor(series), numericValues), x = _82.x, y = _82.y, orientation_2 = _82.orientation;
+                                        trace = tslib_1.__assign(tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_2, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle), lineTraceVariant(series, effectiveChartType, numericValues));
                                         // Ties the trace back to spec.series for click selection
                                         trace.meta = {
                                             rncSeriesIndex: currentSeriesIndex,
                                         };
-                                        applyTraceColor(trace, (_64 = series.color) !== null && _64 !== void 0 ? _64 : undefined, {
+                                        applyTraceColor(trace, (_65 = series.color) !== null && _65 !== void 0 ? _65 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             invertIfNegative: series.invertIfNegative,
@@ -1667,29 +1693,29 @@ var BasicChart = function (_a) {
                             }
                         });
                     };
-                    _69.label = 18;
+                    _76.label = 18;
                 case 18:
-                    _69.trys.push([18, 23, 24, 25]);
-                    _j = tslib_1.__values((_52 = spec.series) !== null && _52 !== void 0 ? _52 : []), _k = _j.next();
-                    _69.label = 19;
+                    _76.trys.push([18, 23, 24, 25]);
+                    _j = tslib_1.__values((_53 = spec.series) !== null && _53 !== void 0 ? _53 : []), _k = _j.next();
+                    _76.label = 19;
                 case 19:
                     if (!!_k.done) return [3 /*break*/, 22];
                     series = _k.value;
                     return [5 /*yield**/, _loop_2(series)];
                 case 20:
-                    _69.sent();
-                    _69.label = 21;
+                    _76.sent();
+                    _76.label = 21;
                 case 21:
                     _k = _j.next();
                     return [3 /*break*/, 19];
                 case 22: return [3 /*break*/, 25];
                 case 23:
-                    e_3_1 = _69.sent();
+                    e_3_1 = _76.sent();
                     e_3 = { error: e_3_1 };
                     return [3 /*break*/, 25];
                 case 24:
                     try {
-                        if (_k && !_k.done && (_o = _j.return)) _o.call(_j);
+                        if (_k && !_k.done && (_p = _j.return)) _p.call(_j);
                     }
                     finally { if (e_3) throw e_3.error; }
                     return [7 /*endfinally*/];
@@ -1701,33 +1727,93 @@ var BasicChart = function (_a) {
                         ? undefined
                         : (0, axis_number_format_1.resolveValueAxisNumberFormat)({
                             axisOptions: spec.valueAxisOptions,
-                            series: ((_65 = spec.series) !== null && _65 !== void 0 ? _65 : []).filter(function (s) { return !s.useSecondaryAxis; }),
+                            series: ((_66 = spec.series) !== null && _66 !== void 0 ? _66 : []).filter(function (s) { return !s.useSecondaryAxis; }),
                             getFormattingFromRange: getFormattingFromRange,
                             hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                         });
                     secondaryAxisNumberFormat = (0, axis_number_format_1.resolveValueAxisNumberFormat)({
                         axisOptions: spec.secondaryValueAxisOptions,
-                        series: ((_66 = spec.series) !== null && _66 !== void 0 ? _66 : []).filter(function (s) { return s.useSecondaryAxis; }),
+                        series: ((_67 = spec.series) !== null && _67 !== void 0 ? _67 : []).filter(function (s) { return s.useSecondaryAxis; }),
                         getFormattingFromRange: getFormattingFromRange,
                         hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                     });
-                    newLayout = tslib_1.__assign(tslib_1.__assign({ title: {
-                            text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
-                            font: applyTextFormatToFont({
+                    _l = applyLegendOverridesPlotly({ font: { color: textColor } }, spec.legend), legendOverrides = _l.legend, showlegend = _l.showlegend;
+                    axisFontSize = 12;
+                    primaryValues = traces.flatMap(function (trace) {
+                        var values = isHorizontalBarChart ? trace === null || trace === void 0 ? void 0 : trace.x : trace === null || trace === void 0 ? void 0 : trace.y;
+                        return (trace === null || trace === void 0 ? void 0 : trace[valueAxisKey]) === secondaryValueAxisRef || !Array.isArray(values)
+                            ? []
+                            : values;
+                    });
+                    leftAxisLabelDepth = isHorizontalBarChart
+                        ? Math.ceil(Math.max.apply(Math, tslib_1.__spreadArray([0], tslib_1.__read((domainData !== null && domainData !== void 0 ? domainData : []).map(function (label) {
+                            return (0, legend_layout_1.measureTextWidth)(String(label !== null && label !== void 0 ? label : ""), axisFontSize);
+                        })), false))) + 8
+                        : (0, axis_number_format_1.valueAxisNameGap)({
+                            values: primaryValues,
+                            pattern: primaryAxisNumberFormat,
+                            fontSize: axisFontSize,
+                            minimum: 0,
+                        }) -
+                            axisFontSize -
+                            6;
+                    leftAxisDepth = leftAxisLabelDepth +
+                        (spec.verticalAxisTitle
+                            ? VALUE_AXIS_TITLE_STANDOFF + Math.ceil(axisFontSize * 1.3)
+                            : 0);
+                    rightAxisDepth = hasSecondaryAxis && !isHorizontalBarChart
+                        ? (0, axis_number_format_1.valueAxisNameGap)({
+                            values: traces.flatMap(function (trace) {
+                                return (trace === null || trace === void 0 ? void 0 : trace[valueAxisKey]) === secondaryValueAxisRef && Array.isArray(trace === null || trace === void 0 ? void 0 : trace.y)
+                                    ? trace.y
+                                    : [];
+                            }),
+                            pattern: secondaryAxisNumberFormat,
+                            fontSize: axisFontSize,
+                            minimum: 0,
+                        }) -
+                            axisFontSize -
+                            6
+                        : 0;
+                    bottomAxisTitleStandoff = isHorizontalBarChart
+                        ? VALUE_AXIS_TITLE_STANDOFF
+                        : legend_layout_1.BAND_GAP;
+                    legendBand = (0, legend_layout_1.reservePlotlyLegendBand)({
+                        position: (_68 = spec.legend) === null || _68 === void 0 ? void 0 : _68.position,
+                        visible: showlegend !== false,
+                        labels: (0, legend_layout_1.legendLabelsFrom)(undefined, traces.map(function (trace) { return trace === null || trace === void 0 ? void 0 : trace.name; })),
+                        legendFontSize: (_71 = (_70 = (_69 = spec.legend) === null || _69 === void 0 ? void 0 : _69.textFormat) === null || _70 === void 0 ? void 0 : _70.fontSize) !== null && _71 !== void 0 ? _71 : axisFontSize,
+                        width: Math.max(0, (width !== null && width !== void 0 ? width : 0) - 2),
+                        height: Math.max(0, (height !== null && height !== void 0 ? height : 0) - 2),
+                        hasTitle: Boolean(title),
+                        titleFontSize: (_72 = authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.fontSize) !== null && _72 !== void 0 ? _72 : 16,
+                        hasBottomAxisTitle: Boolean(spec.horizontalAxisTitle),
+                        hasLeftAxisTitle: Boolean(spec.verticalAxisTitle),
+                        leftAxisDepth: leftAxisDepth,
+                        rightAxisDepth: rightAxisDepth,
+                        bottomAxisTitleStandoff: bottomAxisTitleStandoff,
+                        axisFontSize: axisFontSize,
+                    });
+                    newLayout = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ title: tslib_1.__assign({ text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat), font: applyTextFormatToFont({
                                 family: "Untitled Sans, apple-system, sans-serif",
                                 size: 16,
                                 color: textColor,
-                            }, authoredTitleFmt),
-                            x: 0.02, // Small left margin (0.02 = 2% from left edge)
-                            xanchor: "left",
-                        }, font: {
+                            }, authoredTitleFmt), x: 0.02, xanchor: "left" }, legendBand.title), showlegend: showlegend === undefined ? true : showlegend, legend: tslib_1.__assign(tslib_1.__assign({}, legendOverrides), ((_73 = legendBand.legend) !== null && _73 !== void 0 ? _73 : {})), margin: legendBand.margin, autosize: true }, ((spec.chartType === "bar" || spec.chartType === "column") &&
+                        spec.stackedType
+                        ? tslib_1.__assign({ barmode: spec.stackedType === "STACKED" ||
+                                spec.stackedType === "PERCENT_STACKED"
+                                ? "stack"
+                                : "group" }, (isPercentStackedBars ? { barnorm: "percent" } : {})) : {})), (typeof spec.gapWidth === "number"
+                        ? { bargap: Math.max(0, Math.min(0.95, spec.gapWidth / 400)) }
+                        : {})), { font: {
                             family: "Untitled Sans, apple-system, sans-serif",
                             size: 12,
                             color: textColor,
                         }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, xaxis: applyAxisOverridesPlotly({
                             title: {
-                                text: (_67 = spec.horizontalAxisTitle) !== null && _67 !== void 0 ? _67 : "",
+                                text: (_74 = spec.horizontalAxisTitle) !== null && _74 !== void 0 ? _74 : "",
                                 font: { color: textColor },
+                                standoff: bottomAxisTitleStandoff,
                             },
                             automargin: true,
                             showgrid: true,
@@ -1743,10 +1829,9 @@ var BasicChart = function (_a) {
                         isHorizontalBarChart
                             ? spec.valueAxisOptions
                             : spec.categoryAxisOptions, isHorizontalBarChart ? primaryAxisNumberFormat : undefined), yaxis: applyAxisOverridesPlotly({
-                            title: {
-                                text: (_68 = spec.verticalAxisTitle) !== null && _68 !== void 0 ? _68 : "",
-                                font: { color: textColor },
-                            },
+                            title: tslib_1.__assign({ text: (_75 = spec.verticalAxisTitle) !== null && _75 !== void 0 ? _75 : "", font: { color: textColor } }, (isHorizontalBarChart
+                                ? {}
+                                : { standoff: VALUE_AXIS_TITLE_STANDOFF })),
                             showgrid: !isHorizontalBarChart,
                             gridcolor: gridColor,
                             automargin: true,
@@ -1757,14 +1842,17 @@ var BasicChart = function (_a) {
                                 : undefined,
                         }, isHorizontalBarChart
                             ? spec.categoryAxisOptions
-                            : spec.valueAxisOptions, isHorizontalBarChart ? undefined : primaryAxisNumberFormat) }, (hasSecondaryAxis
-                        ? (_p = {},
-                            _p[isHorizontalBarChart ? "xaxis2" : "yaxis2"] = applyAxisOverridesPlotly(tslib_1.__assign({ title: { font: { color: textColor } }, overlaying: isHorizontalBarChart ? "x" : "y", side: isHorizontalBarChart ? "top" : "right", showgrid: false, automargin: true }, (isPareto
+                            : spec.valueAxisOptions, isHorizontalBarChart ? undefined : primaryAxisNumberFormat) }), (hasSecondaryAxis
+                        ? (_q = {},
+                            _q[isHorizontalBarChart ? "xaxis2" : "yaxis2"] = applyAxisOverridesPlotly(tslib_1.__assign({ title: {
+                                    font: { color: textColor },
+                                    standoff: VALUE_AXIS_TITLE_STANDOFF,
+                                }, overlaying: isHorizontalBarChart ? "x" : "y", side: isHorizontalBarChart ? "top" : "right", showgrid: false, automargin: true }, (isPareto
                                 ? { range: [0, 100], ticksuffix: "%" }
                                 : {})), spec.secondaryValueAxisOptions, secondaryAxisNumberFormat),
-                            _p) : {})), (hasSecondaryCategoryAxis && secondaryDomainData
-                        ? (_q = {},
-                            _q[isHorizontalBarChart ? "yaxis2" : "xaxis2"] = {
+                            _q) : {})), (hasSecondaryCategoryAxis && secondaryDomainData
+                        ? (_r = {},
+                            _r[isHorizontalBarChart ? "yaxis2" : "xaxis2"] = {
                                 overlaying: isHorizontalBarChart ? "y" : "x",
                                 side: isHorizontalBarChart ? "right" : "top",
                                 type: "category",
@@ -1774,7 +1862,8 @@ var BasicChart = function (_a) {
                                 automargin: true,
                                 visible: (0, helpers_1.showXAxis)(spec === null || spec === void 0 ? void 0 : spec.chartType),
                             },
-                            _q) : {}));
+                            _r) : {})), (ofPieExtras
+                        ? tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ shapes: ofPieExtras.shapes }, (ofPieExtras.barmode ? { barmode: ofPieExtras.barmode } : {})), (ofPieExtras.xaxis2 ? { xaxis2: ofPieExtras.xaxis2 } : {})), (ofPieExtras.yaxis2 ? { yaxis2: ofPieExtras.yaxis2 } : {})) : {}));
                     dlOpts = spec.dataLabels;
                     doughnutHole = spec.doughnutHoleSize;
                     seriesNumberFormats = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
@@ -1911,27 +2000,23 @@ var BasicChart = function (_a) {
                 onUpdateChart(tslib_1.__assign(tslib_1.__assign({}, chart), { spec: next }));
         }
         : undefined;
-    // Copy as Picture / print preview. `plotly.js/dist/plotly` is the module
-    // `react-plotly.js` itself is built on, loaded on demand so the render
-    // path stays as it was.
+    // Copy as Picture / print preview, through the plotly module the chart
+    // renders with.
     var exportChartPng = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-        var graphDiv, Plotly, url;
+        var graphDiv, url;
         return tslib_1.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     graphDiv = graphDivRef.current;
                     if (!graphDiv)
                         return [2 /*return*/, undefined];
-                    return [4 /*yield*/, Promise.resolve().then(function () { return tslib_1.__importStar(require("plotly.js/dist/plotly")); })];
-                case 1:
-                    Plotly = (_a.sent()).default;
-                    return [4 /*yield*/, Plotly.toImage(graphDiv, {
+                    return [4 /*yield*/, plot_1.Plotly.toImage(graphDiv, {
                             format: "png",
                             width: graphDiv.clientWidth || width || 600,
                             height: graphDiv.clientHeight || height || 400,
                             scale: 2,
                         })];
-                case 2:
+                case 1:
                     url = _a.sent();
                     return [2 /*return*/, (0, chart_image_1.dataUrlToBlob)(url)];
             }
@@ -1964,7 +2049,7 @@ var BasicChart = function (_a) {
                             onDeleteChart === null || onDeleteChart === void 0 ? void 0 : onDeleteChart(chart.chartId);
                         } }, "Delete chart")))))) : null,
         react_1.default.createElement("div", { className: "flex-1 rnc-plotly-chart-container", onPointerDownCapture: handlePointerDownCapture },
-            react_1.default.createElement(react_plotly_js_1.default, { ref: plotRef, data: plotData, layout: plotLayout, config: config, onClick: handlePlotClick, onInitialized: function (_figure, graphDiv) {
+            react_1.default.createElement(plot_1.Plot, { data: plotData, layout: plotLayout, config: config, onClick: handlePlotClick, onInitialized: function (_figure, graphDiv) {
                     graphDivRef.current = graphDiv;
                 }, style: { width: "100%", height: "100%" } }))));
 };