@rowsncolumns/charts 28.0.0 → 28.1.0

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

@@ -10,11 +10,22 @@ 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");
 var bubble_1 = require("../../utils/bubble");
+var chart_orientation_1 = require("../../utils/chart-orientation");
+var chart_image_1 = require("../../utils/chart-image");
+var chart_styles_1 = require("../../utils/chart-styles");
 var chart_spec_utils_1 = require("../../utils/chart-spec-utils");
+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 plotly_title_1 = require("../../utils/plotly-title");
+var pie_explosion_1 = require("../../utils/pie-explosion");
+var plotly_click_1 = require("../../utils/plotly-click");
+var plotly_surface_1 = require("../../utils/plotly-surface");
+var three_d_1 = require("../../utils/three-d");
 var hierarchy_1 = require("../../utils/hierarchy");
 var histogram_1 = require("../../utils/histogram");
 var of_pie_1 = require("../../utils/of-pie");
@@ -108,11 +119,21 @@ var applyLegendOverridesPlotly = function (legend, opts) {
     next.font = applyTextFormatToFont(next.font, opts.textFormat);
     return { legend: next, showlegend: true };
 };
-var applyAxisOverridesPlotly = function (axis, opts) {
+/**
+ * `numberFormatPattern` is the axis' RESOLVED format (explicit pattern or
+ * the linked source-cell format). Plotly formats ticks AND hover values
+ * through the axis `tickformat` / prefix / suffix, so converting the
+ * pattern once covers both; patterns outside the d3 subset keep plotly's
+ * default labels.
+ */
+var applyAxisOverridesPlotly = function (axis, opts, numberFormatPattern) {
     var _a, _b, _c, _d;
-    if (!opts)
+    var ticks = (0, axis_number_format_1.numberFormatToPlotlyTicks)(numberFormatPattern);
+    if (!opts && !ticks)
         return axis;
-    var next = tslib_1.__assign({}, (axis !== null && axis !== void 0 ? axis : {}));
+    var next = tslib_1.__assign(tslib_1.__assign({}, (axis !== null && axis !== void 0 ? axis : {})), (ticks !== null && ticks !== void 0 ? ticks : {}));
+    if (!opts)
+        return next;
     if (opts.logarithmic)
         next.type = "log";
     if (opts.reverse)
@@ -150,8 +171,8 @@ var PLOTLY_DLBL_POS_BAR = {
     outsideEnd: "outside",
     bestFit: "outside",
 };
-var applyDataLabelsToTracePlotly = function (trace, opts, chartType) {
-    var _a;
+var applyDataLabelsToTracePlotly = function (trace, opts, chartType, sourceNumberFormat) {
+    var _a, _b, _c;
     if (!(opts === null || opts === void 0 ? void 0 : opts.show))
         return trace;
     var next = tslib_1.__assign({}, trace);
@@ -169,18 +190,33 @@ var applyDataLabelsToTracePlotly = function (trace, opts, chartType) {
             parts.push("percent");
         next.textinfo = parts.length ? parts.join("+") : "value";
         next.textposition = position;
+        // Values format like their source cells (or the authored `<c:numFmt>`):
+        // plotly's own `%{value}` is a raw number, so the formatted strings
+        // ride on `text` and a `texttemplate` mirrors the textinfo parts.
+        var pattern_1 = (_b = opts.numberFormatPattern) !== null && _b !== void 0 ? _b : sourceNumberFormat;
+        if (pattern_1) {
+            var values = Array.isArray(next.values) ? next.values : [];
+            next.text = values.map(function (v) { return (0, axis_number_format_1.formatAxisValue)(pattern_1, v); });
+            next.texttemplate = next.textinfo
+                .split("+")
+                .map(function (part) { return (part === "value" ? "%{text}" : "%{".concat(part, "}")); })
+                .join("<br>");
+        }
     }
     else {
         // <c:dLbls><c:numFmt formatCode=…> — when authored, run each value
         // through the same numfmt grammar the spreadsheet uses (`"$"#,##0`
         // → `$1,831`). Plotly supports this natively via `texttemplate`
         // with the d3-format mini-language, but our patterns are
-        // SpreadsheetML — easier to pre-format the strings.
-        var pattern_1 = opts.numberFormatPattern;
-        var yVals = Array.isArray(next.y) ? next.y : [];
-        next.text = pattern_1
-            ? yVals.map(function (v) { return (v === null || v === undefined ? "" : (0, utils_1.ssfFormat)(pattern_1, v)); })
-            : next.y;
+        // SpreadsheetML — easier to pre-format the strings. Without an
+        // authored pattern the labels link to the source-cell format.
+        var pattern_2 = (_c = opts.numberFormatPattern) !== null && _c !== void 0 ? _c : sourceNumberFormat;
+        // Horizontal bars carry their values on `x`.
+        var values = next.orientation === "h" ? next.x : next.y;
+        var vals = Array.isArray(values) ? values : [];
+        next.text = pattern_2
+            ? vals.map(function (v) { return (v === null || v === undefined ? "" : (0, utils_1.ssfFormat)(pattern_2, v)); })
+            : values;
         next.textposition = position;
     }
     return next;
@@ -262,6 +298,41 @@ var sanitizeChartValue = function (value) {
     }
     return undefined;
 };
+/**
+ * A series drawn from several ranges is ONE series over their union
+ * (Excel): every range's points in sequence. A single range passes through
+ * untouched so the common path renders exactly as before.
+ */
+var mergeSeriesData = function (parts) {
+    var e_1, _a;
+    if (parts.length === 1)
+        return parts[0];
+    if (parts.some(function (part) { return !Array.isArray(part); })) {
+        var values = [];
+        var labels = [];
+        try {
+            for (var parts_1 = tslib_1.__values(parts), parts_1_1 = parts_1.next(); !parts_1_1.done; parts_1_1 = parts_1.next()) {
+                var part = parts_1_1.value;
+                if (Array.isArray(part)) {
+                    values.push.apply(values, tslib_1.__spreadArray([], tslib_1.__read(part), false));
+                }
+                else {
+                    values.push.apply(values, tslib_1.__spreadArray([], tslib_1.__read(part.values), false));
+                    labels.push.apply(labels, tslib_1.__spreadArray([], tslib_1.__read(part.labels), false));
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (parts_1_1 && !parts_1_1.done && (_a = parts_1.return)) _a.call(parts_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return { values: values, labels: labels };
+    }
+    return parts.flatMap(function (part) { return part; });
+};
 /**
  * Add alpha transparency to a color (hex or rgb)
  */
@@ -287,13 +358,37 @@ var addAlphaToColor = function (color, alpha) {
 };
 var BasicChart = function (_a) {
     var _b;
-    var width = _a.width, height = _a.height, chart = _a.chart, theme = _a.theme, isDarkMode = _a.isDarkMode, sheetId = _a.sheetId, readonly = _a.readonly, getDomainValuesFromRange = _a.getDomainValuesFromRange, getSeriesValuesFromRange = _a.getSeriesValuesFromRange, onDeleteChart = _a.onDeleteChart, onRequestEdit = _a.onRequestEdit, onRequestCalculate = _a.onRequestCalculate, isSelected = _a.isSelected;
+    var width = _a.width, height = _a.height, chart = _a.chart, theme = _a.theme, isDarkMode = _a.isDarkMode, sheetId = _a.sheetId, readonly = _a.readonly, getDomainValuesFromRange = _a.getDomainValuesFromRange, getSeriesValuesFromRange = _a.getSeriesValuesFromRange, getFormattingFromRange = _a.getFormattingFromRange, onDeleteChart = _a.onDeleteChart, onUpdateChart = _a.onUpdateChart, onRequestEdit = _a.onRequestEdit, onRequestCalculate = _a.onRequestCalculate, isSelected = _a.isSelected, fieldButtons = _a.fieldButtons;
     var spec = chart.spec;
     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);
     var focusSheet = (0, spreadsheet_1.useFocusSheet)();
+    // Excel selects a data series (or one data point) when it is clicked
+    // inside the chart and the grid highlights its source cells. The plot
+    // is interactive with `dragmode: false`, so plotly reports the click but
+    // never starts its own drag — a body drag still moves the frame. plotly
+    // does not see that drag either, so its mouseup still counts as a click:
+    // the pointer-down position tells the two apart.
+    var setSelectedChartSeries = (0, spreadsheet_1.useSetSelectedChartSeries)();
+    var pointerDownRef = (0, react_1.useRef)(undefined);
+    var handlePointerDownCapture = (0, react_1.useCallback)(function (event) {
+        pointerDownRef.current = { x: event.clientX, y: event.clientY };
+    }, []);
+    var handlePlotClick = (0, react_1.useCallback)(function (event) {
+        var _a, _b;
+        if ((0, plotly_click_1.wasDragged)(pointerDownRef.current, event.event)) {
+            return;
+        }
+        var selection = (0, plotly_click_1.resolvePlotlyClickSelection)(event.points, (_b = (_a = chart.spec.series) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+        if (!selection)
+            return;
+        setSelectedChartSeries(tslib_1.__assign({ chartId: chart.chartId }, selection));
+    }, [chart, setSelectedChartSeries]);
     var shouldFocusSheetRef = (0, react_1.useRef)(false);
     var _c = tslib_1.__read((0, react_1.useState)([]), 2), plotData = _c[0], setPlotData = _c[1];
     var _d = tslib_1.__read((0, react_1.useState)({}), 2), layout = _d[0], setLayout = _d[1];
@@ -321,6 +416,15 @@ var BasicChart = function (_a) {
         // Use sanitized values - errors like #N/A become undefined
         var seriesValues = sanitizedValues;
         if ((spec.chartType === "pie" || spec.chartType === "doughnut")) {
+            if (options.pieLabels) {
+                var _b = options.pieLabels, domainLabels = _b.domainLabels, offset = _b.offset;
+                return {
+                    values: seriesValues,
+                    labels: offset === undefined
+                        ? domainLabels
+                        : domainLabels.slice(offset, offset + seriesValues.length),
+                };
+            }
             var domainSheetRange = (_a = spec.domains[0]) === null || _a === void 0 ? void 0 : _a.sources[0];
             if (!domainSheetRange) {
                 return { values: [], labels: [] };
@@ -331,17 +435,19 @@ var BasicChart = function (_a) {
                 labels: domainValues,
             };
         }
-        return seriesValues;
+        // Excel's "Hidden and Empty Cells": gaps / zero / connect, and
+        // whether #N/A counts as empty.
+        return (0, empty_cells_1.applyEmptyCellsPolicy)(seriesValues, rawSeriesValues, spec, options.lineLike);
     }, [getSeriesValuesFromRange, getDomainValuesFromRange]);
     /**
      * 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, categories, radarStyle, radarTraces, radarInputs, _c, _d, 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, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, domainData, assignCartesianData, themeColorPalette, applyTraceColor, hasSecondaryAxis, isPareto, isOfPie, ofPieHandled, ofPieExtras, decorateCartesianTrace, seriesIndex, _e, _f, series, currentSeriesIndex, dataLabel, _g, _h, _loop_2, _j, _k, sheetRange, e_1_1, authoredTitleFmt, newLayout, dlOpts, doughnutHole, formattedTraces, sortedTraces;
-        var e_2, _l, e_1, _m, e_3, _o;
-        var _p, _q, _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;
-        return tslib_1.__generator(this, function (_53) {
-            switch (_53.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, 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) {
                 case 0:
                     (0, utils_1.debug)("Updating chart", chart);
                     traces = [];
@@ -353,41 +459,41 @@ var BasicChart = function (_a) {
                         theme: 1,
                         tint: isDarkMode ? 1 : 0,
                     }, theme);
-                    bgColor = (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
+                    bgColor = (_r = spec.backgroundColor) !== null && _r !== void 0 ? _r : (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 = ((_p = spec.domains) !== null && _p !== void 0 ? _p : []).map(function (dom) {
+                    perSeriesX = ((_s = spec.domains) !== null && _s !== void 0 ? _s : []).map(function (dom) {
                         return flattenChartDataValues([dom], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
-                    perSeriesSize = ((_q = spec.bubbleSizes) !== null && _q !== void 0 ? _q : []).map(function (sz) {
+                    perSeriesSize = ((_t = spec.bubbleSizes) !== null && _t !== void 0 ? _t : []).map(function (sz) {
                         return flattenChartDataValues([sz], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
                     seriesInputs = [];
                     i = 0;
-                    _53.label = 1;
+                    _69.label = 1;
                 case 1:
                     if (!(i < spec.series.length)) return [3 /*break*/, 5];
                     seriesEntry = spec.series[i];
-                    resolvedLabel = (_r = seriesEntry.dataLabel) !== null && _r !== void 0 ? _r : "";
+                    resolvedLabel = (_u = seriesEntry.dataLabel) !== null && _u !== void 0 ? _u : "";
                     if (!(resolvedLabel && (0, utils_1.isAFormula)(resolvedLabel))) return [3 /*break*/, 3];
                     _a = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_s = chart.position.sheetId) !== null && _s !== void 0 ? _s : sheetId, chart.position.overlayPosition.anchorCell.rowIndex, chart.position.overlayPosition.anchorCell.columnIndex)];
+                    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)];
                 case 2:
-                    resolvedLabel = _a.apply(void 0, [_53.sent()]);
-                    _53.label = 3;
+                    resolvedLabel = _a.apply(void 0, [_69.sent()]);
+                    _69.label = 3;
                 case 3:
-                    xValues = (_t = perSeriesX[i]) !== null && _t !== void 0 ? _t : perSeriesX[0];
-                    sizeValues_1 = (_u = perSeriesSize[i]) !== null && _u !== void 0 ? _u : perSeriesSize[0];
+                    xValues = (_w = perSeriesX[i]) !== null && _w !== void 0 ? _w : perSeriesX[0];
+                    sizeValues_1 = (_x = perSeriesSize[i]) !== null && _x !== void 0 ? _x : 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 } : {})));
-                    _53.label = 4;
+                    _69.label = 4;
                 case 4:
                     i++;
                     return [3 /*break*/, 1];
                 case 5:
-                    sharedXValues = (_v = perSeriesX[0]) !== null && _v !== void 0 ? _v : [];
-                    sharedSizeValues = (_w = perSeriesSize[0]) !== null && _w !== void 0 ? _w : [];
+                    sharedXValues = (_y = perSeriesX[0]) !== null && _y !== void 0 ? _y : [];
+                    sharedSizeValues = (_z = perSeriesSize[0]) !== null && _z !== void 0 ? _z : [];
                     _b = (0, bubble_1.prepareBubbleSeriesData)({
                         xValues: sharedXValues,
                         labelValues: labels,
@@ -396,16 +502,16 @@ var BasicChart = function (_a) {
                     }), categories_1 = _b.categories, preparedSeries = _b.series, sizeValues = _b.sizeValues;
                     sizeScale_1 = (0, bubble_1.createBubbleSizeScale)(sizeValues);
                     hasStringX_1 = categories_1.length > 0;
-                    palette_1 = [
+                    palette_1 = (0, chart_styles_1.getChartPalette)(spec, [
                         theme.themeColors.accent1,
                         theme.themeColors.accent2,
                         theme.themeColors.accent3,
                         theme.themeColors.accent4,
                         theme.themeColors.accent5,
                         theme.themeColors.accent6,
-                    ];
+                    ]);
                     isScatter_1 = spec.chartType === "scatter";
-                    scatterStyle_1 = (_x = spec.scatterStyle) !== null && _x !== void 0 ? _x : (isScatter_1 ? "lineMarker" : undefined);
+                    scatterStyle_1 = (_0 = spec.scatterStyle) !== null && _0 !== void 0 ? _0 : (isScatter_1 ? "lineMarker" : undefined);
                     plotlyModeForScatterStyle_1 = function (style) {
                         switch (style) {
                             case "line":
@@ -484,39 +590,39 @@ var BasicChart = function (_a) {
                         };
                     });
                     titleFmt = spec.titleTextFormat;
-                    xAxisFmt = (_y = spec.categoryAxisOptions) === null || _y === void 0 ? void 0 : _y.textFormat;
-                    yAxisFmt = (_z = spec.valueAxisOptions) === null || _z === void 0 ? void 0 : _z.textFormat;
-                    legendFmt = (_0 = spec.legend) === null || _0 === void 0 ? void 0 : _0.textFormat;
+                    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;
                     bubbleLayout = {
                         title: {
-                            text: title !== null && title !== void 0 ? title : undefined,
+                            text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
                             font: {
-                                family: (_1 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontFamily) !== null && _1 !== void 0 ? _1 : "Untitled Sans, apple-system, sans-serif",
-                                size: (_2 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontSize) !== null && _2 !== void 0 ? _2 : 16,
-                                color: (_3 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.color) !== null && _3 !== void 0 ? _3 : textColor,
+                                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,
                             },
                             x: 0.02,
                             xanchor: "left",
                         },
                         xaxis: {
                             title: {
-                                text: (_4 = spec.horizontalAxisTitle) !== null && _4 !== void 0 ? _4 : "",
-                                font: { color: (_5 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _5 !== void 0 ? _5 : textColor },
+                                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 },
                             },
                             gridcolor: gridColor,
-                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_6 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _6 !== void 0 ? _6 : 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: (_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 } : {})),
                             type: hasStringX_1 ? "category" : "linear",
                         },
                         yaxis: {
                             title: {
-                                text: (_7 = spec.verticalAxisTitle) !== null && _7 !== void 0 ? _7 : "",
-                                font: { color: (_8 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _8 !== void 0 ? _8 : textColor },
+                                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 },
                             },
                             gridcolor: gridColor,
-                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_9 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _9 !== void 0 ? _9 : 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: (_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 } : {})),
                         },
                         legend: {
-                            font: tslib_1.__assign(tslib_1.__assign({ color: (_10 = legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.color) !== null && _10 !== void 0 ? _10 : 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: (_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 } : {})),
                         },
                         paper_bgcolor: bgColor,
                         plot_bgcolor: bgColor,
@@ -541,8 +647,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
-                            ? (_11 = hierarchyData.labels[0]) !== null && _11 !== void 0 ? _11 : ""
-                            : (_12 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _12 !== void 0 ? _12 : "";
+                            ? (_14 = hierarchyData.labels[0]) !== null && _14 !== void 0 ? _14 : ""
+                            : (_15 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _15 !== void 0 ? _15 : "";
                         hierarchyTrace = {
                             type: chartType,
                             labels: hierarchyData.labels,
@@ -554,7 +660,7 @@ var BasicChart = function (_a) {
                         };
                         layoutForHierarchy = {
                             title: {
-                                text: title !== null && title !== void 0 ? title : undefined,
+                                text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
                                 font: {
                                     family: "Untitled Sans, apple-system, sans-serif",
                                     size: 16,
@@ -591,7 +697,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 = (_13 = spec.series) === null || _13 === void 0 ? void 0 : _13[0];
+                        seriesEntry = (_16 = spec.series) === null || _16 === void 0 ? void 0 : _16[0];
                         rawValues_1 = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
                             : [];
@@ -628,7 +734,7 @@ var BasicChart = function (_a) {
                         };
                         setPlotData([regionTrace]);
                         setLayout({
-                            title: { text: title !== null && title !== void 0 ? title : undefined },
+                            title: { text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat) },
                             font: { color: textColor },
                             paper_bgcolor: bgColor,
                             plot_bgcolor: bgColor,
@@ -652,17 +758,97 @@ var BasicChart = function (_a) {
                         });
                         return [2 /*return*/];
                     }
+                    surfaceToken = (0, three_d_1.normalize3DSourceType)(spec.sourceChartType);
+                    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;
+                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;
+                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)];
+                case 9:
+                    _e = _f.apply(void 0, [_69.sent()]);
+                    return [3 /*break*/, 11];
+                case 10:
+                    _e = (_19 = seriesEntry.dataLabel) !== null && _19 !== void 0 ? _19 : "";
+                    _69.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;
+                case 12:
+                    _d = _c.next();
+                    return [3 /*break*/, 8];
+                case 13: return [3 /*break*/, 16];
+                case 14:
+                    e_2_1 = _69.sent();
+                    e_2 = { error: e_2_1 };
+                    return [3 /*break*/, 16];
+                case 15:
+                    try {
+                        if (_d && !_d.done && (_l = _c.return)) _l.call(_c);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                    return [7 /*endfinally*/];
+                case 16:
+                    seriesNames = surfaceSeriesInputs.map(function (entry, index) { return entry.name || "Series ".concat(index + 1); });
+                    surfaceTrace = (0, plotly_surface_1.buildPlotlySurfaceTrace)(surfaceToken, surfaceSeriesInputs, categories, seriesNames, (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy));
+                    surfaceLayout = tslib_1.__assign({ title: {
+                            text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
+                            font: {
+                                family: "Untitled Sans, apple-system, sans-serif",
+                                size: 16,
+                                color: textColor,
+                            },
+                            x: 0.02,
+                            xanchor: "left",
+                        }, font: {
+                            family: "Untitled Sans, apple-system, sans-serif",
+                            size: 12,
+                            color: textColor,
+                        }, 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 : "" },
+                                automargin: true,
+                                color: textColor,
+                            },
+                            yaxis: {
+                                title: { text: (_21 = spec.verticalAxisTitle) !== null && _21 !== void 0 ? _21 : "" },
+                                automargin: true,
+                                color: textColor,
+                            },
+                        }
+                        : {
+                            scene: {
+                                xaxis: { title: { text: (_22 = spec.horizontalAxisTitle) !== null && _22 !== void 0 ? _22 : "" } },
+                                yaxis: { title: { text: "" } },
+                                zaxis: { title: { text: (_23 = spec.verticalAxisTitle) !== null && _23 !== void 0 ? _23 : "" } },
+                            },
+                        }));
+                    setPlotData([surfaceTrace]);
+                    setLayout(surfaceLayout);
+                    return [2 /*return*/];
+                case 17:
                     // ---------------------------- Radar ----------------------------
                     // Plotly renders radar via `scatterpolar` traces: r = the values,
                     // 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 = (_14 = spec.radarStyle) !== null && _14 !== void 0 ? _14 : "standard";
+                        radarStyle = (_24 = spec.radarStyle) !== null && _24 !== void 0 ? _24 : "standard";
                         radarTraces = [];
                         radarInputs = [];
                         try {
-                            for (_c = tslib_1.__values((_15 = spec.series) !== null && _15 !== void 0 ? _15 : []), _d = _c.next(); !_d.done; _d = _c.next()) {
-                                seriesEntry = _d.value;
+                            for (_g = tslib_1.__values((_25 = spec.series) !== null && _25 !== void 0 ? _25 : []), _h = _g.next(); !_h.done; _h = _g.next()) {
+                                seriesEntry = _h.value;
                                 label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                                     ? seriesEntry.dataLabel
                                     : "";
@@ -670,17 +856,17 @@ var BasicChart = function (_a) {
                                 radarInputs.push({ name: label, values: values });
                             }
                         }
-                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        catch (e_4_1) { e_4 = { error: e_4_1 }; }
                         finally {
                             try {
-                                if (_d && !_d.done && (_l = _c.return)) _l.call(_c);
+                                if (_h && !_h.done && (_m = _g.return)) _m.call(_g);
                             }
-                            finally { if (e_2) throw e_2.error; }
+                            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 = (_18 = (_17 = (_16 = spec.series) === null || _16 === void 0 ? void 0 : _16[i]) === null || _17 === void 0 ? void 0 : _17.color) !== null && _18 !== void 0 ? _18 : undefined;
+                            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 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 } } : {})));
@@ -691,7 +877,7 @@ var BasicChart = function (_a) {
                         maxR = indicators.reduce(function (m, ind) { return Math.max(m, ind.max); }, 0);
                         setPlotData(radarTraces);
                         setLayout({
-                            title: { text: title !== null && title !== void 0 ? title : undefined },
+                            title: { text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat) },
                             font: { color: textColor },
                             paper_bgcolor: bgColor,
                             plot_bgcolor: bgColor,
@@ -712,13 +898,13 @@ var BasicChart = function (_a) {
                     // V-variants additionally get a volume column sub-pane below the
                     // price plot.
                     if (spec.chartType === "stock") {
-                        variant = ((_19 = spec.stockVariant) !== null && _19 !== void 0 ? _19 : "HLC");
+                        variant = ((_29 = spec.stockVariant) !== null && _29 !== void 0 ? _29 : "HLC");
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesValues = ((_20 = spec.series) !== null && _20 !== void 0 ? _20 : []).map(function (seriesEntry) {
+                        seriesValues = ((_30 = spec.series) !== null && _30 !== void 0 ? _30 : []).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 = ((_21 = volumePoints_1 === null || volumePoints_1 === void 0 ? void 0 : volumePoints_1.length) !== null && _21 !== void 0 ? _21 : 0) > 0;
+                        hasVolume = ((_31 = volumePoints_1 === null || volumePoints_1 === void 0 ? void 0 : volumePoints_1.length) !== null && _31 !== void 0 ? _31 : 0) > 0;
                         buildVolumeTrace = function (xs) {
                             return ({
                                 type: "bar",
@@ -751,37 +937,37 @@ var BasicChart = function (_a) {
                             roles = (0, stock_1.assignStockRoles)(seriesValues, variant);
                             xs_1 = categories.length > 0
                                 ? categories
-                                : ((_22 = roles.close) !== null && _22 !== void 0 ? _22 : []).map(function (_, i) { return i + 1; });
+                                : ((_32 = roles.close) !== null && _32 !== void 0 ? _32 : []).map(function (_, i) { return i + 1; });
                             candleTrace = {
                                 type: "candlestick",
                                 x: xs_1,
-                                open: ((_23 = roles.open) !== null && _23 !== void 0 ? _23 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                high: ((_24 = roles.high) !== null && _24 !== void 0 ? _24 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                low: ((_25 = roles.low) !== null && _25 !== void 0 ? _25 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                close: ((_26 = roles.close) !== null && _26 !== void 0 ? _26 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                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; }),
                                 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: title !== null && title !== void 0 ? title : undefined }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: false, xaxis: {
-                                    title: { text: (_27 = spec.horizontalAxisTitle) !== null && _27 !== void 0 ? _27 : "" },
+                            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 : "" },
                                     automargin: true,
                                     showgrid: true,
                                     gridcolor: gridColor,
                                     rangeslider: { visible: false },
-                                }, yaxis: tslib_1.__assign({ title: { text: (_28 = spec.verticalAxisTitle) !== null && _28 !== void 0 ? _28 : "" }, 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: (_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 }));
                             return [2 /*return*/];
                         }
                         lineSeries = (0, stock_1.toLineSeries)(seriesValues, variant);
-                        stockPalette_1 = [
+                        stockPalette_1 = (0, chart_styles_1.getChartPalette)(spec, [
                             theme.themeColors.accent1,
                             theme.themeColors.accent2,
                             theme.themeColors.accent3,
                             theme.themeColors.accent4,
-                        ];
+                        ]);
                         xs_2 = categories.length > 0
                             ? categories
-                            : ((_30 = (_29 = lineSeries[0]) === null || _29 === void 0 ? void 0 : _29.values) !== null && _30 !== void 0 ? _30 : []).map(function (_, i) { return i + 1; });
+                            : ((_40 = (_39 = lineSeries[0]) === null || _39 === void 0 ? void 0 : _39.values) !== null && _40 !== void 0 ? _40 : []).map(function (_, i) { return i + 1; });
                         stockTraces = lineSeries.map(function (s, i) { return ({
                             type: "scatter",
                             mode: "lines",
@@ -791,42 +977,83 @@ var BasicChart = function (_a) {
                             line: { color: stockPalette_1[i % stockPalette_1.length] },
                         }); });
                         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: title !== null && title !== void 0 ? title : undefined }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: stockTraces.length > 1, xaxis: {
-                                title: { text: (_31 = spec.horizontalAxisTitle) !== null && _31 !== void 0 ? _31 : "" },
+                        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 : "" },
                                 automargin: true,
                                 showgrid: true,
                                 gridcolor: gridColor,
-                            }, yaxis: tslib_1.__assign({ title: { text: (_32 = spec.verticalAxisTitle) !== null && _32 !== void 0 ? _32 : "" }, 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: (_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 }));
                         return [2 /*return*/];
                     }
                     isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
                     isHorizontalBarChart = spec.chartType === "bar";
+                    lineTraceVariant = function (series, effectiveChartType) {
+                        var _a, _b;
+                        if (effectiveChartType !== "line" && effectiveChartType !== "area") {
+                            return {};
+                        }
+                        var extra = {};
+                        if (isStacked && spec.stackedType === "PERCENT_STACKED") {
+                            extra.groupnorm = "percent";
+                        }
+                        if (effectiveChartType === "line") {
+                            var marker = series.marker;
+                            var symbol = marker === null || marker === void 0 ? void 0 : marker.symbol;
+                            var wantsMarkers = symbol === "none"
+                                ? false
+                                : Boolean(spec.showMarkers) || !(0, utils_1.isNil)(symbol);
+                            if (wantsMarkers) {
+                                extra.mode = "lines+markers";
+                                extra.marker = {
+                                    symbol: (_a = (0, helpers_1.mapMarkerSymbolToPlotly)(symbol)) !== null && _a !== void 0 ? _a : "circle",
+                                    size: (_b = marker === null || marker === void 0 ? void 0 : marker.size) !== null && _b !== void 0 ? _b : 6,
+                                };
+                            }
+                        }
+                        return extra;
+                    };
                     shouldAggregate = (0, aggregation_1.shouldAggregateSeries)(spec.series);
-                    primaryDomainSource = (_35 = (_34 = (_33 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _33 === void 0 ? void 0 : _33[0]) === null || _34 === void 0 ? void 0 : _34.sources) === null || _35 === void 0 ? void 0 : _35[0];
+                    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];
                     rawPrimaryDomainValues = primaryDomainSource
-                        ? (0, aggregation_1.sanitizeDomainValues)((_36 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _36 !== void 0 ? _36 : [])
+                        ? (0, aggregation_1.sanitizeDomainValues)((_46 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _46 !== void 0 ? _46 : [])
                         : [];
                     domainData = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
-                    (_37 = spec.domains) === null || _37 === void 0 ? void 0 : _37.forEach(function (domain, domainIndex) {
-                        domain.sources.forEach(function (sheetRange, sourceIndex) {
+                    categoryLevels = (0, category_levels_1.resolveCategoryLevels)((_47 = spec.categoryLevels) === null || _47 === void 0 ? void 0 : _47.map(function (level) {
+                        return flattenChartDataValues([level], getDomainValuesFromRange, spec.hiddenDimensionStrategy, false);
+                    }));
+                    multicategoryX = categoryLevels
+                        ? (0, category_levels_1.plotlyMulticategoryX)(categoryLevels)
+                        : undefined;
+                    if (categoryLevels) {
+                        domainData = categoryLevels.leaf;
+                    }
+                    aggregateDomainValues = domainData;
+                    domainAxisData = (categoryLevels ? [] : (_48 = spec.domains) !== null && _48 !== void 0 ? _48 : []).map(function (domain, domainIndex) {
+                        return domain.sources.flatMap(function (sheetRange, sourceIndex) {
                             var _a;
                             if (domainIndex === 0 && sourceIndex === 0) {
-                                domainData = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
-                            }
-                            else {
-                                var rawValues = (0, aggregation_1.sanitizeDomainValues)((_a = getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy)) !== null && _a !== void 0 ? _a : []);
-                                domainData = (0, aggregation_1.getDomainValuesForAxis)(rawValues, shouldAggregate);
+                                return aggregateDomainValues;
                             }
+                            var rawValues = (0, aggregation_1.sanitizeDomainValues)((_a = getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy)) !== null && _a !== void 0 ? _a : []);
+                            return (0, aggregation_1.getDomainValuesForAxis)(rawValues, shouldAggregate);
                         });
                     });
+                    if (domainAxisData[0])
+                        domainData = domainAxisData[0];
+                    secondaryDomainData = domainAxisData[1];
+                    categoriesFor = function (series) {
+                        return series.useSecondaryAxis && secondaryDomainData
+                            ? secondaryDomainData
+                            : domainData;
+                    };
                     assignCartesianData = function (categories, values) {
                         // Convert undefined to null for Plotly (Datum type accepts null but not undefined)
                         var plotlyValues = values.map(function (v) { return v !== null && v !== void 0 ? v : null; });
                         // When categories is empty but we have values, generate index-based x values
                         // so Plotly can render the chart
-                        var effectiveCategories = categories.length === 0 && plotlyValues.length > 0
+                        var effectiveCategories = multicategoryX !== null && multicategoryX !== void 0 ? multicategoryX : (categories.length === 0 && plotlyValues.length > 0
                             ? Array.from({ length: plotlyValues.length }, function (_, i) { return i + 1; })
-                            : categories;
+                            : categories);
                         if (isHorizontalBarChart) {
                             return {
                                 x: plotlyValues,
@@ -836,17 +1063,17 @@ var BasicChart = function (_a) {
                         }
                         return { x: effectiveCategories, y: plotlyValues, orientation: undefined };
                     };
-                    themeColorPalette = [
+                    themeColorPalette = (0, chart_styles_1.getChartPalette)(spec, [
                         theme.themeColors.accent1,
                         theme.themeColors.accent2,
                         theme.themeColors.accent3,
                         theme.themeColors.accent4,
                         theme.themeColors.accent5,
                         theme.themeColors.accent6,
-                    ];
+                    ]);
                     applyTraceColor = function (trace, seriesColor, options) {
-                        var e_4, _a;
-                        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                        var e_5, _a;
+                        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
                         var target = trace;
                         var chartTypeForStyling = (_b = options === null || options === void 0 ? void 0 : options.effectiveChartType) !== null && _b !== void 0 ? _b : spec.chartType;
                         var isBarOrColumn = chartTypeForStyling === "bar" || chartTypeForStyling === "column";
@@ -866,24 +1093,41 @@ var BasicChart = function (_a) {
                         // give every task its own color. Build a per-point color array
                         // by category index, falling back to the series color for points
                         // without an override.
-                        if (isBarOrColumn &&
+                        var isPie = chartTypeForStyling === "pie";
+                        if ((isBarOrColumn || isPie) &&
                             Array.isArray(options === null || options === void 0 ? void 0 : options.dataPointColors) &&
                             (options === null || options === void 0 ? void 0 : options.dataPointColors.length)) {
                             var overrides_1 = new Map();
                             try {
-                                for (var _s = tslib_1.__values(options.dataPointColors), _t = _s.next(); !_t.done; _t = _s.next()) {
-                                    var dp = _t.value;
+                                for (var _u = tslib_1.__values(options.dataPointColors), _v = _u.next(); !_v.done; _v = _u.next()) {
+                                    var dp = _v.value;
                                     if (typeof dp.idx === "number" && typeof dp.color === "string") {
                                         overrides_1.set(dp.idx, dp.color);
                                     }
                                 }
                             }
-                            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                            catch (e_5_1) { e_5 = { error: e_5_1 }; }
                             finally {
                                 try {
-                                    if (_t && !_t.done && (_a = _s.return)) _a.call(_s);
+                                    if (_v && !_v.done && (_a = _u.return)) _a.call(_u);
                                 }
-                                finally { if (e_4) throw e_4.error; }
+                                finally { if (e_5) throw e_5.error; }
+                            }
+                            if (isPie) {
+                                // Per-slice colours (`<c:dPt>`): an authored slice colour wins,
+                                // the other slices keep the palette cycle the trace was built
+                                // with (or the series' own colour when one was authored).
+                                var existing_1 = Array.isArray((_h = target.marker) === null || _h === void 0 ? void 0 : _h.colors)
+                                    ? target.marker.colors
+                                    : themeColorPalette;
+                                var labelCount = Array.isArray(target.labels)
+                                    ? target.labels.length
+                                    : 0;
+                                target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_j = target.marker) !== null && _j !== void 0 ? _j : {})), { colors: Array.from({ length: labelCount }, function (_, i) {
+                                        var _a, _b;
+                                        return (_b = (_a = overrides_1.get(i)) !== null && _a !== void 0 ? _a : seriesColor) !== null && _b !== void 0 ? _b : existing_1[i % Math.max(1, existing_1.length)];
+                                    }) });
+                                return trace;
                             }
                             var fallback_1 = effectiveColor !== null && effectiveColor !== void 0 ? effectiveColor : "#4285F4";
                             var yArray = Array.isArray(target.y)
@@ -892,18 +1136,18 @@ var BasicChart = function (_a) {
                                     ? target.x
                                     : [];
                             var colors = yArray.map(function (_, i) { var _a; return (_a = overrides_1.get(i)) !== null && _a !== void 0 ? _a : fallback_1; });
-                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_h = target.marker) !== null && _h !== void 0 ? _h : {})), { color: colors });
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_k = target.marker) !== null && _k !== void 0 ? _k : {})), { color: colors });
                             return trace;
                         }
                         // Handle invertIfNegative for bar/column charts
                         if (isBarOrColumn && (options === null || options === void 0 ? void 0 : options.invertIfNegative) && (options === null || options === void 0 ? void 0 : options.values)) {
                             var positiveColor_1 = effectiveColor !== null && effectiveColor !== void 0 ? effectiveColor : "#4285F4";
-                            var negColor_1 = (_j = options.negativeColor) !== null && _j !== void 0 ? _j : "#FF0000";
+                            var negColor_1 = (_l = options.negativeColor) !== null && _l !== void 0 ? _l : "#FF0000";
                             // Create array of colors based on value sign
                             var colors = options.values.map(function (v) {
                                 return typeof v === "number" && v < 0 ? negColor_1 : positiveColor_1;
                             });
-                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_k = target.marker) !== null && _k !== void 0 ? _k : {})), { color: colors });
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_m = target.marker) !== null && _m !== void 0 ? _m : {})), { color: colors });
                             return trace;
                         }
                         if (!effectiveColor) {
@@ -914,7 +1158,7 @@ var BasicChart = function (_a) {
                             // with (accent1..accent6) with a single repeated color. Only repeat
                             // a uniform color when the user explicitly authored a series color;
                             // otherwise keep the multi-color palette so each slice stays distinct.
-                            var existingColors = (_l = target.marker) === null || _l === void 0 ? void 0 : _l.colors;
+                            var existingColors = (_o = target.marker) === null || _o === void 0 ? void 0 : _o.colors;
                             if (!seriesColor &&
                                 Array.isArray(existingColors) &&
                                 existingColors.length > 1) {
@@ -925,17 +1169,17 @@ var BasicChart = function (_a) {
                                 : Array.isArray(target.y)
                                     ? target.y.length
                                     : 0;
-                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_m = target.marker) !== null && _m !== void 0 ? _m : {})), { colors: labelCount > 0
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_p = target.marker) !== null && _p !== void 0 ? _p : {})), { colors: labelCount > 0
                                     ? Array.from({ length: labelCount }, function () { return effectiveColor; })
-                                    : (_o = target.marker) === null || _o === void 0 ? void 0 : _o.colors, color: effectiveColor });
+                                    : (_q = target.marker) === null || _q === void 0 ? void 0 : _q.colors, color: effectiveColor });
                             return trace;
                         }
                         if (isBarOrColumn) {
-                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_p = target.marker) !== null && _p !== void 0 ? _p : {})), { color: effectiveColor });
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_r = target.marker) !== null && _r !== void 0 ? _r : {})), { color: effectiveColor });
                             return trace;
                         }
-                        target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_q = target.marker) !== null && _q !== void 0 ? _q : {})), { color: effectiveColor });
-                        target.line = tslib_1.__assign(tslib_1.__assign({}, ((_r = target.line) !== null && _r !== void 0 ? _r : {})), { color: effectiveColor });
+                        target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_s = target.marker) !== null && _s !== void 0 ? _s : {})), { color: effectiveColor });
+                        target.line = tslib_1.__assign(tslib_1.__assign({}, ((_t = target.line) !== null && _t !== void 0 ? _t : {})), { color: effectiveColor });
                         if (target.fill && target.fill !== "none") {
                             // Add transparency to area fills so they don't cover other traces
                             target.fillcolor = addAlphaToColor(effectiveColor, 0.5);
@@ -943,19 +1187,29 @@ var BasicChart = function (_a) {
                         return trace;
                     };
                     hasSecondaryAxis = false;
+                    hasSecondaryCategoryAxis = false;
+                    valueAxisKey = isHorizontalBarChart ? "xaxis" : "yaxis";
+                    categoryAxisKey = isHorizontalBarChart ? "yaxis" : "xaxis";
+                    secondaryValueAxisRef = isHorizontalBarChart ? "x2" : "y2";
+                    secondaryCategoryAxisRef = isHorizontalBarChart ? "y2" : "x2";
                     isPareto = spec.chartType === "histogram" && (0, histogram_1.isParetoSpec)(spec);
                     isOfPie = spec.chartType === "pie" && (0, of_pie_1.isOfPieChartSpec)(spec);
                     ofPieHandled = false;
                     ofPieExtras = null;
                     decorateCartesianTrace = function (trace, series, values, dataLabel) {
-                        var e_5, _a;
+                        var e_6, _a;
                         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                         var target = trace;
-                        // Secondary value axis. Plotly overlays a second y-axis named
-                        // "y2" and the trace points at it via `yaxis: "y2"`.
+                        // Secondary value axis. Plotly overlays a second value axis ("y2",
+                        // or "x2" for a horizontal bar) and the trace points at it.
                         if (series.useSecondaryAxis) {
-                            target.yaxis = "y2";
+                            target[valueAxisKey] = secondaryValueAxisRef;
                             hasSecondaryAxis = true;
+                            // Secondary category axis for a second chart domain.
+                            if (secondaryDomainData) {
+                                target[categoryAxisKey] = secondaryCategoryAxisRef;
+                                hasSecondaryCategoryAxis = true;
+                            }
                         }
                         // Error bars — native plotly `error_y` / `error_x`. valueType
                         // "custom" reads per-point magnitudes from the spec's plus/minus
@@ -979,458 +1233,486 @@ var BasicChart = function (_a) {
                         // Trendlines — one overlay scatter trace per spec, reusing the
                         // shared regression util.
                         var seriesColor = (_g = series.color) !== null && _g !== void 0 ? _g : theme.themeColors.accent1;
+                        var _loop_3 = function (tl) {
+                            var _p, _q;
+                            var result = (0, trendline_1.computeTrendline)(values, {
+                                type: tl.type,
+                                order: tl.order,
+                                period: tl.period,
+                                forecastForward: tl.forecastForward,
+                                forecastBackward: tl.forecastBackward,
+                            });
+                            if (!result || result.points.length < 2)
+                                return "continue";
+                            var tlName = (_j = tl.name) !== null && _j !== void 0 ? _j : "".concat(dataLabel ? dataLabel + " " : "").concat((_k = tl.type) !== null && _k !== void 0 ? _k : "linear", " trend");
+                            // Map the fitted x (category index) back onto the category
+                            // labels where possible so the line aligns with the data.
+                            var categories = categoriesFor(series);
+                            var xs = result.points.map(function (p) {
+                                return p.x >= 0 && p.x < categories.length ? categories[p.x] : p.x;
+                            });
+                            var ys = result.points.map(function (p) { return p.y; });
+                            var overlay = tslib_1.__assign(tslib_1.__assign({ type: "scatter", mode: "lines", name: tlName, line: {
+                                    color: (_l = tl.color) !== null && _l !== void 0 ? _l : seriesColor,
+                                    dash: "dash",
+                                    width: 2,
+                                }, hoverinfo: "skip" }, (series.useSecondaryAxis
+                                ? (_p = {}, _p[valueAxisKey] = secondaryValueAxisRef, _p) : {})), (series.useSecondaryAxis && secondaryDomainData
+                                ? (_q = {}, _q[categoryAxisKey] = secondaryCategoryAxisRef, _q) : {}));
+                            if (isHorizontalBarChart) {
+                                overlay.x = ys;
+                                overlay.y = xs;
+                                overlay.orientation = "h";
+                            }
+                            else {
+                                overlay.x = xs;
+                                overlay.y = ys;
+                            }
+                            traces.push(overlay);
+                        };
                         try {
                             for (var _m = tslib_1.__values((_h = series.trendlines) !== null && _h !== void 0 ? _h : []), _o = _m.next(); !_o.done; _o = _m.next()) {
                                 var tl = _o.value;
-                                var result = (0, trendline_1.computeTrendline)(values, {
-                                    type: tl.type,
-                                    order: tl.order,
-                                    period: tl.period,
-                                    forecastForward: tl.forecastForward,
-                                    forecastBackward: tl.forecastBackward,
-                                });
-                                if (!result || result.points.length < 2)
-                                    continue;
-                                var tlName = (_j = tl.name) !== null && _j !== void 0 ? _j : "".concat(dataLabel ? dataLabel + " " : "").concat((_k = tl.type) !== null && _k !== void 0 ? _k : "linear", " trend");
-                                // Map the fitted x (category index) back onto the category
-                                // labels where possible so the line aligns with the data.
-                                var xs = result.points.map(function (p) {
-                                    return p.x >= 0 && p.x < domainData.length ? domainData[p.x] : p.x;
-                                });
-                                var ys = result.points.map(function (p) { return p.y; });
-                                var overlay = tslib_1.__assign({ type: "scatter", mode: "lines", name: tlName, line: {
-                                        color: (_l = tl.color) !== null && _l !== void 0 ? _l : seriesColor,
-                                        dash: "dash",
-                                        width: 2,
-                                    }, hoverinfo: "skip" }, (series.useSecondaryAxis ? { yaxis: "y2" } : {}));
-                                if (isHorizontalBarChart) {
-                                    overlay.x = ys;
-                                    overlay.y = xs;
-                                    overlay.orientation = "h";
-                                }
-                                else {
-                                    overlay.x = xs;
-                                    overlay.y = ys;
-                                }
-                                traces.push(overlay);
+                                _loop_3(tl);
                             }
                         }
-                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
                         finally {
                             try {
                                 if (_o && !_o.done && (_a = _m.return)) _a.call(_m);
                             }
-                            finally { if (e_5) throw e_5.error; }
+                            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 : [];
                     seriesIndex = 0;
-                    _53.label = 7;
-                case 7:
-                    _53.trys.push([7, 14, 15, 16]);
-                    _e = tslib_1.__values((_38 = spec.series) !== null && _38 !== void 0 ? _38 : []), _f = _e.next();
-                    _53.label = 8;
-                case 8:
-                    if (!!_f.done) return [3 /*break*/, 13];
-                    series = _f.value;
-                    currentSeriesIndex = seriesIndex++;
-                    if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 10];
-                    _h = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_39 = position.sheetId) !== null && _39 !== void 0 ? _39 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
-                case 9:
-                    _g = _h.apply(void 0, [_53.sent()]);
-                    return [3 /*break*/, 11];
-                case 10:
-                    _g = (_40 = series.dataLabel) !== null && _40 !== void 0 ? _40 : "";
-                    _53.label = 11;
-                case 11:
-                    dataLabel = _g;
-                    _loop_2 = function (sheetRange) {
-                        var seriesData = getSeriesData(spec, sheetRange, {
-                            aggregateEnabled: shouldAggregate,
-                            aggregateType: series.aggregateType,
-                            rawDomainValues: rawPrimaryDomainValues,
-                            orderedDomainValues: domainData,
-                        });
-                        // Support per-series chart type for combo charts
-                        var effectiveChartType = (_41 = series.seriesChartType) !== null && _41 !== void 0 ? _41 : spec.chartType;
-                        var seriesPlotlyType = (0, helpers_1.chartTypeToPlotlyType)(effectiveChartType);
-                        var seriesTraceStyle = (0, helpers_1.getPlotlyTraceStyle)(effectiveChartType);
-                        if (effectiveChartType === "histogram") {
-                            var rawValues = "values" in seriesData
-                                ? seriesData.values
-                                : seriesData;
-                            var binCount = spec.binCount;
-                            if (isPareto) {
-                                // Plotly's native histogram trace bins in axis order and
-                                // can't reorder bins, so Pareto pre-bins with the shared
-                                // util, sorts descending, and renders a bar trace plus the
-                                // cumulative-% line pointed at the y2 overlay axis.
-                                var _54 = (0, histogram_1.computePareto)((0, histogram_1.binHistogram)(rawValues, binCount)), labels = _54.labels, counts = _54.counts, cumulativePercents = _54.cumulativePercents;
-                                var barTrace = {
-                                    type: "bar",
-                                    x: labels,
-                                    y: counts,
-                                    name: dataLabel,
-                                };
-                                applyTraceColor(barTrace, (_42 = series.color) !== null && _42 !== void 0 ? _42 : undefined, {
-                                    noFill: series.noFill,
-                                    dataPointColors: series.dataPointColors,
-                                    seriesIndex: currentSeriesIndex,
-                                    effectiveChartType: effectiveChartType,
-                                });
-                                traces.push(barTrace);
-                                traces.push({
-                                    type: "scatter",
-                                    mode: "lines+markers",
-                                    x: labels,
-                                    y: cumulativePercents,
-                                    name: "Cumulative %",
-                                    yaxis: "y2",
-                                });
-                                hasSecondaryAxis = true;
-                            }
-                            else {
-                                var 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, (_43 = series.color) !== null && _43 !== void 0 ? _43 : undefined, {
-                                    noFill: series.noFill,
-                                    dataPointColors: series.dataPointColors,
-                                    seriesIndex: currentSeriesIndex,
-                                    effectiveChartType: effectiveChartType,
-                                });
-                                traces.push(trace);
-                            }
-                        }
-                        else if (effectiveChartType === "boxplot") {
-                            var rawValues = "values" in seriesData
-                                ? seriesData.values
-                                : seriesData;
-                            var quartileMethod = spec.quartileMethod;
-                            var showOutliers = spec.showOutliers;
-                            var showMeanMarker = spec.showMeanMarker === true;
-                            // Plotly's box trace computes quartiles/fences itself from
-                            // raw values, so a spec-pinned quartile method (or Excel's
-                            // "no outliers → whiskers span min/max" semantics) requires
-                            // switching to plotly's precomputed-statistics signature
-                            // (q1/median/q3/lowerfence/upperfence arrays). When neither
-                            // option is set the raw-values trace is kept unchanged.
-                            var usePrecomputed = quartileMethod != null || showOutliers === false;
-                            var trace = void 0;
-                            if (usePrecomputed) {
-                                var summary = (0, boxplot_1.computeBoxplotSummary)(rawValues, {
-                                    quartileMethod: quartileMethod,
-                                });
-                                if (!summary)
-                                    return "continue";
-                                var hideOutliers = showOutliers === false;
-                                trace = tslib_1.__assign(tslib_1.__assign({ type: "box", name: dataLabel, 
-                                    // Precomputed boxes need an explicit category so each
-                                    // series lands on its own slot (raw mode derives it from
-                                    // the trace name).
-                                    x: [dataLabel || "trace ".concat(currentSeriesIndex)], q1: [summary.q1], median: [summary.median], q3: [summary.q3], 
-                                    // Excel: hiding outlier points extends the whiskers to
-                                    // the full min/max; with outliers shown they stop at the
-                                    // most extreme points inside the 1.5×IQR fences.
-                                    lowerfence: [hideOutliers ? summary.min : summary.lowerWhisker], upperfence: [hideOutliers ? summary.max : summary.upperWhisker] }, (hideOutliers
-                                    ? { boxpoints: false }
-                                    : {
-                                        // Sample points ride along so plotly can still draw
-                                        // the outlier dots against the precomputed fences.
-                                        y: [rawValues.filter(function (v) { return v != null; })],
-                                        boxpoints: "outliers",
-                                    })), (showMeanMarker
-                                    ? { mean: [summary.mean], boxmean: true }
-                                    : {}));
-                            }
-                            else {
-                                trace = tslib_1.__assign({ type: "box", y: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }), name: dataLabel, 
-                                    // Raw mode is used when outliers are visible (today's
-                                    // default and `showOutliers: true` alike).
-                                    boxpoints: "outliers" }, (showMeanMarker ? { boxmean: true } : {}));
-                            }
-                            applyTraceColor(trace, (_44 = series.color) !== null && _44 !== void 0 ? _44 : undefined, {
-                                noFill: series.noFill,
-                                dataPointColors: series.dataPointColors,
-                                seriesIndex: currentSeriesIndex,
-                                effectiveChartType: effectiveChartType,
-                            });
-                            traces.push(trace);
-                        }
-                        else if (effectiveChartType === "waterfall") {
-                            var rawValues = "values" in seriesData
-                                ? seriesData.values
-                                : seriesData;
-                            // Plotly's native waterfall draws connector lines itself and
-                            // renders "total" measures from the zero baseline with its
-                            // own distinct fill.
-                            var totalIndices_1 = new Set((_45 = spec.totalIndices) !== null && _45 !== void 0 ? _45 : []);
-                            var trace = {
-                                type: "waterfall",
-                                x: domainData,
-                                y: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
-                                measure: rawValues.map(function (_, i) {
-                                    return totalIndices_1.has(i) ? "total" : "relative";
-                                }),
-                                name: dataLabel,
-                            };
-                            applyTraceColor(trace, (_46 = series.color) !== null && _46 !== void 0 ? _46 : undefined, {
-                                noFill: series.noFill,
-                                dataPointColors: series.dataPointColors,
-                                seriesIndex: currentSeriesIndex,
-                                effectiveChartType: effectiveChartType,
-                            });
-                            traces.push(trace);
-                        }
-                        else if (effectiveChartType === "funnel") {
-                            var rawValues = "values" in seriesData
-                                ? seriesData.values
-                                : seriesData;
-                            var trace = {
-                                type: "funnel",
-                                y: domainData,
-                                x: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
-                                name: dataLabel,
-                            };
-                            applyTraceColor(trace, (_47 = series.color) !== null && _47 !== void 0 ? _47 : undefined, {
-                                noFill: series.noFill,
-                                dataPointColors: series.dataPointColors,
-                                seriesIndex: currentSeriesIndex,
-                                effectiveChartType: effectiveChartType,
-                            });
-                            traces.push(trace);
-                        }
-                        else if (effectiveChartType === "pie" && isOfPie) {
-                            // Pie-of-pie / bar-of-pie — split the minor slices into a
-                            // secondary pie or stacked bar beside the main pie, replace
-                            // them with an aggregated "Other" slice, and join the two
-                            // plots with connector-line shapes. Only the first pie series
-                            // participates (of-pie is a single-series chart in Excel).
-                            if (ofPieHandled)
-                                return "continue";
-                            ofPieHandled = true;
-                            var pieData = seriesData;
-                            var _55 = (0, of_pie_1.splitOfPie)(pieData.values, pieData.labels, {
-                                splitType: spec.splitType,
-                                splitPos: spec.splitPos,
-                            }), main_1 = _55.main, secondary = _55.secondary, otherTotal = _55.otherTotal, total = _55.total;
-                            var ofPieType = (0, of_pie_1.resolveOfPieType)(spec.ofPieType);
-                            var secondScale = (0, of_pie_1.clampSecondPieSize)(spec.secondPieSize) / 100;
-                            var halfAngle = (0, of_pie_1.otherSliceHalfAngle)(otherTotal, total);
-                            var paletteAt_1 = function (index) {
-                                return themeColorPalette[index % themeColorPalette.length];
-                            };
-                            // Layout in paper coordinates (0-1 across the plot area
-                            // inside the margins). Main pie on the left, secondary plot
-                            // on the right.
-                            var MAIN_DOMAIN_X = [0, 0.55];
-                            var CY = 0.5;
-                            var SECONDARY_CX = 0.78;
-                            var BAR_LEFT = 0.68;
-                            var BAR_RIGHT = 0.88;
-                            traces.push({
-                                type: "pie",
-                                values: main_1.map(function (s) { return s.value; }),
-                                labels: main_1.map(function (s) { return s.label; }),
-                                name: dataLabel,
-                                domain: { x: MAIN_DOMAIN_X, y: [0, 1] },
-                                sort: false,
-                                direction: "clockwise",
-                                // Rotate so the "Other" slice's angular midpoint faces the
-                                // secondary plot (Excel's layout). Other is the last slice
-                                // of a clockwise sweep starting at `rotation`° from 12
-                                // o'clock, so its midpoint lands at 3 o'clock when the
-                                // sweep starts 90° + halfAngle past the top.
-                                rotation: (90 + (halfAngle * 180) / Math.PI) % 360,
-                                marker: { colors: main_1.map(function (_, i) { return paletteAt_1(i); }) },
-                            });
-                            if (secondary.length > 0) {
-                                // Paper coords are relative while the pie is circular in
-                                // pixels — convert the main pie's pixel radius into
-                                // separate x/y paper fractions to compensate for the
-                                // aspect ratio. Falls back to fixed fractions when the
-                                // container size isn't known yet.
-                                var plotW = typeof width === "number" ? Math.max(1, width - 102) : 0;
-                                var plotH = typeof height === "number" ? Math.max(1, height - 102) : 0;
-                                var hasGeometry = plotW > 1 && plotH > 1;
-                                var r = hasGeometry
-                                    ? Math.min((MAIN_DOMAIN_X[1] - MAIN_DOMAIN_X[0]) * plotW, plotH) / 2
-                                    : 0;
-                                var r2 = r * secondScale;
-                                var clampFrac = function (v, min, max) {
-                                    return Math.min(max, Math.max(min, v));
-                                };
-                                var rx2 = clampFrac(hasGeometry ? r2 / plotW : 0.14 * secondScale, 0.03, 0.19);
-                                var ry2 = clampFrac(hasGeometry ? r2 / plotH : 0.28 * secondScale, 0.05, 0.45);
-                                var barHalf = ry2;
-                                if (ofPieType === "pie") {
-                                    traces.push({
-                                        type: "pie",
-                                        values: secondary.map(function (s) { return s.value; }),
-                                        labels: secondary.map(function (s) { return s.label; }),
-                                        name: dataLabel,
-                                        domain: {
-                                            x: [SECONDARY_CX - rx2, SECONDARY_CX + rx2],
-                                            y: [CY - ry2, CY + ry2],
-                                        },
-                                        sort: false,
-                                        direction: "clockwise",
-                                        marker: {
-                                            colors: secondary.map(function (_, i) { return paletteAt_1(main_1.length + i); }),
-                                        },
-                                    });
-                                }
-                                else {
-                                    // Bar-of-pie — a single-category stacked bar on hidden
-                                    // secondary axes; one trace per point so each segment
-                                    // keeps its own color and legend entry.
-                                    secondary.forEach(function (s, i) {
+                    _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) {
+                                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)];
+                                case 1:
+                                    _70 = _71.apply(void 0, [_76.sent()]);
+                                    return [3 /*break*/, 3];
+                                case 2:
+                                    _70 = (_54 = series.dataLabel) !== null && _54 !== void 0 ? _54 : "";
+                                    _76.label = 3;
+                                case 3:
+                                    dataLabel = _70;
+                                    // 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;
+                                    lineLike = (0, empty_cells_1.isLineLikeChartType)(effectiveChartType);
+                                    pieDomainLabels = (spec.chartType === "pie" || spec.chartType === "doughnut") &&
+                                        (domainSources.length > 1 || series.sources.length > 1)
+                                        ? domainSources.flatMap(function (sheetRange) {
+                                            var _a;
+                                            return (_a = getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy)) !== null && _a !== void 0 ? _a : [];
+                                        })
+                                        : undefined;
+                                    piePointOffset = 0;
+                                    seriesData = mergeSeriesData(series.sources.map(function (sheetRange) {
+                                        var part = getSeriesData(spec, sheetRange, {
+                                            aggregateEnabled: shouldAggregate,
+                                            aggregateType: series.aggregateType,
+                                            rawDomainValues: rawPrimaryDomainValues,
+                                            orderedDomainValues: aggregateDomainValues,
+                                            lineLike: lineLike,
+                                            pieLabels: pieDomainLabels
+                                                ? {
+                                                    domainLabels: pieDomainLabels,
+                                                    offset: series.sources.length > 1 ? piePointOffset : undefined,
+                                                }
+                                                : undefined,
+                                        });
+                                        if (!Array.isArray(part))
+                                            piePointOffset += part.values.length;
+                                        return part;
+                                    }));
+                                    seriesPlotlyType = (0, helpers_1.chartTypeToPlotlyType)(effectiveChartType);
+                                    seriesTraceStyle = tslib_1.__assign(tslib_1.__assign({}, (0, helpers_1.getPlotlyTraceStyle)(effectiveChartType)), ((0, empty_cells_1.connectsAcrossEmptyCells)(spec, lineLike)
+                                        ? { connectgaps: true }
+                                        : {}));
+                                    if (effectiveChartType === "histogram") {
+                                        rawValues = "values" in seriesData
+                                            ? seriesData.values
+                                            : 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;
+                                            barTrace = {
+                                                type: "bar",
+                                                x: labels,
+                                                y: counts,
+                                                name: dataLabel,
+                                            };
+                                            applyTraceColor(barTrace, (_56 = series.color) !== null && _56 !== void 0 ? _56 : undefined, {
+                                                noFill: series.noFill,
+                                                dataPointColors: series.dataPointColors,
+                                                seriesIndex: currentSeriesIndex,
+                                                effectiveChartType: effectiveChartType,
+                                            });
+                                            traces.push(barTrace);
+                                            traces.push({
+                                                type: "scatter",
+                                                mode: "lines+markers",
+                                                x: labels,
+                                                y: cumulativePercents,
+                                                name: "Cumulative %",
+                                                yaxis: "y2",
+                                            });
+                                            hasSecondaryAxis = true;
+                                        }
+                                        else {
+                                            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, {
+                                                noFill: series.noFill,
+                                                dataPointColors: series.dataPointColors,
+                                                seriesIndex: currentSeriesIndex,
+                                                effectiveChartType: effectiveChartType,
+                                            });
+                                            traces.push(trace);
+                                        }
+                                    }
+                                    else if (effectiveChartType === "boxplot") {
+                                        rawValues = "values" in seriesData
+                                            ? seriesData.values
+                                            : seriesData;
+                                        quartileMethod = spec.quartileMethod;
+                                        showOutliers = spec.showOutliers;
+                                        showMeanMarker = spec.showMeanMarker === true;
+                                        usePrecomputed = quartileMethod != null || showOutliers === false;
+                                        trace = void 0;
+                                        if (usePrecomputed) {
+                                            summary = (0, boxplot_1.computeBoxplotSummary)(rawValues, {
+                                                quartileMethod: quartileMethod,
+                                            });
+                                            if (!summary)
+                                                return [2 /*return*/, "continue"];
+                                            hideOutliers = showOutliers === false;
+                                            trace = tslib_1.__assign(tslib_1.__assign({ type: "box", name: dataLabel, 
+                                                // Precomputed boxes need an explicit category so each
+                                                // series lands on its own slot (raw mode derives it from
+                                                // the trace name).
+                                                x: [dataLabel || "trace ".concat(currentSeriesIndex)], q1: [summary.q1], median: [summary.median], q3: [summary.q3], 
+                                                // Excel: hiding outlier points extends the whiskers to
+                                                // the full min/max; with outliers shown they stop at the
+                                                // most extreme points inside the 1.5×IQR fences.
+                                                lowerfence: [hideOutliers ? summary.min : summary.lowerWhisker], upperfence: [hideOutliers ? summary.max : summary.upperWhisker] }, (hideOutliers
+                                                ? { boxpoints: false }
+                                                : {
+                                                    // Sample points ride along so plotly can still draw
+                                                    // the outlier dots against the precomputed fences.
+                                                    y: [rawValues.filter(function (v) { return v != null; })],
+                                                    boxpoints: "outliers",
+                                                })), (showMeanMarker
+                                                ? { mean: [summary.mean], boxmean: true }
+                                                : {}));
+                                        }
+                                        else {
+                                            trace = tslib_1.__assign({ type: "box", y: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }), name: dataLabel, 
+                                                // Raw mode is used when outliers are visible (today's
+                                                // default and `showOutliers: true` alike).
+                                                boxpoints: "outliers" }, (showMeanMarker ? { boxmean: true } : {}));
+                                        }
+                                        applyTraceColor(trace, (_58 = series.color) !== null && _58 !== void 0 ? _58 : undefined, {
+                                            noFill: series.noFill,
+                                            dataPointColors: series.dataPointColors,
+                                            seriesIndex: currentSeriesIndex,
+                                            effectiveChartType: effectiveChartType,
+                                        });
+                                        traces.push(trace);
+                                    }
+                                    else if (effectiveChartType === "waterfall") {
+                                        rawValues = "values" in seriesData
+                                            ? seriesData.values
+                                            : seriesData;
+                                        totalIndices_1 = new Set((_59 = spec.totalIndices) !== null && _59 !== void 0 ? _59 : []);
+                                        trace = {
+                                            type: "waterfall",
+                                            x: categoriesFor(series),
+                                            y: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
+                                            measure: rawValues.map(function (_, i) {
+                                                return totalIndices_1.has(i) ? "total" : "relative";
+                                            }),
+                                            name: dataLabel,
+                                        };
+                                        applyTraceColor(trace, (_60 = series.color) !== null && _60 !== void 0 ? _60 : undefined, {
+                                            noFill: series.noFill,
+                                            dataPointColors: series.dataPointColors,
+                                            seriesIndex: currentSeriesIndex,
+                                            effectiveChartType: effectiveChartType,
+                                        });
+                                        traces.push(trace);
+                                    }
+                                    else if (effectiveChartType === "funnel") {
+                                        rawValues = "values" in seriesData
+                                            ? seriesData.values
+                                            : seriesData;
+                                        trace = {
+                                            type: "funnel",
+                                            y: categoriesFor(series),
+                                            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, {
+                                            noFill: series.noFill,
+                                            dataPointColors: series.dataPointColors,
+                                            seriesIndex: currentSeriesIndex,
+                                            effectiveChartType: effectiveChartType,
+                                        });
+                                        traces.push(trace);
+                                    }
+                                    else if (effectiveChartType === "pie" && isOfPie) {
+                                        // Pie-of-pie / bar-of-pie — split the minor slices into a
+                                        // secondary pie or stacked bar beside the main pie, replace
+                                        // them with an aggregated "Other" slice, and join the two
+                                        // plots with connector-line shapes. Only the first pie series
+                                        // participates (of-pie is a single-series chart in Excel).
+                                        if (ofPieHandled)
+                                            return [2 /*return*/, "continue"];
+                                        ofPieHandled = true;
+                                        pieData = seriesData;
+                                        _73 = (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;
+                                        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);
+                                        paletteAt_1 = function (index) {
+                                            return themeColorPalette[index % themeColorPalette.length];
+                                        };
+                                        MAIN_DOMAIN_X = [0, 0.55];
+                                        CY = 0.5;
+                                        SECONDARY_CX = 0.78;
+                                        BAR_LEFT = 0.68;
+                                        BAR_RIGHT = 0.88;
                                         traces.push({
-                                            type: "bar",
-                                            x: [""],
-                                            y: [s.value],
-                                            name: s.label,
-                                            xaxis: "x2",
-                                            yaxis: "y2",
-                                            marker: { color: paletteAt_1(main_1.length + i) },
+                                            type: "pie",
+                                            values: main_1.map(function (s) { return s.value; }),
+                                            labels: main_1.map(function (s) { return s.label; }),
+                                            name: dataLabel,
+                                            domain: { x: MAIN_DOMAIN_X, y: [0, 1] },
+                                            sort: false,
+                                            direction: "clockwise",
+                                            // Rotate so the "Other" slice's angular midpoint faces the
+                                            // secondary plot (Excel's layout). Other is the last slice
+                                            // of a clockwise sweep starting at `rotation`° from 12
+                                            // o'clock, so its midpoint lands at 3 o'clock when the
+                                            // sweep starts 90° + halfAngle past the top.
+                                            rotation: (90 + (halfAngle * 180) / Math.PI) % 360,
+                                            marker: { colors: main_1.map(function (_, i) { return paletteAt_1(i); }) },
                                         });
-                                    });
-                                }
-                                // Connector lines from the Other slice's edges to the top
-                                // and bottom of the secondary plot. Skipped (gracefully)
-                                // when the container size isn't known — pure paper-coord
-                                // geometry can't compensate for the pixel aspect ratio.
-                                var shapes = [];
-                                if (hasGeometry) {
-                                    var connectorColor = isDarkMode
-                                        ? "rgba(255,255,255,0.45)"
-                                        : "#999999";
-                                    var mainCx = (MAIN_DOMAIN_X[0] + MAIN_DOMAIN_X[1]) / 2;
-                                    var px = mainCx + (r * Math.cos(halfAngle)) / plotW;
-                                    var pyTop = CY + (r * Math.sin(halfAngle)) / plotH;
-                                    var pyBottom = CY - (r * Math.sin(halfAngle)) / plotH;
-                                    var tx = ofPieType === "pie" ? SECONDARY_CX : BAR_LEFT;
-                                    var half = ofPieType === "pie" ? ry2 : barHalf;
-                                    var line = {
-                                        type: "line",
-                                        xref: "paper",
-                                        yref: "paper",
-                                        layer: "below",
-                                        line: { color: connectorColor, width: 1 },
-                                    };
-                                    shapes.push(tslib_1.__assign(tslib_1.__assign({}, line), { x0: px, y0: pyTop, x1: tx, y1: CY + half }), tslib_1.__assign(tslib_1.__assign({}, line), { x0: px, y0: pyBottom, x1: tx, y1: CY - half }));
-                                }
-                                ofPieExtras = tslib_1.__assign({ shapes: shapes }, (ofPieType === "bar"
-                                    ? {
-                                        barmode: "stack",
-                                        xaxis2: {
-                                            domain: [BAR_LEFT, BAR_RIGHT],
-                                            anchor: "y2",
-                                            visible: false,
-                                            fixedrange: true,
-                                        },
-                                        yaxis2: {
-                                            domain: [CY - barHalf, CY + barHalf],
-                                            anchor: "x2",
-                                            visible: false,
-                                            fixedrange: true,
-                                        },
+                                        if (secondary.length > 0) {
+                                            plotW = typeof width === "number" ? Math.max(1, width - 102) : 0;
+                                            plotH = typeof height === "number" ? Math.max(1, height - 102) : 0;
+                                            hasGeometry = plotW > 1 && plotH > 1;
+                                            r = hasGeometry
+                                                ? Math.min((MAIN_DOMAIN_X[1] - MAIN_DOMAIN_X[0]) * plotW, plotH) / 2
+                                                : 0;
+                                            r2 = r * secondScale;
+                                            clampFrac = function (v, min, max) {
+                                                return Math.min(max, Math.max(min, v));
+                                            };
+                                            rx2 = clampFrac(hasGeometry ? r2 / plotW : 0.14 * secondScale, 0.03, 0.19);
+                                            ry2 = clampFrac(hasGeometry ? r2 / plotH : 0.28 * secondScale, 0.05, 0.45);
+                                            barHalf = ry2;
+                                            if (ofPieType === "pie") {
+                                                traces.push({
+                                                    type: "pie",
+                                                    values: secondary.map(function (s) { return s.value; }),
+                                                    labels: secondary.map(function (s) { return s.label; }),
+                                                    name: dataLabel,
+                                                    domain: {
+                                                        x: [SECONDARY_CX - rx2, SECONDARY_CX + rx2],
+                                                        y: [CY - ry2, CY + ry2],
+                                                    },
+                                                    sort: false,
+                                                    direction: "clockwise",
+                                                    marker: {
+                                                        colors: secondary.map(function (_, i) { return paletteAt_1(main_1.length + i); }),
+                                                    },
+                                                });
+                                            }
+                                            else {
+                                                // Bar-of-pie — a single-category stacked bar on hidden
+                                                // secondary axes; one trace per point so each segment
+                                                // keeps its own color and legend entry.
+                                                secondary.forEach(function (s, i) {
+                                                    traces.push({
+                                                        type: "bar",
+                                                        x: [""],
+                                                        y: [s.value],
+                                                        name: s.label,
+                                                        xaxis: "x2",
+                                                        yaxis: "y2",
+                                                        marker: { color: paletteAt_1(main_1.length + i) },
+                                                    });
+                                                });
+                                            }
+                                            shapes = [];
+                                            if (hasGeometry) {
+                                                connectorColor = isDarkMode
+                                                    ? "rgba(255,255,255,0.45)"
+                                                    : "#999999";
+                                                mainCx = (MAIN_DOMAIN_X[0] + MAIN_DOMAIN_X[1]) / 2;
+                                                px = mainCx + (r * Math.cos(halfAngle)) / plotW;
+                                                pyTop = CY + (r * Math.sin(halfAngle)) / plotH;
+                                                pyBottom = CY - (r * Math.sin(halfAngle)) / plotH;
+                                                tx = ofPieType === "pie" ? SECONDARY_CX : BAR_LEFT;
+                                                half = ofPieType === "pie" ? ry2 : barHalf;
+                                                line = {
+                                                    type: "line",
+                                                    xref: "paper",
+                                                    yref: "paper",
+                                                    layer: "below",
+                                                    line: { color: connectorColor, width: 1 },
+                                                };
+                                                shapes.push(tslib_1.__assign(tslib_1.__assign({}, line), { x0: px, y0: pyTop, x1: tx, y1: CY + half }), tslib_1.__assign(tslib_1.__assign({}, line), { x0: px, y0: pyBottom, x1: tx, y1: CY - half }));
+                                            }
+                                            ofPieExtras = tslib_1.__assign({ shapes: shapes }, (ofPieType === "bar"
+                                                ? {
+                                                    barmode: "stack",
+                                                    xaxis2: {
+                                                        domain: [BAR_LEFT, BAR_RIGHT],
+                                                        anchor: "y2",
+                                                        visible: false,
+                                                        fixedrange: true,
+                                                    },
+                                                    yaxis2: {
+                                                        domain: [CY - barHalf, CY + barHalf],
+                                                        anchor: "x2",
+                                                        visible: false,
+                                                        fixedrange: true,
+                                                    },
+                                                }
+                                                : {}));
+                                        }
                                     }
-                                    : {}));
+                                    else if (effectiveChartType === "pie" ||
+                                        effectiveChartType === "doughnut") {
+                                        pieData = seriesData;
+                                        trace = {
+                                            type: seriesPlotlyType,
+                                            values: pieData.values,
+                                            labels: pieData.labels,
+                                            name: dataLabel,
+                                            marker: {
+                                                colors: themeColorPalette,
+                                            },
+                                        };
+                                        // Ties the trace back to spec.series for click selection and
+                                        // the series' own number format
+                                        trace.meta = {
+                                            rncSeriesIndex: currentSeriesIndex,
+                                        };
+                                        applyTraceColor(trace, (_62 = series.color) !== null && _62 !== void 0 ? _62 : undefined, {
+                                            noFill: series.noFill,
+                                            dataPointColors: series.dataPointColors,
+                                            seriesIndex: currentSeriesIndex,
+                                            effectiveChartType: effectiveChartType,
+                                        });
+                                        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));
+                                        // 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, {
+                                            noFill: series.noFill,
+                                            dataPointColors: series.dataPointColors,
+                                            invertIfNegative: series.invertIfNegative,
+                                            negativeColor: series.negativeColor,
+                                            values: seriesData.values,
+                                            seriesIndex: currentSeriesIndex,
+                                            effectiveChartType: effectiveChartType,
+                                            gradientColor: (0, gradient_1.gradientToPlotly)(series.gradient),
+                                        });
+                                        decorateCartesianTrace(trace, series, seriesData.values, dataLabel);
+                                        traces.push(trace);
+                                    }
+                                    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));
+                                        // 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, {
+                                            noFill: series.noFill,
+                                            dataPointColors: series.dataPointColors,
+                                            invertIfNegative: series.invertIfNegative,
+                                            negativeColor: series.negativeColor,
+                                            values: numericValues,
+                                            seriesIndex: currentSeriesIndex,
+                                            effectiveChartType: effectiveChartType,
+                                            gradientColor: (0, gradient_1.gradientToPlotly)(series.gradient),
+                                        });
+                                        decorateCartesianTrace(trace, series, numericValues, dataLabel);
+                                        traces.push(trace);
+                                    }
+                                    return [2 /*return*/];
                             }
-                        }
-                        else if (effectiveChartType === "pie") {
-                            var pieData = seriesData;
-                            var trace = {
-                                type: seriesPlotlyType,
-                                values: pieData.values,
-                                labels: pieData.labels,
-                                name: dataLabel,
-                                marker: {
-                                    colors: [
-                                        theme.themeColors.accent1,
-                                        theme.themeColors.accent2,
-                                        theme.themeColors.accent3,
-                                        theme.themeColors.accent4,
-                                        theme.themeColors.accent5,
-                                        theme.themeColors.accent6,
-                                    ],
-                                },
-                            };
-                            applyTraceColor(trace, (_48 = series.color) !== null && _48 !== void 0 ? _48 : undefined, {
-                                noFill: series.noFill,
-                                dataPointColors: series.dataPointColors,
-                                seriesIndex: currentSeriesIndex,
-                                effectiveChartType: effectiveChartType,
-                            });
-                            traces.push(trace);
-                        }
-                        else if ("values" in seriesData && "labels" in seriesData) {
-                            var _56 = assignCartesianData(domainData, seriesData.values), x = _56.x, y = _56.y, orientation_1 = _56.orientation;
-                            var trace = tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_1, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle);
-                            applyTraceColor(trace, (_49 = series.color) !== null && _49 !== void 0 ? _49 : undefined, {
-                                noFill: series.noFill,
-                                dataPointColors: series.dataPointColors,
-                                invertIfNegative: series.invertIfNegative,
-                                negativeColor: series.negativeColor,
-                                values: seriesData.values,
-                                seriesIndex: currentSeriesIndex,
-                                effectiveChartType: effectiveChartType,
-                                gradientColor: (0, gradient_1.gradientToPlotly)(series.gradient),
-                            });
-                            decorateCartesianTrace(trace, series, seriesData.values, dataLabel);
-                            traces.push(trace);
-                        }
-                        else {
-                            var numericValues = seriesData;
-                            var _57 = assignCartesianData(domainData, numericValues), x = _57.x, y = _57.y, orientation_2 = _57.orientation;
-                            var trace = tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_2, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle);
-                            applyTraceColor(trace, (_50 = series.color) !== null && _50 !== void 0 ? _50 : undefined, {
-                                noFill: series.noFill,
-                                dataPointColors: series.dataPointColors,
-                                invertIfNegative: series.invertIfNegative,
-                                negativeColor: series.negativeColor,
-                                values: numericValues,
-                                seriesIndex: currentSeriesIndex,
-                                effectiveChartType: effectiveChartType,
-                                gradientColor: (0, gradient_1.gradientToPlotly)(series.gradient),
-                            });
-                            decorateCartesianTrace(trace, series, numericValues, dataLabel);
-                            traces.push(trace);
-                        }
+                        });
                     };
+                    _69.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;
+                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;
+                case 21:
+                    _k = _j.next();
+                    return [3 /*break*/, 19];
+                case 22: return [3 /*break*/, 25];
+                case 23:
+                    e_3_1 = _69.sent();
+                    e_3 = { error: e_3_1 };
+                    return [3 /*break*/, 25];
+                case 24:
                     try {
-                        for (_j = (e_3 = void 0, tslib_1.__values(series.sources)), _k = _j.next(); !_k.done; _k = _j.next()) {
-                            sheetRange = _k.value;
-                            _loop_2(sheetRange);
-                        }
-                    }
-                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                    finally {
-                        try {
-                            if (_k && !_k.done && (_o = _j.return)) _o.call(_j);
-                        }
-                        finally { if (e_3) throw e_3.error; }
-                    }
-                    _53.label = 12;
-                case 12:
-                    _f = _e.next();
-                    return [3 /*break*/, 8];
-                case 13: return [3 /*break*/, 16];
-                case 14:
-                    e_1_1 = _53.sent();
-                    e_1 = { error: e_1_1 };
-                    return [3 /*break*/, 16];
-                case 15:
-                    try {
-                        if (_f && !_f.done && (_m = _e.return)) _m.call(_e);
+                        if (_k && !_k.done && (_o = _j.return)) _o.call(_j);
                     }
-                    finally { if (e_1) throw e_1.error; }
+                    finally { if (e_3) throw e_3.error; }
                     return [7 /*endfinally*/];
-                case 16:
+                case 25:
                     authoredTitleFmt = spec.titleTextFormat;
-                    newLayout = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ title: {
-                            text: title !== null && title !== void 0 ? title : undefined,
+                    isPercentStackedBars = spec.stackedType === "PERCENT_STACKED" &&
+                        (spec.chartType === "bar" || spec.chartType === "column");
+                    primaryAxisNumberFormat = isPercentStackedBars
+                        ? 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; }),
+                            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; }),
+                        getFormattingFromRange: getFormattingFromRange,
+                        hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+                    });
+                    newLayout = tslib_1.__assign(tslib_1.__assign({ title: {
+                            text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
                             font: applyTextFormatToFont({
                                 family: "Untitled Sans, apple-system, sans-serif",
                                 size: 16,
@@ -1444,63 +1726,112 @@ var BasicChart = function (_a) {
                             color: textColor,
                         }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, xaxis: applyAxisOverridesPlotly({
                             title: {
-                                text: (_51 = spec.horizontalAxisTitle) !== null && _51 !== void 0 ? _51 : "",
+                                text: (_67 = spec.horizontalAxisTitle) !== null && _67 !== void 0 ? _67 : "",
                                 font: { color: textColor },
                             },
                             automargin: true,
                             showgrid: true,
                             gridcolor: gridColor,
                             visible: (0, helpers_1.showXAxis)(spec === null || spec === void 0 ? void 0 : spec.chartType),
-                            type: isHorizontalBarChart ? "linear" : undefined,
+                            type: isHorizontalBarChart
+                                ? "linear"
+                                : multicategoryX
+                                    ? "multicategory"
+                                    : undefined,
                         }, 
                         // For horizontal bar, OOXML's value axis is the X axis.
                         isHorizontalBarChart
                             ? spec.valueAxisOptions
-                            : spec.categoryAxisOptions), yaxis: applyAxisOverridesPlotly({
+                            : spec.categoryAxisOptions, isHorizontalBarChart ? primaryAxisNumberFormat : undefined), yaxis: applyAxisOverridesPlotly({
                             title: {
-                                text: (_52 = spec.verticalAxisTitle) !== null && _52 !== void 0 ? _52 : "",
+                                text: (_68 = spec.verticalAxisTitle) !== null && _68 !== void 0 ? _68 : "",
                                 font: { color: textColor },
                             },
                             showgrid: !isHorizontalBarChart,
                             gridcolor: gridColor,
                             automargin: true,
-                            type: isHorizontalBarChart ? "category" : undefined,
+                            type: isHorizontalBarChart
+                                ? multicategoryX
+                                    ? "multicategory"
+                                    : "category"
+                                : undefined,
                         }, isHorizontalBarChart
                             ? spec.categoryAxisOptions
-                            : spec.valueAxisOptions) }, (hasSecondaryAxis
-                        ? {
-                            yaxis2: applyAxisOverridesPlotly(tslib_1.__assign({ title: { font: { color: textColor } }, overlaying: "y", side: "right", showgrid: false, automargin: true }, (isPareto
+                            : 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
                                 ? { range: [0, 100], ticksuffix: "%" }
-                                : {})), spec.secondaryValueAxisOptions),
-                        }
-                        : {})), (function () {
-                        var _a = applyLegendOverridesPlotly({ font: { color: textColor } }, spec.legend), legendCfg = _a.legend, showlegend = _a.showlegend;
-                        return {
-                            showlegend: showlegend === undefined ? true : showlegend,
-                            legend: legendCfg,
-                        };
-                    })()), { margin: {
-                            l: 50,
-                            r: 50,
-                            t: 50,
-                            b: 50,
-                        }, autosize: true }), ((spec.chartType === "bar" || spec.chartType === "column") && spec.stackedType
-                        ? tslib_1.__assign({ barmode: spec.stackedType === "STACKED" ||
-                                spec.stackedType === "PERCENT_STACKED"
-                                ? "stack"
-                                : "group" }, (spec.stackedType === "PERCENT_STACKED"
-                            ? { barnorm: "percent" }
-                            : {})) : {})), (typeof spec.gapWidth === "number"
-                        ? { bargap: Math.max(0, Math.min(0.95, spec.gapWidth / 400)) }
-                        : {})), (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 } : {})) : {}));
+                                : {})), spec.secondaryValueAxisOptions, secondaryAxisNumberFormat),
+                            _p) : {})), (hasSecondaryCategoryAxis && secondaryDomainData
+                        ? (_q = {},
+                            _q[isHorizontalBarChart ? "yaxis2" : "xaxis2"] = {
+                                overlaying: isHorizontalBarChart ? "y" : "x",
+                                side: isHorizontalBarChart ? "right" : "top",
+                                type: "category",
+                                categoryorder: "array",
+                                categoryarray: secondaryDomainData,
+                                showgrid: false,
+                                automargin: true,
+                                visible: (0, helpers_1.showXAxis)(spec === null || spec === void 0 ? void 0 : spec.chartType),
+                            },
+                            _q) : {}));
                     dlOpts = spec.dataLabels;
                     doughnutHole = spec.doughnutHoleSize;
+                    seriesNumberFormats = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+                    traceNumberFormat = function (trace) {
+                        var _a, _b;
+                        var specIndex = (_a = trace === null || trace === void 0 ? void 0 : trace.meta) === null || _a === void 0 ? void 0 : _a.rncSeriesIndex;
+                        return ((_b = (typeof specIndex === "number"
+                            ? seriesNumberFormats[specIndex]
+                            : undefined)) !== null && _b !== void 0 ? _b : ((trace === null || trace === void 0 ? void 0 : trace[valueAxisKey]) === secondaryValueAxisRef
+                            ? secondaryAxisNumberFormat
+                            : primaryAxisNumberFormat));
+                    };
+                    piePull = isOfPie ? undefined : (0, pie_explosion_1.explosionToPlotlyPull)((0, pie_explosion_1.resolveExplosion)(spec));
                     formattedTraces = traces.map(function (trace) {
-                        var next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType);
-                        // Doughnut is a pie trace with `hole` set.
+                        var _a;
+                        var pattern = traceNumberFormat(trace);
+                        var next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType, pattern);
+                        if (next.type === "pie") {
+                            // Hover values format like the slice's source cell.
+                            if (pattern && !next.text) {
+                                var values = Array.isArray(next.values) ? next.values : [];
+                                next = tslib_1.__assign(tslib_1.__assign({}, next), { text: values.map(function (v) { return (0, axis_number_format_1.formatAxisValue)(pattern, v); }), hoverinfo: "label+text+percent+name" });
+                            }
+                            else if (pattern) {
+                                next = tslib_1.__assign(tslib_1.__assign({}, next), { hoverinfo: "label+text+percent+name" });
+                            }
+                            if (piePull !== undefined) {
+                                next = tslib_1.__assign(tslib_1.__assign({}, next), { pull: piePull });
+                            }
+                        }
+                        else if (!next.hovertemplate &&
+                            (next.type === "bar" || next.type === "scatter") &&
+                            typeof ((_a = next.meta) === null || _a === void 0 ? void 0 : _a.rncSeriesIndex) === "number") {
+                            // Hover values read like the series' own cells (Excel's data tip
+                            // shows the cell text) — the series format alone, not the axis
+                            // fallback the labels use, since that resolves to the first series
+                            // and would stamp its format on every other series. Plotly's `%{y}`
+                            // is a raw number and its d3 formats cannot express SpreadsheetML,
+                            // so the formatted strings ride on `customdata`; `text` stays free
+                            // for the data labels.
+                            var seriesPattern_1 = seriesNumberFormats[next.meta.rncSeriesIndex];
+                            var horizontal = next.orientation === "h";
+                            var values = horizontal ? next.x : next.y;
+                            if (seriesPattern_1 && Array.isArray(values)) {
+                                next = tslib_1.__assign(tslib_1.__assign({}, next), { customdata: values.map(function (v) {
+                                        return (0, axis_number_format_1.formatAxisValue)(seriesPattern_1, v);
+                                    }), hovertemplate: "".concat(horizontal ? "%{y}" : "%{x}", "<br>%{customdata}<extra>%{fullData.name}</extra>") });
+                            }
+                        }
+                        // Doughnut is a pie trace with `hole` set. Excel persists
+                        // `holeSize` as a 0-90 percentage, normalized to a 0-1 fraction
+                        // (doughnutHoleSize); clamp like the echarts renderer and default
+                        // to 0.5 when unset.
                         if (spec.chartType === "doughnut" && next.type === "pie") {
-                            next = tslib_1.__assign(tslib_1.__assign({}, next), { hole: typeof doughnutHole === "number" ? doughnutHole : 0.5 });
+                            next = tslib_1.__assign(tslib_1.__assign({}, next), { hole: typeof doughnutHole === "number"
+                                    ? Math.max(0, Math.min(0.9, doughnutHole))
+                                    : 0.5 });
                         }
                         return next;
                     });
@@ -1524,7 +1855,12 @@ var BasicChart = function (_a) {
     // Update chart on spec changes
     (0, ui_1.useIsomorphicLayoutEffect)(function () {
         updateChart();
-    }, [chart.spec, getDomainValuesFromRange, getSeriesValuesFromRange]);
+    }, [
+        chart.spec,
+        getDomainValuesFromRange,
+        getSeriesValuesFromRange,
+        getFormattingFromRange,
+    ]);
     // Update theme
     (0, ui_1.useIsomorphicLayoutEffect)(function () {
         updateChart();
@@ -1547,21 +1883,68 @@ var BasicChart = function (_a) {
     });
     var config = {
         responsive: true,
-        // Static so a body drag falls through to the EmbedDraggable move handler
-        // (Excel/Sheets behavior) instead of triggering Plotly's zoom-box.
-        // staticPlot also drops the modebar and the `.plot-container .draglayer`
-        // element the move's cancel selector keys off of.
+        // Interactive so plotly reports clicks (series / point selection) and
+        // hover; `dragmode: false` on the layout keeps plotly from starting a
+        // zoom-box or pan on mousedown, so a body drag falls through to the
+        // EmbedDraggable move handler (Excel/Sheets behavior).
         displayModeBar: false,
         displaylogo: false,
-        staticPlot: true,
+        staticPlot: false,
+        scrollZoom: false,
+        doubleClick: false,
     };
+    var plotLayout = (0, react_1.useMemo)(function () { return (tslib_1.__assign(tslib_1.__assign({}, layout), { dragmode: false })); }, [layout]);
     // Excel's "Rounded Corners" chart frame (`<c:roundedCorners val="1"/>`
     // at the chartSpace root). Default per OOXML §21.2.2.183 is square,
     // so only opt in when the workbook explicitly set the flag.
     var roundedCornersStyle = spec.roundedCorners
         ? { borderRadius: 8, overflow: "hidden" }
         : undefined;
+    // Excel's "Switch Row/Column" — offered to the grid's right-click menu
+    // when the host can persist the chart and the sources transpose.
+    var switchRowColumnAction = onUpdateChart && !readonly && (0, chart_orientation_1.canSwitchRowColumn)(spec)
+        ? function () {
+            var next = (0, chart_orientation_1.switchRowColumn)(spec, {
+                getFormattedValue: (0, chart_orientation_1.cellLabelGetterFromRangeReader)(getDomainValuesFromRange),
+            });
+            if (next)
+                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.
+    var exportChartPng = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var graphDiv, Plotly, 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, {
+                            format: "png",
+                            width: graphDiv.clientWidth || width || 600,
+                            height: graphDiv.clientHeight || height || 400,
+                            scale: 2,
+                        })];
+                case 2:
+                    url = _a.sent();
+                    return [2 /*return*/, (0, chart_image_1.dataUrlToBlob)(url)];
+            }
+        });
+    }); };
+    // The grid's right-click menu offers these without knowing the renderer.
+    (0, spreadsheet_1.useRegisterChartActions)(chart.chartId, {
+        requestEdit: onRequestEdit ? function () { return onRequestEdit(chart); } : undefined,
+        exportPng: exportChartPng,
+        switchRowColumn: switchRowColumnAction,
+    });
     return (react_1.default.createElement("div", { className: "flex flex-1", style: roundedCornersStyle },
+        fieldButtons,
         isSelected ? (react_1.default.createElement(ui_1.DropdownMenu, null,
             react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
                 react_1.default.createElement(ui_1.IconButton, { className: "absolute right-1 top-1 z-10" },
@@ -1580,7 +1963,9 @@ var BasicChart = function (_a) {
                             shouldFocusSheetRef.current = true;
                             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" },
-            react_1.default.createElement(react_plotly_js_1.default, { ref: plotRef, data: plotData, layout: layout, config: config, style: { width: "100%", height: "100%" } }))));
+        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) {
+                    graphDivRef.current = graphDiv;
+                }, style: { width: "100%", height: "100%" } }))));
 };
 exports.BasicChart = BasicChart;