@rowsncolumns/charts 28.0.0 → 28.1.0

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

@@ -14,12 +14,18 @@ var echarts = tslib_1.__importStar(require("echarts/core"));
 var renderers_1 = require("echarts/renderers");
 var react_1 = tslib_1.__importStar(require("react"));
 var aggregation_1 = require("../utils/aggregation");
+var axis_number_format_1 = require("../utils/axis-number-format");
 var bar_layout_1 = require("../utils/bar-layout");
 var boxplot_1 = require("../utils/boxplot");
 var bubble_1 = require("../utils/bubble");
 var chart_spec_utils_1 = require("../utils/chart-spec-utils");
+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 empty_cells_1 = require("../utils/empty-cells");
 var echarts_gl_loader_1 = require("../utils/echarts-gl-loader");
 var error_bars_1 = require("../utils/error-bars");
+var category_levels_1 = require("../utils/category-levels");
 var gradient_1 = require("../utils/gradient");
 var hierarchy_1 = require("../utils/hierarchy");
 var histogram_1 = require("../utils/histogram");
@@ -29,6 +35,8 @@ var radar_1 = require("../utils/radar");
 var region_map_1 = require("../utils/region-map");
 var region_map_loader_1 = require("../utils/region-map-loader");
 var stock_1 = require("../utils/stock");
+var pie_explosion_1 = require("../utils/pie-explosion");
+var series_click_1 = require("../utils/series-click");
 var three_d_1 = require("../utils/three-d");
 var trendline_1 = require("../utils/trendline");
 var waterfall_1 = require("../utils/waterfall");
@@ -172,6 +180,8 @@ var buildHierarchyLevels = function (maxDepth) {
     }
     return levels;
 };
+/** Series whose tooltip value is one number on a value axis. */
+var VALUE_TOOLTIP_SERIES_TYPES = new Set(["bar", "line", "scatter", "funnel"]);
 var defaultLegendConfig = {
     padding: 10,
     itemWidth: 10,
@@ -180,7 +190,7 @@ var defaultLegendConfig = {
 };
 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 explicitChartTitle = (_b = chart.spec.title) !== null && _b !== void 0 ? _b : undefined;
     var hierarchyTitleRef = (0, react_1.useRef)(explicitChartTitle);
@@ -188,6 +198,45 @@ var BasicChart = function (_a) {
     var el = (0, react_1.useRef)(null);
     var chartRef = (0, react_1.useRef)(undefined);
     var focusSheet = (0, spreadsheet_1.useFocusSheet)();
+    // Excel selects a data series when it is clicked inside the chart and
+    // the grid highlights that series' source range; clicking empty chart
+    // area steps back to the whole chart. Published for the grid to draw.
+    var setSelectedChartSeries = (0, spreadsheet_1.useSetSelectedChartSeries)();
+    var chartForClickRef = (0, react_1.useRef)(chart);
+    chartForClickRef.current = chart;
+    // An exploded pie draws every slice in echarts' `select` state (the only
+    // per-slice offset it has); echarts unselects a slice on click, so that
+    // click is folded back into a select to keep the slice out.
+    var explodedRef = (0, react_1.useRef)(false);
+    var bindSeriesSelection = function (instance) {
+        instance.on("click", function (params) {
+            var _a, _b;
+            var current = chartForClickRef.current;
+            var clickParams = params;
+            var seriesIndex = (0, series_click_1.resolveClickedSeriesIndex)(clickParams, (_b = (_a = current.spec.series) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+            if (seriesIndex === undefined)
+                return;
+            var dataIndex = (0, series_click_1.resolveClickedDataIndex)(clickParams);
+            setSelectedChartSeries(tslib_1.__assign({ chartId: current.chartId, seriesIndex: seriesIndex }, (dataIndex === undefined ? {} : { dataIndex: dataIndex })));
+        });
+        instance.on("selectchanged", function (event) {
+            var _a;
+            var _b = event, fromAction = _b.fromAction, isFromClick = _b.isFromClick, fromActionPayload = _b.fromActionPayload;
+            if (!explodedRef.current || !isFromClick || fromAction !== "unselect") {
+                return;
+            }
+            instance.dispatchAction({
+                type: "select",
+                seriesIndex: fromActionPayload === null || fromActionPayload === void 0 ? void 0 : fromActionPayload.seriesIndex,
+                dataIndex: (_a = fromActionPayload === null || fromActionPayload === void 0 ? void 0 : fromActionPayload.dataIndexInside) !== null && _a !== void 0 ? _a : fromActionPayload === null || fromActionPayload === void 0 ? void 0 : fromActionPayload.dataIndex,
+            });
+        });
+        instance.getZr().on("click", function (event) {
+            if (!event.target) {
+                setSelectedChartSeries(undefined);
+            }
+        });
+    };
     var shouldFocusSheetRef = (0, react_1.useRef)(false);
     var previousChartType = (0, react_1.useRef)(undefined);
     var previousSeriesCount = (0, react_1.useRef)(undefined);
@@ -201,11 +250,16 @@ var BasicChart = function (_a) {
     // visualMap) doesn't merge back into a cartesian one, so the instance
     // is re-initialized when entering/leaving the region-map rendering.
     var renderedAsRegionMap = (0, react_1.useRef)(false);
+    // Contour (Excel's flat Surface view) renders as a heatmap with a
+    // visualMap; that component doesn't merge back into a plain cartesian
+    // option, so the instance is re-initialized when entering/leaving it.
+    var renderedAsContour = (0, react_1.useRef)(false);
     // Initialize line chart
     var initializeChart = function () {
         var _a, _b;
         if (el.current && !chartRef.current) {
             chartRef.current = echarts.init(el.current);
+            bindSeriesSelection(chartRef.current);
             chartRef.current.setOption({
                 title: {
                     left: "top",
@@ -275,6 +329,16 @@ var BasicChart = function (_a) {
         }
         var numericValues = seriesValues;
         if (spec.chartType === "pie") {
+            if (options.pieLabels) {
+                var _b = options.pieLabels, domainLabels = _b.domainLabels, offset = _b.offset;
+                var labels = offset === undefined
+                    ? domainLabels
+                    : domainLabels.slice(offset, offset + numericValues.length);
+                return labels.map(function (name, idx) { return ({
+                    value: numericValues[idx],
+                    name: name,
+                }); });
+            }
             var domainSheetRange = (_a = spec.domains[0]) === null || _a === void 0 ? void 0 : _a.sources[0];
             if (!domainSheetRange) {
                 return [];
@@ -285,7 +349,9 @@ var BasicChart = function (_a) {
                 name: name,
             }); });
         }
-        return numericValues;
+        // Excel's "Hidden and Empty Cells": gaps / zero / connect, and
+        // whether #N/A counts as empty.
+        return (0, empty_cells_1.applyEmptyCellsPolicy)(numericValues, rawSeriesValues, spec, options.lineLike);
     }, [getSeriesValuesFromRange, getDomainValuesFromRange]);
     // Resize a chart
     var resizeChart = function () {
@@ -296,11 +362,11 @@ var BasicChart = function (_a) {
      * Triggers a chart update
      */
     var updateChart = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-        var threeDRenderKind, canRender3D, willRender3D, isRegionMap, regionSpec, geoScope, geo, labels, seriesEntry, values, _a, data, unmatched, min, max, textColor, ramp, noDataColor, borderColor, regionSeriesLabel, seriesName, chartDomains, chartSeries, legend, chartType, position, showAxis, isBubble, isHierarchy, skipHeaders_1, labelValues, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _b, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _c, categories_1, preparedSeries, sizeValues, sizeScale_1, xAxisConfig, tooltipFormatter, bubbleSeriesLabel_1, hierarchyRows, headerTitle, hierarchyData, rootName, seriesDisplayName, hierarchyDepth, levels, tooltipFormatter, hierarchySeriesLabel, categories_2, threeDSeriesInputs, _d, _e, seriesEntry, dataLabel, _f, _g, values, e_1_1, seriesNames_1, threeDPalette_1, seriesColorAt_1, categoryAxisLabel, seriesAxisLabel, threeDTooltipFormatter, threeDSeries, visualMap, xAxis3D, yAxis3D, surfacePoints, _h, zMin, zMax, skipHeaders, categories, radarSeriesInputs, _j, _k, seriesEntry, label, values, indicators, radarData, radarStyle_1, radarColors_1, radarSeriesLabel, variant, categories, seriesValues, stockSeriesLabel_1, upColor_1, downColor_1, volumePoints, hasVolume, stockGrid, baseStockXAxis, stockXAxis, volumeYAxis, volumeSeries, stockAxisPointer, candleData, lineSeries, stockColors_1, isStacked, isCircularChart, isOfPie, ofPieLayout, isHorizontalBarChart, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, aggregateDomainValues, pushSeriesOverlays, sideBySideBarCount, specBarGap, specBarCategoryGap, _l, _m, series, dataLabel, _o, _p, _loop_1, _q, _r, sheetRange, e_2_1, labels, seriesEntry, rawValues, _s, main_1, secondary, otherTotal, total, ofPieType_1, secondScale, halfAngle_1, hasSecondary, MAIN_CX_1, CY_1, MAIN_RADIUS_PCT_1, SECONDARY_CX_1, secondaryRadiusPct_1, BAR_LEFT_1, BAR_RIGHT, barHalfFrac_1, ofPiePalette_1, paletteAt_1, connectorColor_1, primaryDomainSource_1, rawDomainValues, labels, seriesEntry, rawValues_1, totalIndices, steps, accent_1, decreaseColor_1, totalColor_1, connectors, primaryDomainSource_2, rawDomainValues, labels_1, seriesEntry, rawValues, quartileMethod, showOutliers, showMeanMarker, boxStats, boxLabels, outlierPoints, meanPoints, _t, _u, seriesEntry, label, rawValues, summary, boxIndex, lo, hi, _v, _w, outlier, boxSeries, boxColor, rawValues, _x, labels, counts, isPareto_1, cumulativePercents, pareto, histogramSeries, histogramColor, renderedSeriesCount, replaceMerge, gridConfig, valueAxisBase, isPareto, hasSecondaryAxis, tooltipConfig, finalLegend, seriesLabelOption, isDoughnut, doughnutHoleSize, barSeries, len, categoryTotals_1, barSeries_1, barSeries_1_1, s, i, raw, n, barSeries_2, barSeries_2_1, s, seriesWithLabels;
-        var e_1, _y, e_3, _z, e_2, _0, e_4, _1, e_5, _2, e_6, _3, e_7, _4, e_8, _5;
-        var _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103;
-        return tslib_1.__generator(this, function (_104) {
-            switch (_104.label) {
+        var threeDRenderKind, canRender3D, willRender3D, isRegionMap, regionSpec, geoScope, geo, labels, seriesEntry, values, _a, data, unmatched, min, max, textColor, ramp, noDataColor, borderColor, regionSeriesLabel, seriesName, chartDomains, chartSeries, legend, chartType, position, showAxis, isBubble, isHierarchy, skipHeaders_1, labelValues, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _b, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _c, categories_1, preparedSeries, sizeValues, sizeScale_1, xAxisConfig, tooltipFormatter, bubbleSeriesLabel_1, hierarchyRows, headerTitle, hierarchyData, rootName, seriesDisplayName, hierarchyDepth, levels, sizeNumberFormat_1, tooltipFormatter, hierarchyDataLabels, hierarchySeriesLabel, isContour, categories_2, contourSeriesInputs, _d, _e, seriesEntry, dataLabel, _f, _g, values, e_1_1, seriesNames_1, contourPoints, _h, zMin, zMax, contourFormats_1, contourLabel, categories_3, threeDSeriesInputs, _j, _k, seriesEntry, dataLabel, _l, _m, values, e_2_1, seriesNames_2, threeDPalette_1, seriesColorAt_1, categoryAxisLabel, seriesAxisLabel, stackedBar3D_1, threeDFormats_1, threeDTooltipFormatter, threeDSeries, visualMap, xAxis3D, yAxis3D, categoryCount, categoryTotals_1, threeDSeriesInputs_1, threeDSeriesInputs_1_1, entry, isPercent_1, surfacePoints, _o, zMin, zMax, skipHeaders, categories, radarSeriesInputs, _p, _q, seriesEntry, label, values, indicators_1, radarData, radarStyle_1, radarColors_1, radarFormats_1, radarDataLabels_1, radarSeriesLabelFor_1, radarTooltipFormatter, variant_1, categories, seriesValues, stockFormats_1, stockRoleIndex_1, stockFormatFor_1, stockDataLabels_1, stockSeriesLabelFor_1, upColor_1, downColor_1, volumePoints, hasVolume, stockGrid, baseStockXAxis, stockXAxis, volumeYAxis, volumeSeries, stockAxisPointer, candleData, lineSeries, stockColors_1, isStacked, isCircularChart, isOfPie, ofPieLayout, isHorizontalBarChart, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, aggregateDomainValues, categoryLevels, pushSeriesOverlays, sideBySideBarCount, specBarGap, specBarCategoryGap, _loop_1, _r, _s, _t, specSeriesIndex, series, e_3_1, labels, seriesEntry, rawValues, _u, main_1, secondary, otherTotal, total, ofPieType_1, secondScale, halfAngle_1, hasSecondary, MAIN_CX_1, CY_1, MAIN_RADIUS_PCT_1, SECONDARY_CX_1, secondaryRadiusPct_1, BAR_LEFT_1, BAR_RIGHT, barHalfFrac_1, ofPiePalette_1, paletteAt_1, connectorColor_1, primaryDomainSource_1, rawDomainValues, labels, seriesEntry, rawValues_1, totalIndices, steps, accent_1, decreaseColor_1, totalColor_1, connectors, primaryDomainSource_2, rawDomainValues, labels_1, seriesEntry, rawValues, quartileMethod, showOutliers, showMeanMarker, boxStats, boxLabels, outlierPoints, meanPoints, _v, _w, seriesEntry, label, rawValues, summary, boxIndex, lo, hi, _x, _y, outlier, boxSeries, boxColor, rawValues, _z, labels, counts, isPareto_1, cumulativePercents, pareto, histogramSeries, histogramColor, renderedSeriesCount, replaceMerge, gridConfig, valueAxisBase, isPareto, hasSecondaryAxis, isPercentStackedBars, primaryAxisNumberFormat, secondaryAxisNumberFormat, axisNumberFormatFor, seriesNumberFormats, seriesNumberFormatFor, tooltipConfig, finalLegend, dataLabelOptions, seriesLabelOptionFor, isDoughnut, doughnutHoleSize, explosion, explosionOffset, barSeries, len, categoryTotals_2, barSeries_1, barSeries_1_1, s, i, raw, n, barSeries_2, barSeries_2_1, s, seriesWithLabels;
+        var e_1, _0, e_2, _1, e_4, _2, e_5, _3, e_3, _4, e_6, _5, e_7, _6, e_8, _7, e_9, _8;
+        var _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103, _104, _105, _106, _107, _108, _109, _110, _111, _112, _113, _114, _115, _116, _117, _118, _119, _120, _121, _122, _123, _124, _125, _126, _127, _128;
+        return tslib_1.__generator(this, function (_129) {
+            switch (_129.label) {
                 case 0:
                     (0, utils_1.debug)("Updating chart", chart);
                     threeDRenderKind = (0, three_d_1.resolve3DRenderKind)(spec.sourceChartType);
@@ -324,7 +390,7 @@ var BasicChart = function (_a) {
                         // Leaving 3-D (spec edit) — the grid3D option doesn't merge back
                         // into a cartesian one, so re-initialize from a clean slate and
                         // let the normal 2-D flow below do a full structural render.
-                        (_6 = chartRef.current) === null || _6 === void 0 ? void 0 : _6.dispose();
+                        (_9 = chartRef.current) === null || _9 === void 0 ? void 0 : _9.dispose();
                         chartRef.current = undefined;
                         renderedIn3D.current = false;
                         previousChartType.current = undefined;
@@ -338,7 +404,7 @@ var BasicChart = function (_a) {
                         // doesn't merge back into a cartesian one, so re-initialize from
                         // a clean slate and let the normal flow below do a full
                         // structural render.
-                        (_7 = chartRef.current) === null || _7 === void 0 ? void 0 : _7.dispose();
+                        (_10 = chartRef.current) === null || _10 === void 0 ? void 0 : _10.dispose();
                         chartRef.current = undefined;
                         renderedAsRegionMap.current = false;
                         previousChartType.current = undefined;
@@ -351,7 +417,7 @@ var BasicChart = function (_a) {
                     geoScope = (0, region_map_1.resolveGeoScope)(regionSpec.geoScope);
                     return [4 /*yield*/, (0, region_map_loader_1.loadRegionMapGeo)(geoScope)];
                 case 1:
-                    geo = _104.sent();
+                    geo = _129.sent();
                     // Entering the region map from a cartesian render: the previous
                     // grid/axis option doesn't merge into the map one, so start from
                     // a bare instance (theme options are re-applied after setOption).
@@ -361,11 +427,12 @@ var BasicChart = function (_a) {
                     }
                     if (el.current && !chartRef.current) {
                         chartRef.current = echarts.init(el.current);
+                        bindSeriesSelection(chartRef.current);
                     }
                     if (!geo) {
                         // Map asset failed to load (or unknown scope) — the loader
                         // already warned once; render an empty chart, never crash.
-                        (_8 = chartRef.current) === null || _8 === void 0 ? void 0 : _8.setOption({ series: [] }, { replaceMerge: ["series", "visualMap"] });
+                        (_11 = chartRef.current) === null || _11 === void 0 ? void 0 : _11.setOption({ series: [] }, { replaceMerge: ["series", "visualMap"] });
                         renderedAsRegionMap.current = true;
                         applyThemeOptions();
                         previousChartType.current = spec.chartType;
@@ -373,7 +440,7 @@ var BasicChart = function (_a) {
                         return [2 /*return*/];
                     }
                     labels = flattenChartDataValues(regionSpec.domains, getDomainValuesFromRange, regionSpec.hiddenDimensionStrategy, false);
-                    seriesEntry = (_9 = regionSpec.series) === null || _9 === void 0 ? void 0 : _9[0];
+                    seriesEntry = (_12 = regionSpec.series) === null || _12 === void 0 ? void 0 : _12[0];
                     values = seriesEntry
                         ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, regionSpec.hiddenDimensionStrategy)
                         : [];
@@ -389,7 +456,7 @@ var BasicChart = function (_a) {
                     seriesName = (seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                         ? seriesEntry.dataLabel
                         : "";
-                    (_10 = chartRef.current) === null || _10 === void 0 ? void 0 : _10.setOption({
+                    (_13 = chartRef.current) === null || _13 === void 0 ? void 0 : _13.setOption({
                         // The visualMap color scale is the value legend; the series
                         // legend stays hidden unless an authored override turns it on.
                         legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: false }), spec.legend),
@@ -457,36 +524,36 @@ var BasicChart = function (_a) {
                     hierarchyTitleRef.current = explicitChartTitle;
                     skipHeaders_1 = spec.useFirstRowAsHeaders !== false;
                     labelValues = flattenChartDataValues(spec.bubbleLabels, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
-                    perSeriesX = ((_11 = spec.domains) !== null && _11 !== void 0 ? _11 : []).map(function (dom) {
+                    perSeriesX = ((_14 = spec.domains) !== null && _14 !== void 0 ? _14 : []).map(function (dom) {
                         return flattenChartDataValues([dom], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
-                    perSeriesSize = ((_12 = spec.bubbleSizes) !== null && _12 !== void 0 ? _12 : []).map(function (sz) {
+                    perSeriesSize = ((_15 = spec.bubbleSizes) !== null && _15 !== void 0 ? _15 : []).map(function (sz) {
                         return flattenChartDataValues([sz], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
                     seriesInputs = [];
                     i = 0;
-                    _104.label = 3;
+                    _129.label = 3;
                 case 3:
                     if (!(i < spec.series.length)) return [3 /*break*/, 7];
                     seriesEntry = spec.series[i];
-                    resolvedLabel = (_13 = seriesEntry.dataLabel) !== null && _13 !== void 0 ? _13 : "";
+                    resolvedLabel = (_16 = seriesEntry.dataLabel) !== null && _16 !== void 0 ? _16 : "";
                     if (!(resolvedLabel && (0, utils_1.isAFormula)(resolvedLabel))) return [3 /*break*/, 5];
                     _b = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_14 = position.sheetId) !== null && _14 !== void 0 ? _14 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_17 = position.sheetId) !== null && _17 !== void 0 ? _17 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                 case 4:
-                    resolvedLabel = _b.apply(void 0, [_104.sent()]);
-                    _104.label = 5;
+                    resolvedLabel = _b.apply(void 0, [_129.sent()]);
+                    _129.label = 5;
                 case 5:
-                    xValues = (_15 = perSeriesX[i]) !== null && _15 !== void 0 ? _15 : perSeriesX[0];
-                    sizeValues_1 = (_16 = perSeriesSize[i]) !== null && _16 !== void 0 ? _16 : perSeriesSize[0];
+                    xValues = (_18 = perSeriesX[i]) !== null && _18 !== void 0 ? _18 : perSeriesX[0];
+                    sizeValues_1 = (_19 = perSeriesSize[i]) !== null && _19 !== void 0 ? _19 : 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 } : {})));
-                    _104.label = 6;
+                    _129.label = 6;
                 case 6:
                     i++;
                     return [3 /*break*/, 3];
                 case 7:
-                    sharedXValues = (_17 = perSeriesX[0]) !== null && _17 !== void 0 ? _17 : [];
-                    sharedSizeValues = (_18 = perSeriesSize[0]) !== null && _18 !== void 0 ? _18 : [];
+                    sharedXValues = (_20 = perSeriesX[0]) !== null && _20 !== void 0 ? _20 : [];
+                    sharedSizeValues = (_21 = perSeriesSize[0]) !== null && _21 !== void 0 ? _21 : [];
                     _c = (0, bubble_1.prepareBubbleSeriesData)({
                         xValues: sharedXValues,
                         labelValues: labelValues,
@@ -498,13 +565,13 @@ var BasicChart = function (_a) {
                         ? {
                             type: "category",
                             data: categories_1,
-                            name: (_19 = spec.horizontalAxisTitle) !== null && _19 !== void 0 ? _19 : "",
+                            name: (_22 = spec.horizontalAxisTitle) !== null && _22 !== void 0 ? _22 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         }
                         : {
                             type: "value",
-                            name: (_20 = spec.horizontalAxisTitle) !== null && _20 !== void 0 ? _20 : "",
+                            name: (_23 = spec.horizontalAxisTitle) !== null && _23 !== void 0 ? _23 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         };
@@ -519,14 +586,14 @@ var BasicChart = function (_a) {
                         return "".concat(seriesName).concat(bubbleName, "X: ").concat(label !== null && label !== void 0 ? label : "", "<br/>Y: ").concat(y !== null && y !== void 0 ? y : "", "<br/>Size: ").concat(size !== null && size !== void 0 ? size : "");
                     };
                     bubbleSeriesLabel_1 = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
-                    (_21 = chartRef.current) === null || _21 === void 0 ? void 0 : _21.setOption({
+                    (_24 = chartRef.current) === null || _24 === void 0 ? void 0 : _24.setOption({
                         xAxis: [
                             (0, overrides_1.applyAxisOverrides)(tslib_1.__assign({}, xAxisConfig), spec.categoryAxisOptions),
                         ],
                         yAxis: [
                             (0, overrides_1.applyAxisOverrides)({
                                 type: "value",
-                                name: (_22 = spec.verticalAxisTitle) !== null && _22 !== void 0 ? _22 : "",
+                                name: (_25 = spec.verticalAxisTitle) !== null && _25 !== void 0 ? _25 : "",
                                 nameLocation: "middle",
                                 nameGap: 45,
                             }, spec.valueAxisOptions),
@@ -613,19 +680,22 @@ var BasicChart = function (_a) {
                         });
                         hierarchyTitleRef.current = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle;
                         hierarchyData = (0, hierarchy_1.buildHierarchyTree)(hierarchyRows);
-                        rootName = hierarchyData.length === 1 ? (_24 = (_23 = hierarchyData[0]) === null || _23 === void 0 ? void 0 : _23.name) !== null && _24 !== void 0 ? _24 : "" : "";
-                        seriesDisplayName = (_26 = (_25 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _25 !== void 0 ? _25 : rootName) !== null && _26 !== void 0 ? _26 : "";
+                        rootName = hierarchyData.length === 1 ? (_27 = (_26 = hierarchyData[0]) === null || _26 === void 0 ? void 0 : _26.name) !== null && _27 !== void 0 ? _27 : "" : "";
+                        seriesDisplayName = (_29 = (_28 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _28 !== void 0 ? _28 : rootName) !== null && _29 !== void 0 ? _29 : "";
                         hierarchyDepth = getHierarchyDepth(hierarchyData);
                         levels = buildHierarchyLevels(hierarchyDepth);
+                        sizeNumberFormat_1 = (0, axis_number_format_1.resolveSourceNumberFormat)((_31 = (_30 = spec.sizeData) === null || _30 === void 0 ? void 0 : _30[0]) === null || _31 === void 0 ? void 0 : _31.sources, getFormattingFromRange, spec.hiddenDimensionStrategy);
                         tooltipFormatter = function (params) {
                             var _a;
                             var value = Array.isArray(params.value)
                                 ? params.value[params.value.length - 1]
                                 : (_a = params.value) !== null && _a !== void 0 ? _a : "";
-                            return "".concat(params.name, ": ").concat(value);
+                            return "".concat(params.name, ": ").concat((0, axis_number_format_1.formatAxisValue)(sizeNumberFormat_1, value));
                         };
-                        hierarchySeriesLabel = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
-                        (_27 = chartRef.current) === null || _27 === void 0 ? void 0 : _27.setOption({
+                        hierarchyDataLabels = spec.dataLabels;
+                        hierarchySeriesLabel = (0, overrides_1.buildSeriesLabelOption)(hierarchyDataLabels && !hierarchyDataLabels.numberFormatPattern
+                            ? tslib_1.__assign(tslib_1.__assign({}, hierarchyDataLabels), { numberFormatPattern: sizeNumberFormat_1 }) : hierarchyDataLabels);
+                        (_32 = chartRef.current) === null || _32 === void 0 ? void 0 : _32.setOption({
                             xAxis: [
                                 {
                                     type: "category",
@@ -687,55 +757,200 @@ var BasicChart = function (_a) {
                         (0, utils_1.debug)("Unsupported chart type", spec.chartType);
                         return [2 /*return*/];
                     }
-                    if (!(willRender3D && threeDRenderKind)) return [3 /*break*/, 19];
+                    isContour = (0, three_d_1.isContourSpec)(spec);
+                    if (renderedAsContour.current && !isContour) {
+                        (_33 = chartRef.current) === null || _33 === void 0 ? void 0 : _33.dispose();
+                        chartRef.current = undefined;
+                        renderedAsContour.current = false;
+                        previousChartType.current = undefined;
+                        previousSeriesCount.current = undefined;
+                        initializeChart();
+                        applyThemeOptions();
+                    }
+                    if (!isContour) return [3 /*break*/, 19];
                     categories_2 = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                    threeDSeriesInputs = [];
-                    _104.label = 9;
+                    contourSeriesInputs = [];
+                    _129.label = 9;
                 case 9:
-                    _104.trys.push([9, 16, 17, 18]);
-                    _d = tslib_1.__values((_28 = spec.series) !== null && _28 !== void 0 ? _28 : []), _e = _d.next();
-                    _104.label = 10;
+                    _129.trys.push([9, 16, 17, 18]);
+                    _d = tslib_1.__values((_34 = spec.series) !== null && _34 !== void 0 ? _34 : []), _e = _d.next();
+                    _129.label = 10;
                 case 10:
                     if (!!_e.done) return [3 /*break*/, 15];
                     seriesEntry = _e.value;
                     if (!(!(0, utils_1.isNil)(seriesEntry.dataLabel) && (0, utils_1.isAFormula)(seriesEntry.dataLabel))) return [3 /*break*/, 12];
                     _g = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_29 = position.sheetId) !== null && _29 !== void 0 ? _29 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_35 = position.sheetId) !== null && _35 !== void 0 ? _35 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                 case 11:
-                    _f = _g.apply(void 0, [_104.sent()]);
+                    _f = _g.apply(void 0, [_129.sent()]);
                     return [3 /*break*/, 13];
                 case 12:
-                    _f = (_30 = seriesEntry.dataLabel) !== null && _30 !== void 0 ? _30 : "";
-                    _104.label = 13;
+                    _f = (_36 = seriesEntry.dataLabel) !== null && _36 !== void 0 ? _36 : "";
+                    _129.label = 13;
                 case 13:
                     dataLabel = _f;
                     values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(sanitizeChartValue);
-                    threeDSeriesInputs.push({ name: dataLabel, values: values });
-                    _104.label = 14;
+                    contourSeriesInputs.push({ name: dataLabel, values: values });
+                    _129.label = 14;
                 case 14:
                     _e = _d.next();
                     return [3 /*break*/, 10];
                 case 15: return [3 /*break*/, 18];
                 case 16:
-                    e_1_1 = _104.sent();
+                    e_1_1 = _129.sent();
                     e_1 = { error: e_1_1 };
                     return [3 /*break*/, 18];
                 case 17:
                     try {
-                        if (_e && !_e.done && (_y = _d.return)) _y.call(_d);
+                        if (_e && !_e.done && (_0 = _d.return)) _0.call(_d);
                     }
                     finally { if (e_1) throw e_1.error; }
                     return [7 /*endfinally*/];
                 case 18:
-                    seriesNames_1 = threeDSeriesInputs.map(function (entry, index) { return entry.name || "Series ".concat(index + 1); });
-                    threeDPalette_1 = [
+                    seriesNames_1 = contourSeriesInputs.map(function (entry, index) { return entry.name || "Series ".concat(index + 1); });
+                    contourPoints = (0, three_d_1.buildContourData)(contourSeriesInputs);
+                    _h = tslib_1.__read((0, three_d_1.getValueExtent)(contourPoints.filter(function (point) {
+                        return typeof point[2] === "number";
+                    })), 2), zMin = _h[0], zMax = _h[1];
+                    contourFormats_1 = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+                    contourLabel = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                    if (!renderedAsContour.current && chartRef.current) {
+                        chartRef.current.dispose();
+                        chartRef.current = undefined;
+                    }
+                    if (el.current && !chartRef.current) {
+                        chartRef.current = echarts.init(el.current);
+                        bindSeriesSelection(chartRef.current);
+                    }
+                    (_37 = chartRef.current) === null || _37 === void 0 ? void 0 : _37.setOption({
+                        tooltip: {
+                            textStyle: { fontSize: 12 },
+                            trigger: "item",
+                            formatter: function (params) {
+                                var _a, _b, _c;
+                                var _d = tslib_1.__read(((_a = params === null || params === void 0 ? void 0 : params.value) !== null && _a !== void 0 ? _a : []), 3), x = _d[0], y = _d[1], z = _d[2];
+                                var value = z === "-" || z === undefined
+                                    ? ""
+                                    : (0, axis_number_format_1.formatAxisValue)(contourFormats_1[y], z);
+                                return "".concat((_b = seriesNames_1[y]) !== null && _b !== void 0 ? _b : "", "<br/>").concat((_c = categories_2[x]) !== null && _c !== void 0 ? _c : "", ": ").concat(value);
+                            },
+                        },
+                        legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: false }), spec.legend),
+                        grid: { left: "3%", right: "12%", bottom: "3%", containLabel: true },
+                        xAxis: [
+                            (0, overrides_1.applyAxisOverrides)({
+                                type: "category",
+                                data: categories_2,
+                                splitArea: { show: true },
+                                name: (_38 = spec.horizontalAxisTitle) !== null && _38 !== void 0 ? _38 : "",
+                                nameLocation: "middle",
+                                nameGap: 30,
+                            }, spec.categoryAxisOptions),
+                        ],
+                        yAxis: [
+                            {
+                                type: "category",
+                                data: seriesNames_1,
+                                splitArea: { show: true },
+                                name: (_39 = spec.verticalAxisTitle) !== null && _39 !== void 0 ? _39 : "",
+                                nameLocation: "middle",
+                                nameGap: 50,
+                            },
+                        ],
+                        visualMap: [
+                            {
+                                type: "continuous",
+                                min: zMin,
+                                max: zMax,
+                                calculable: false,
+                                orient: "vertical",
+                                right: 0,
+                                top: "center",
+                                inRange: { color: tslib_1.__spreadArray([], tslib_1.__read(three_d_1.SURFACE_COLOR_RAMP), false) },
+                                formatter: function (value) {
+                                    return (0, axis_number_format_1.formatAxisValue)(contourFormats_1[0], value);
+                                },
+                            },
+                        ],
+                        series: [
+                            tslib_1.__assign({ type: "heatmap", id: (0, series_click_1.chartSeriesId)(0, 0), data: contourPoints }, (contourLabel
+                                ? {
+                                    label: tslib_1.__assign(tslib_1.__assign({}, contourLabel), { position: "inside", formatter: function (params) {
+                                            var _a;
+                                            var _b = tslib_1.__read(((_a = params === null || params === void 0 ? void 0 : params.value) !== null && _a !== void 0 ? _a : []), 3), y = _b[1], z = _b[2];
+                                            return z === "-" || z === undefined
+                                                ? ""
+                                                : (0, axis_number_format_1.formatAxisValue)(contourFormats_1[y], z);
+                                        } }),
+                                }
+                                : {})),
+                        ],
+                    }, {
+                        replaceMerge: [
+                            "series",
+                            "xAxis",
+                            "yAxis",
+                            "visualMap",
+                            "legend",
+                            "grid",
+                            "tooltip",
+                        ],
+                    });
+                    renderedAsContour.current = true;
+                    applyThemeOptions();
+                    previousChartType.current = spec.chartType;
+                    previousSeriesCount.current = 1;
+                    return [2 /*return*/];
+                case 19:
+                    if (!(willRender3D && threeDRenderKind)) return [3 /*break*/, 30];
+                    categories_3 = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                    threeDSeriesInputs = [];
+                    _129.label = 20;
+                case 20:
+                    _129.trys.push([20, 27, 28, 29]);
+                    _j = tslib_1.__values((_40 = spec.series) !== null && _40 !== void 0 ? _40 : []), _k = _j.next();
+                    _129.label = 21;
+                case 21:
+                    if (!!_k.done) return [3 /*break*/, 26];
+                    seriesEntry = _k.value;
+                    if (!(!(0, utils_1.isNil)(seriesEntry.dataLabel) && (0, utils_1.isAFormula)(seriesEntry.dataLabel))) return [3 /*break*/, 23];
+                    _m = chart_spec_utils_1.coerceCalculatedLabel;
+                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_41 = position.sheetId) !== null && _41 !== void 0 ? _41 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                case 22:
+                    _l = _m.apply(void 0, [_129.sent()]);
+                    return [3 /*break*/, 24];
+                case 23:
+                    _l = (_42 = seriesEntry.dataLabel) !== null && _42 !== void 0 ? _42 : "";
+                    _129.label = 24;
+                case 24:
+                    dataLabel = _l;
+                    values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(sanitizeChartValue);
+                    threeDSeriesInputs.push({ name: dataLabel, values: values });
+                    _129.label = 25;
+                case 25:
+                    _k = _j.next();
+                    return [3 /*break*/, 21];
+                case 26: return [3 /*break*/, 29];
+                case 27:
+                    e_2_1 = _129.sent();
+                    e_2 = { error: e_2_1 };
+                    return [3 /*break*/, 29];
+                case 28:
+                    try {
+                        if (_k && !_k.done && (_1 = _j.return)) _1.call(_j);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                    return [7 /*endfinally*/];
+                case 29:
+                    seriesNames_2 = threeDSeriesInputs.map(function (entry, index) { return entry.name || "Series ".concat(index + 1); });
+                    threeDPalette_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,
-                    ];
+                    ]);
                     seriesColorAt_1 = function (index) {
                         var _a, _b, _c;
                         return (_c = (_b = (_a = spec.series) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : threeDPalette_1[index % threeDPalette_1.length];
@@ -749,23 +964,77 @@ var BasicChart = function (_a) {
                     }
                     if (el.current && !chartRef.current) {
                         chartRef.current = echarts.init(el.current);
+                        bindSeriesSelection(chartRef.current);
                     }
-                    categoryAxisLabel = function (value) { var _a; return Number.isInteger(value) ? (_a = categories_2[value]) !== null && _a !== void 0 ? _a : "" : ""; };
-                    seriesAxisLabel = function (value) { var _a; return Number.isInteger(value) ? (_a = seriesNames_1[value]) !== null && _a !== void 0 ? _a : "" : ""; };
+                    categoryAxisLabel = function (value) { var _a; return Number.isInteger(value) ? (_a = categories_3[value]) !== null && _a !== void 0 ? _a : "" : ""; };
+                    seriesAxisLabel = function (value) { var _a; return Number.isInteger(value) ? (_a = seriesNames_2[value]) !== null && _a !== void 0 ? _a : "" : ""; };
+                    stackedBar3D_1 = threeDRenderKind === "bar3D" &&
+                        (spec.stackedType === "STACKED" ||
+                            spec.stackedType === "PERCENT_STACKED");
+                    threeDFormats_1 = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
                     threeDTooltipFormatter = function (params) {
-                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                         var value = ((_a = params === null || params === void 0 ? void 0 : params.value) !== null && _a !== void 0 ? _a : []);
-                        var categoryLabel = (_c = categories_2[Math.round((_b = value[0]) !== null && _b !== void 0 ? _b : 0)]) !== null && _c !== void 0 ? _c : String((_d = value[0]) !== null && _d !== void 0 ? _d : "");
-                        var seriesLabel = (_g = (_f = seriesNames_1[Math.round((_e = value[1]) !== null && _e !== void 0 ? _e : 0)]) !== null && _f !== void 0 ? _f : params === null || params === void 0 ? void 0 : params.seriesName) !== null && _g !== void 0 ? _g : "";
-                        return "".concat(seriesLabel ? "".concat(seriesLabel, "<br/>") : "").concat(categoryLabel, ": ").concat((_h = value[2]) !== null && _h !== void 0 ? _h : "");
+                        var categoryLabel = (_c = categories_3[Math.round((_b = value[0]) !== null && _b !== void 0 ? _b : 0)]) !== null && _c !== void 0 ? _c : String((_d = value[0]) !== null && _d !== void 0 ? _d : "");
+                        // Stacked bars and line3D are one echarts series per spec series;
+                        // a single bar3D / surface series carries the spec index on y.
+                        var seriesIndex = stackedBar3D_1 || threeDRenderKind === "line3D"
+                            ? params === null || params === void 0 ? void 0 : params.seriesIndex
+                            : Math.round((_e = value[1]) !== null && _e !== void 0 ? _e : 0);
+                        var seriesLabel = stackedBar3D_1
+                            ? (_f = params === null || params === void 0 ? void 0 : params.seriesName) !== null && _f !== void 0 ? _f : ""
+                            : (_j = (_h = seriesNames_2[Math.round((_g = value[1]) !== null && _g !== void 0 ? _g : 0)]) !== null && _h !== void 0 ? _h : params === null || params === void 0 ? void 0 : params.seriesName) !== null && _j !== void 0 ? _j : "";
+                        var valueLabel = spec.stackedType === "PERCENT_STACKED" && stackedBar3D_1
+                            ? "".concat(Math.round(((_k = value[2]) !== null && _k !== void 0 ? _k : 0) * 10) / 10, "%")
+                            : (0, axis_number_format_1.formatAxisValue)(threeDFormats_1[seriesIndex], value[2]);
+                        return "".concat(seriesLabel ? "".concat(seriesLabel, "<br/>") : "").concat(categoryLabel, ": ").concat(valueLabel);
                     };
                     threeDSeries = void 0;
                     visualMap = void 0;
                     xAxis3D = void 0;
                     yAxis3D = void 0;
-                    if (threeDRenderKind === "bar3D") {
-                        xAxis3D = { type: "category", data: categories_2 };
-                        yAxis3D = { type: "category", data: seriesNames_1 };
+                    if (stackedBar3D_1) {
+                        xAxis3D = { type: "category", data: categories_3 };
+                        yAxis3D = { type: "category", data: [""] };
+                        categoryCount = (0, three_d_1.getCategoryCount)(threeDSeriesInputs);
+                        categoryTotals_1 = new Array(categoryCount).fill(0);
+                        try {
+                            for (threeDSeriesInputs_1 = tslib_1.__values(threeDSeriesInputs), threeDSeriesInputs_1_1 = threeDSeriesInputs_1.next(); !threeDSeriesInputs_1_1.done; threeDSeriesInputs_1_1 = threeDSeriesInputs_1.next()) {
+                                entry = threeDSeriesInputs_1_1.value;
+                                entry.values.forEach(function (value, categoryIndex) {
+                                    if (typeof value === "number" && Number.isFinite(value)) {
+                                        categoryTotals_1[categoryIndex] += value;
+                                    }
+                                });
+                            }
+                        }
+                        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                        finally {
+                            try {
+                                if (threeDSeriesInputs_1_1 && !threeDSeriesInputs_1_1.done && (_2 = threeDSeriesInputs_1.return)) _2.call(threeDSeriesInputs_1);
+                            }
+                            finally { if (e_4) throw e_4.error; }
+                        }
+                        isPercent_1 = spec.stackedType === "PERCENT_STACKED";
+                        threeDSeries = threeDSeriesInputs.map(function (entry, index) { return ({
+                            type: "bar3D",
+                            name: seriesNames_2[index],
+                            stack: "total",
+                            shading: "lambert",
+                            itemStyle: { color: seriesColorAt_1(index) },
+                            data: entry.values.flatMap(function (value, categoryIndex) {
+                                if (typeof value !== "number" || !Number.isFinite(value)) {
+                                    return [];
+                                }
+                                var total = categoryTotals_1[categoryIndex];
+                                var z = isPercent_1 ? (total === 0 ? 0 : (value / total) * 100) : value;
+                                return [{ value: [categoryIndex, 0, z] }];
+                            }),
+                        }); });
+                    }
+                    else if (threeDRenderKind === "bar3D") {
+                        xAxis3D = { type: "category", data: categories_3 };
+                        yAxis3D = { type: "category", data: seriesNames_2 };
                         threeDSeries = [
                             {
                                 type: "bar3D",
@@ -785,35 +1054,35 @@ var BasicChart = function (_a) {
                             type: "value",
                             axisLabel: { formatter: categoryAxisLabel },
                             min: 0,
-                            max: Math.max(categories_2.length - 1, 1),
+                            max: Math.max(categories_3.length - 1, 1),
                         };
                         yAxis3D = {
                             type: "value",
                             axisLabel: { formatter: seriesAxisLabel },
                             min: 0,
-                            max: Math.max(seriesNames_1.length - 1, 1),
+                            max: Math.max(seriesNames_2.length - 1, 1),
                         };
                         threeDSeries = (0, three_d_1.buildLine3DSeries)(threeDSeriesInputs).map(function (entry, index) { return ({
                             type: "line3D",
-                            name: seriesNames_1[index],
+                            name: seriesNames_2[index],
                             data: entry.data,
                             lineStyle: { width: 3, color: seriesColorAt_1(index) },
                         }); });
                     }
                     else {
                         surfacePoints = (0, three_d_1.buildSurfaceData)(threeDSeriesInputs);
-                        _h = tslib_1.__read((0, three_d_1.getValueExtent)(surfacePoints), 2), zMin = _h[0], zMax = _h[1];
+                        _o = tslib_1.__read((0, three_d_1.getValueExtent)(surfacePoints), 2), zMin = _o[0], zMax = _o[1];
                         xAxis3D = {
                             type: "value",
                             axisLabel: { formatter: categoryAxisLabel },
                             min: 0,
-                            max: Math.max(categories_2.length - 1, 1),
+                            max: Math.max(categories_3.length - 1, 1),
                         };
                         yAxis3D = {
                             type: "value",
                             axisLabel: { formatter: seriesAxisLabel },
                             min: 0,
-                            max: Math.max(seriesNames_1.length - 1, 1),
+                            max: Math.max(seriesNames_2.length - 1, 1),
                         };
                         threeDSeries = [
                             {
@@ -832,13 +1101,13 @@ var BasicChart = function (_a) {
                             inRange: { color: tslib_1.__spreadArray([], tslib_1.__read(three_d_1.SURFACE_COLOR_RAMP), false) },
                         };
                     }
-                    (_31 = chartRef.current) === null || _31 === void 0 ? void 0 : _31.setOption(tslib_1.__assign(tslib_1.__assign({ tooltip: {
+                    (_43 = chartRef.current) === null || _43 === void 0 ? void 0 : _43.setOption(tslib_1.__assign(tslib_1.__assign({ tooltip: {
                             textStyle: { fontSize: 12 },
                             formatter: threeDTooltipFormatter,
-                        }, legend: threeDRenderKind === "line3D"
-                            ? (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: seriesNames_1.length > 1, data: seriesNames_1 }), spec.legend)
-                            : { show: false }, xAxis3D: tslib_1.__assign(tslib_1.__assign({}, xAxis3D), { name: (_32 = spec.horizontalAxisTitle) !== null && _32 !== void 0 ? _32 : "" }), yAxis3D: tslib_1.__assign(tslib_1.__assign({}, yAxis3D), { name: "" }), zAxis3D: { type: "value", name: (_33 = spec.verticalAxisTitle) !== null && _33 !== void 0 ? _33 : "" }, grid3D: {
-                            boxDepth: Math.max(20, Math.min(100, seriesNames_1.length * 20)),
+                        }, legend: threeDRenderKind === "line3D" || stackedBar3D_1
+                            ? (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: seriesNames_2.length > 1, data: seriesNames_2 }), spec.legend)
+                            : { show: false }, xAxis3D: tslib_1.__assign(tslib_1.__assign({}, xAxis3D), { name: (_44 = spec.horizontalAxisTitle) !== null && _44 !== void 0 ? _44 : "" }), yAxis3D: tslib_1.__assign(tslib_1.__assign({}, yAxis3D), { name: "" }), zAxis3D: { type: "value", name: (_45 = spec.verticalAxisTitle) !== null && _45 !== void 0 ? _45 : "" }, grid3D: {
+                            boxDepth: Math.max(20, Math.min(100, seriesNames_2.length * 20)),
                             viewControl: { autoRotate: false },
                         } }, (visualMap ? { visualMap: [visualMap] } : {})), { series: threeDSeries }), {
                         replaceMerge: [
@@ -858,7 +1127,7 @@ var BasicChart = function (_a) {
                     previousChartType.current = spec.chartType;
                     previousSeriesCount.current = threeDSeries.length;
                     return [2 /*return*/];
-                case 19:
+                case 30:
                     // ---------------------------- Radar ----------------------------
                     // Radar is polar: a top-level `radar.indicator` list (one axis per
                     // category) plus one `radar`-type series carrying every data series'
@@ -868,8 +1137,8 @@ var BasicChart = function (_a) {
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders);
                         radarSeriesInputs = [];
                         try {
-                            for (_j = tslib_1.__values((_34 = spec.series) !== null && _34 !== void 0 ? _34 : []), _k = _j.next(); !_k.done; _k = _j.next()) {
-                                seriesEntry = _k.value;
+                            for (_p = tslib_1.__values((_46 = spec.series) !== null && _46 !== void 0 ? _46 : []), _q = _p.next(); !_q.done; _q = _p.next()) {
+                                seriesEntry = _q.value;
                                 label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                                     ? seriesEntry.dataLabel
                                     : "";
@@ -877,33 +1146,53 @@ var BasicChart = function (_a) {
                                 radarSeriesInputs.push({ name: label, values: values });
                             }
                         }
-                        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
                         finally {
                             try {
-                                if (_k && !_k.done && (_z = _j.return)) _z.call(_j);
+                                if (_q && !_q.done && (_3 = _p.return)) _3.call(_p);
                             }
-                            finally { if (e_3) throw e_3.error; }
+                            finally { if (e_5) throw e_5.error; }
                         }
-                        indicators = (0, radar_1.buildRadarIndicators)(categories, radarSeriesInputs);
-                        radarData = (0, radar_1.buildRadarSeriesData)(radarSeriesInputs, indicators.length);
-                        radarStyle_1 = (_35 = spec.radarStyle) !== null && _35 !== void 0 ? _35 : "standard";
+                        indicators_1 = (0, radar_1.buildRadarIndicators)(categories, radarSeriesInputs);
+                        radarData = (0, radar_1.buildRadarSeriesData)(radarSeriesInputs, indicators_1.length);
+                        radarStyle_1 = (_47 = spec.radarStyle) !== null && _47 !== void 0 ? _47 : "standard";
                         radarColors_1 = radarSeriesInputs.map(function (_, i) { var _a, _b; return (_b = (_a = spec.series) === null || _a === void 0 ? void 0 : _a[i]) === null || _b === void 0 ? void 0 : _b.color; });
-                        radarSeriesLabel = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
-                        (_36 = chartRef.current) === null || _36 === void 0 ? void 0 : _36.setOption({
+                        radarFormats_1 = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+                        radarDataLabels_1 = spec.dataLabels;
+                        radarSeriesLabelFor_1 = function (seriesIndex) {
+                            return (0, overrides_1.buildSeriesLabelOption)(radarDataLabels_1 && !radarDataLabels_1.numberFormatPattern
+                                ? tslib_1.__assign(tslib_1.__assign({}, radarDataLabels_1), { numberFormatPattern: radarFormats_1[seriesIndex] }) : radarDataLabels_1);
+                        };
+                        radarTooltipFormatter = function (params) {
+                            var _a, _b;
+                            var values = Array.isArray(params === null || params === void 0 ? void 0 : params.value) ? params.value : [];
+                            var pattern = radarFormats_1[(_a = params === null || params === void 0 ? void 0 : params.dataIndex) !== null && _a !== void 0 ? _a : 0];
+                            var lines = indicators_1.map(function (indicator, i) {
+                                return "".concat(indicator.name, ": ").concat((0, axis_number_format_1.formatAxisValue)(pattern, values[i]));
+                            });
+                            return tslib_1.__spreadArray([(_b = params === null || params === void 0 ? void 0 : params.name) !== null && _b !== void 0 ? _b : ""], tslib_1.__read(lines), false).filter(Boolean).join("<br/>");
+                        };
+                        (_48 = chartRef.current) === null || _48 === void 0 ? void 0 : _48.setOption({
                             radar: {
-                                indicator: indicators.length
-                                    ? indicators
+                                indicator: indicators_1.length
+                                    ? indicators_1
                                     : [{ name: "", max: 1 }],
                             },
                             legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, legend), { show: radarData.length > 1, data: radarData.map(function (d) { return d.name; }) }), spec.legend),
-                            tooltip: { trigger: "item" },
+                            tooltip: { trigger: "item", formatter: radarTooltipFormatter },
                             series: [
-                                tslib_1.__assign(tslib_1.__assign({ type: "radar", symbol: radarStyle_1 === "standard" ? "none" : "circle" }, (radarSeriesLabel ? { label: radarSeriesLabel } : {})), { data: radarData.map(function (d, i) { return (tslib_1.__assign(tslib_1.__assign({ value: d.value, name: d.name }, (radarStyle_1 === "filled" ? { areaStyle: {} } : {})), (radarColors_1[i]
+                                {
+                                    type: "radar",
+                                    symbol: radarStyle_1 === "standard" ? "none" : "circle",
+                                    data: radarData.map(function (d, i) { return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ value: d.value, name: d.name }, (radarSeriesLabelFor_1(i)
+                                        ? { label: radarSeriesLabelFor_1(i) }
+                                        : {})), (radarStyle_1 === "filled" ? { areaStyle: {} } : {})), (radarColors_1[i]
                                         ? {
                                             itemStyle: { color: radarColors_1[i] },
                                             lineStyle: { color: radarColors_1[i] },
                                         }
-                                        : {}))); }) }),
+                                        : {}))); }),
+                                },
                             ],
                         }, {
                             replaceMerge: [
@@ -926,16 +1215,27 @@ var BasicChart = function (_a) {
                     // V-variants additionally get a volume column sub-pane below the
                     // price plot.
                     if (spec.chartType === "stock") {
-                        variant = ((_37 = spec.stockVariant) !== null && _37 !== void 0 ? _37 : "HLC");
+                        variant_1 = ((_49 = spec.stockVariant) !== null && _49 !== void 0 ? _49 : "HLC");
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesValues = ((_38 = spec.series) !== null && _38 !== void 0 ? _38 : []).map(function (seriesEntry) {
+                        seriesValues = ((_50 = spec.series) !== null && _50 !== void 0 ? _50 : []).map(function (seriesEntry) {
                             return flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
                         });
-                        stockSeriesLabel_1 = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                        stockFormats_1 = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+                        stockRoleIndex_1 = function (role) {
+                            return stock_1.STOCK_ROLES[variant_1].indexOf(role);
+                        };
+                        stockFormatFor_1 = function (role) {
+                            return stockFormats_1[stockRoleIndex_1(role)];
+                        };
+                        stockDataLabels_1 = spec.dataLabels;
+                        stockSeriesLabelFor_1 = function (role) {
+                            return (0, overrides_1.buildSeriesLabelOption)(stockDataLabels_1 && !stockDataLabels_1.numberFormatPattern
+                                ? tslib_1.__assign(tslib_1.__assign({}, stockDataLabels_1), { numberFormatPattern: stockFormatFor_1(role) }) : stockDataLabels_1);
+                        };
                         upColor_1 = theme.themeColors.accent1;
                         downColor_1 = theme.themeColors.accent2;
-                        volumePoints = (0, stock_1.toVolumeSeries)(seriesValues, variant);
-                        hasVolume = ((_39 = volumePoints === null || volumePoints === void 0 ? void 0 : volumePoints.length) !== null && _39 !== void 0 ? _39 : 0) > 0;
+                        volumePoints = (0, stock_1.toVolumeSeries)(seriesValues, variant_1);
+                        hasVolume = ((_51 = volumePoints === null || volumePoints === void 0 ? void 0 : volumePoints.length) !== null && _51 !== void 0 ? _51 : 0) > 0;
                         stockGrid = hasVolume
                             ? [
                                 { left: "10%", right: "4%", top: "8%", height: "56%" },
@@ -949,7 +1249,7 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_40 = spec.horizontalAxisTitle) !== null && _40 !== void 0 ? _40 : "",
+                            name: (_52 = spec.horizontalAxisTitle) !== null && _52 !== void 0 ? _52 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         }, spec.categoryAxisOptions);
@@ -971,16 +1271,16 @@ var BasicChart = function (_a) {
                         };
                         volumeSeries = hasVolume
                             ? [
-                                {
-                                    type: "bar",
-                                    name: "Volume",
-                                    xAxisIndex: 1,
-                                    yAxisIndex: 1,
-                                    data: (volumePoints !== null && volumePoints !== void 0 ? volumePoints : []).map(function (p) { return ({
+                                tslib_1.__assign({ type: "bar", name: "Volume", xAxisIndex: 1, yAxisIndex: 1, data: (volumePoints !== null && volumePoints !== void 0 ? volumePoints : []).map(function (p) { return ({
                                         value: p.value,
                                         itemStyle: { color: p.up ? upColor_1 : downColor_1 },
-                                    }); }),
-                                },
+                                    }); }) }, ((0, axis_number_format_1.tooltipValueFormatter)(stockFormatFor_1("volume"))
+                                    ? {
+                                        tooltip: {
+                                            valueFormatter: (0, axis_number_format_1.tooltipValueFormatter)(stockFormatFor_1("volume")),
+                                        },
+                                    }
+                                    : {})),
                             ]
                             : [];
                         stockAxisPointer = {
@@ -989,16 +1289,16 @@ var BasicChart = function (_a) {
                         // OHLC / VOHLC variants carry an `open`, so they render as a
                         // candlestick (Excel's open-high-low-close stock chart). HLC / VHLC
                         // (no open) fall through to the line-derived rendering below.
-                        if (variant === "OHLC" || variant === "VOHLC") {
-                            candleData = (0, stock_1.toCandlestick)(seriesValues, variant);
-                            (_41 = chartRef.current) === null || _41 === void 0 ? void 0 : _41.setOption({
+                        if (variant_1 === "OHLC" || variant_1 === "VOHLC") {
+                            candleData = (0, stock_1.toCandlestick)(seriesValues, variant_1);
+                            (_53 = chartRef.current) === null || _53 === void 0 ? void 0 : _53.setOption({
                                 xAxis: stockXAxis,
                                 yAxis: tslib_1.__spreadArray([
                                     (0, overrides_1.applyAxisOverrides)({
                                         type: "value",
                                         show: true,
                                         scale: true,
-                                        name: (_42 = spec.verticalAxisTitle) !== null && _42 !== void 0 ? _42 : "",
+                                        name: (_54 = spec.verticalAxisTitle) !== null && _54 !== void 0 ? _54 : "",
                                         nameLocation: "middle",
                                         nameGap: 50,
                                         gridIndex: 0,
@@ -1009,17 +1309,18 @@ var BasicChart = function (_a) {
                                 tooltip: { trigger: "axis" },
                                 axisPointer: stockAxisPointer,
                                 series: tslib_1.__spreadArray([
-                                    {
-                                        type: "candlestick",
-                                        name: spec.title || "Stock",
-                                        data: candleData,
-                                        itemStyle: {
+                                    tslib_1.__assign({ type: "candlestick", name: spec.title || "Stock", data: candleData, itemStyle: {
                                             color: upColor_1,
                                             color0: downColor_1,
                                             borderColor: upColor_1,
                                             borderColor0: downColor_1,
-                                        },
-                                    }
+                                        } }, ((0, axis_number_format_1.tooltipValueFormatter)(stockFormatFor_1("close"))
+                                        ? {
+                                            tooltip: {
+                                                valueFormatter: (0, axis_number_format_1.tooltipValueFormatter)(stockFormatFor_1("close")),
+                                            },
+                                        }
+                                        : {}))
                                 ], tslib_1.__read(volumeSeries), false),
                             }, {
                                 replaceMerge: [
@@ -1035,20 +1336,20 @@ var BasicChart = function (_a) {
                             previousSeriesCount.current = 1 + volumeSeries.length;
                             return [2 /*return*/];
                         }
-                        lineSeries = (0, stock_1.toLineSeries)(seriesValues, variant);
-                        stockColors_1 = [
+                        lineSeries = (0, stock_1.toLineSeries)(seriesValues, variant_1);
+                        stockColors_1 = (0, chart_styles_1.getChartPalette)(spec, [
                             theme.themeColors.accent1,
                             theme.themeColors.accent2,
                             theme.themeColors.accent3,
                             theme.themeColors.accent4,
-                        ];
-                        (_43 = chartRef.current) === null || _43 === void 0 ? void 0 : _43.setOption({
+                        ]);
+                        (_55 = chartRef.current) === null || _55 === void 0 ? void 0 : _55.setOption({
                             xAxis: stockXAxis,
                             yAxis: tslib_1.__spreadArray([
                                 (0, overrides_1.applyAxisOverrides)({
                                     type: "value",
                                     show: true,
-                                    name: (_44 = spec.verticalAxisTitle) !== null && _44 !== void 0 ? _44 : "",
+                                    name: (_56 = spec.verticalAxisTitle) !== null && _56 !== void 0 ? _56 : "",
                                     nameLocation: "middle",
                                     nameGap: 50,
                                     gridIndex: 0,
@@ -1058,7 +1359,15 @@ var BasicChart = function (_a) {
                             grid: stockGrid,
                             tooltip: { trigger: "axis" },
                             axisPointer: stockAxisPointer,
-                            series: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(lineSeries.map(function (s, i) { return (tslib_1.__assign({ type: "line", name: s.name, data: s.values, showSymbol: false, itemStyle: { color: stockColors_1[i % stockColors_1.length] }, lineStyle: { color: stockColors_1[i % stockColors_1.length] } }, (stockSeriesLabel_1 ? { label: stockSeriesLabel_1 } : {}))); })), false), tslib_1.__read(volumeSeries), false),
+                            series: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(lineSeries.map(function (s, i) { return (tslib_1.__assign(tslib_1.__assign({ type: "line", name: s.name, data: s.values, showSymbol: false, itemStyle: { color: stockColors_1[i % stockColors_1.length] }, lineStyle: { color: stockColors_1[i % stockColors_1.length] } }, (stockSeriesLabelFor_1(s.role)
+                                ? { label: stockSeriesLabelFor_1(s.role) }
+                                : {})), ((0, axis_number_format_1.tooltipValueFormatter)(stockFormatFor_1(s.role))
+                                ? {
+                                    tooltip: {
+                                        valueFormatter: (0, axis_number_format_1.tooltipValueFormatter)(stockFormatFor_1(s.role)),
+                                    },
+                                }
+                                : {}))); })), false), tslib_1.__read(volumeSeries), false),
                         }, {
                             replaceMerge: [
                                 "series",
@@ -1079,38 +1388,57 @@ var BasicChart = function (_a) {
                     ofPieLayout = null;
                     isHorizontalBarChart = spec.chartType === "bar";
                     shouldAggregate = (0, aggregation_1.shouldAggregateSeries)(spec.series);
-                    primaryDomainSource = (_47 = (_46 = (_45 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _45 === void 0 ? void 0 : _45[0]) === null || _46 === void 0 ? void 0 : _46.sources) === null || _47 === void 0 ? void 0 : _47[0];
+                    primaryDomainSource = (_59 = (_58 = (_57 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _57 === void 0 ? void 0 : _57[0]) === null || _58 === void 0 ? void 0 : _58.sources) === null || _59 === void 0 ? void 0 : _59[0];
                     rawPrimaryDomainValues = primaryDomainSource
-                        ? (0, aggregation_1.sanitizeDomainValues)((_48 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _48 !== void 0 ? _48 : [])
+                        ? (0, aggregation_1.sanitizeDomainValues)((_60 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _60 !== void 0 ? _60 : [])
                         : [];
                     aggregateDomainValues = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
-                    (_49 = spec.domains) === null || _49 === void 0 ? void 0 : _49.forEach(function (domain, domainIndex) {
-                        domain.sources.forEach(function (sheetRange, sourceIndex) {
-                            var _a, _b, _c;
-                            var axisData = [];
+                    categoryLevels = isCircularChart
+                        ? undefined
+                        : (0, category_levels_1.resolveCategoryLevels)((_61 = spec.categoryLevels) === null || _61 === void 0 ? void 0 : _61.map(function (level) {
+                            return flattenChartDataValues([level], getDomainValuesFromRange, spec.hiddenDimensionStrategy, false);
+                        }));
+                    if (categoryLevels) {
+                        chartDomains.push.apply(chartDomains, tslib_1.__spreadArray([], tslib_1.__read((0, category_levels_1.echartsGroupedCategoryAxes)(categoryLevels, {
+                            type: "category",
+                            show: showAxis,
+                            axisLine: { show: true },
+                            axisTick: { show: true },
+                            splitLine: { show: true },
+                            name: isHorizontalBarChart
+                                ? (_62 = spec.verticalAxisTitle) !== null && _62 !== void 0 ? _62 : ""
+                                : (_63 = spec.horizontalAxisTitle) !== null && _63 !== void 0 ? _63 : "",
+                            nameLocation: "middle",
+                            nameGap: 30 + 24 * categoryLevels.outer.length,
+                        })), false));
+                    }
+                    // One category axis per domain (Excel): a domain drawn from several
+                    // ranges lists their categories in sequence on that single axis.
+                    (categoryLevels ? [] : (_64 = spec.domains) !== null && _64 !== void 0 ? _64 : []).forEach(function (domain, domainIndex) {
+                        var _a, _b;
+                        var axisData = domain.sources.flatMap(function (sheetRange, sourceIndex) {
+                            var _a;
                             if (domainIndex === 0 && sourceIndex === 0) {
-                                axisData = aggregateDomainValues;
-                            }
-                            else {
-                                var rawValues = (0, aggregation_1.sanitizeDomainValues)((_a = getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy)) !== null && _a !== void 0 ? _a : []);
-                                axisData = (0, aggregation_1.getDomainValuesForAxis)(rawValues, shouldAggregate);
+                                return aggregateDomainValues;
                             }
-                            var axisTitle = domainIndex === 0 && sourceIndex === 0 && !isCircularChart
-                                ? isHorizontalBarChart
-                                    ? (_b = spec.verticalAxisTitle) !== null && _b !== void 0 ? _b : ""
-                                    : (_c = spec.horizontalAxisTitle) !== null && _c !== void 0 ? _c : ""
-                                : undefined;
-                            chartDomains.push({
-                                type: "category",
-                                data: axisData,
-                                show: showAxis && !isCircularChart,
-                                axisLine: { show: !isCircularChart },
-                                axisTick: { show: !isCircularChart },
-                                splitLine: { show: !isCircularChart },
-                                name: axisTitle,
-                                nameLocation: "middle",
-                                nameGap: 30,
-                            });
+                            var rawValues = (0, aggregation_1.sanitizeDomainValues)((_a = getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy)) !== null && _a !== void 0 ? _a : []);
+                            return (0, aggregation_1.getDomainValuesForAxis)(rawValues, shouldAggregate);
+                        });
+                        var axisTitle = domainIndex === 0 && !isCircularChart
+                            ? isHorizontalBarChart
+                                ? (_a = spec.verticalAxisTitle) !== null && _a !== void 0 ? _a : ""
+                                : (_b = spec.horizontalAxisTitle) !== null && _b !== void 0 ? _b : ""
+                            : undefined;
+                        chartDomains.push({
+                            type: "category",
+                            data: axisData,
+                            show: showAxis && !isCircularChart,
+                            axisLine: { show: !isCircularChart },
+                            axisTick: { show: !isCircularChart },
+                            splitLine: { show: !isCircularChart },
+                            name: axisTitle,
+                            nameLocation: "middle",
+                            nameGap: 30,
                         });
                     });
                     if (chartDomains.length === 0 && !isCircularChart) {
@@ -1122,14 +1450,14 @@ var BasicChart = function (_a) {
                             splitLine: { show: true },
                             gridIndex: 0,
                             name: isHorizontalBarChart
-                                ? (_50 = spec.verticalAxisTitle) !== null && _50 !== void 0 ? _50 : ""
-                                : (_51 = spec.horizontalAxisTitle) !== null && _51 !== void 0 ? _51 : "",
+                                ? (_65 = spec.verticalAxisTitle) !== null && _65 !== void 0 ? _65 : ""
+                                : (_66 = spec.horizontalAxisTitle) !== null && _66 !== void 0 ? _66 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         });
                     }
                     pushSeriesOverlays = function (series, data, dataLabel) {
-                        var e_9, _a;
+                        var e_10, _a;
                         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                         var numericValues = Array.isArray(data)
                             ? data.map(function (v) {
@@ -1168,12 +1496,12 @@ var BasicChart = function (_a) {
                                     }, itemStyle: { color: (_g = tl.color) !== null && _g !== void 0 ? _g : seriesColor }, tooltip: { show: false }, z: 5 }, useSecondary));
                             }
                         }
-                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                        catch (e_10_1) { e_10 = { error: e_10_1 }; }
                         finally {
                             try {
                                 if (_o && !_o.done && (_a = _m.return)) _a.call(_m);
                             }
-                            finally { if (e_9) throw e_9.error; }
+                            finally { if (e_10) throw e_10.error; }
                         }
                         // Error bars — drawn as a custom series of vertical/horizontal
                         // whiskers. valueType "custom" reads per-point magnitudes from the
@@ -1270,11 +1598,11 @@ var BasicChart = function (_a) {
                     };
                     sideBySideBarCount = isStacked
                         ? 1
-                        : ((_52 = spec.series) !== null && _52 !== void 0 ? _52 : []).reduce(function (count, s) {
-                            var _a, _b, _c;
+                        : ((_67 = spec.series) !== null && _67 !== void 0 ? _67 : []).reduce(function (count, s) {
+                            var _a;
                             var seriesType = (_a = s.seriesChartType) !== null && _a !== void 0 ? _a : spec.chartType;
                             return seriesType === "bar" || seriesType === "column"
-                                ? count + Math.max(1, (_c = (_b = s.sources) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0)
+                                ? count + 1
                                 : count;
                         }, 0);
                     specBarGap = (0, bar_layout_1.overlapToBarGap)(spec.overlap);
@@ -1282,174 +1610,230 @@ var BasicChart = function (_a) {
                         seriesCount: sideBySideBarCount,
                         overlap: isStacked ? 0 : spec.overlap,
                     });
-                    _104.label = 20;
-                case 20:
-                    _104.trys.push([20, 27, 28, 29]);
-                    _l = tslib_1.__values((_53 = spec.series) !== null && _53 !== void 0 ? _53 : []), _m = _l.next();
-                    _104.label = 21;
-                case 21:
-                    if (!!_m.done) return [3 /*break*/, 26];
-                    series = _m.value;
-                    if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 23];
-                    _p = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_54 = position.sheetId) !== null && _54 !== void 0 ? _54 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
-                case 22:
-                    _o = _p.apply(void 0, [_104.sent()]);
-                    return [3 /*break*/, 24];
-                case 23:
-                    _o = (_55 = series.dataLabel) !== null && _55 !== void 0 ? _55 : "";
-                    _104.label = 24;
-                case 24:
-                    dataLabel = _o;
-                    // Label
-                    if (dataLabel) {
-                        (_56 = legend.data) === null || _56 === void 0 ? void 0 : _56.push(dataLabel);
-                    }
-                    _loop_1 = function (sheetRange) {
-                        var e_10, _105;
-                        var data = getSeriesData(spec, sheetRange, {
-                            aggregateEnabled: shouldAggregate,
-                            aggregateType: series.aggregateType,
-                            rawDomainValues: rawPrimaryDomainValues,
-                            orderedDomainValues: aggregateDomainValues,
-                        });
-                        // Support per-series chart type for combo charts
-                        var effectiveChartType = (_57 = series.seriesChartType) !== null && _57 !== void 0 ? _57 : spec.chartType;
-                        var seriesEchartsType = (0, helpers_1.chartTypeToEchartsType)(effectiveChartType);
-                        var seriesStyleAttrs = (0, helpers_1.getEchartsSeriesStyle)(effectiveChartType);
-                        var seriesEntry = tslib_1.__assign({ type: seriesEchartsType, name: dataLabel, data: data, stack: isStacked ? "dataLabel" : undefined, smooth: (_58 = spec.smooth) !== null && _58 !== void 0 ? _58 : undefined, radius: (_59 = spec.radius) !== null && _59 !== void 0 ? _59 : (isCircularChart ? [0, "75%"] : undefined) }, seriesStyleAttrs);
-                        // Plot this series against a secondary value axis. The 2nd
-                        // yAxis element is appended below (when any series opts in);
-                        // here we point the series at index 1.
-                        if (series.useSecondaryAxis) {
-                            seriesEntry.yAxisIndex = 1;
-                        }
-                        // Handle invertIfNegative for bar/column charts
-                        var isBarOrColumn = effectiveChartType === "bar" || effectiveChartType === "column";
-                        // Bar layout (overlap/gapWidth) — echarts reads barGap /
-                        // barCategoryGap from bar series (the last bar series wins for
-                        // the whole coordinate system), so apply them to every
-                        // bar/column series. Set before the gradient/noFill branches so
-                        // every push path carries them.
-                        if (isBarOrColumn) {
-                            if (specBarGap !== undefined) {
-                                seriesEntry.barGap = specBarGap;
-                            }
-                            if (specBarCategoryGap !== undefined) {
-                                seriesEntry.barCategoryGap = specBarCategoryGap;
-                            }
-                        }
-                        var seriesAny = series;
-                        // Gradient fill — overrides solid color when present. echarts
-                        // paints it natively via a LinearGradient on itemStyle.color
-                        // (and areaStyle for area series / lineStyle for lines).
-                        var gradientArgs = (0, gradient_1.gradientToEcharts)(series.gradient);
-                        if (gradientArgs && !seriesAny.noFill) {
-                            var gradient = new echarts.graphic.LinearGradient(gradientArgs.x, gradientArgs.y, gradientArgs.x2, gradientArgs.y2, gradientArgs.colorStops);
-                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_60 = seriesEntry.itemStyle) !== null && _60 !== void 0 ? _60 : {})), { color: gradient });
-                            if (effectiveChartType === "area") {
-                                seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_61 = seriesEntry.areaStyle) !== null && _61 !== void 0 ? _61 : {})), { color: gradient });
-                            }
-                            chartSeries.push(seriesEntry);
-                            pushSeriesOverlays(series, data, dataLabel);
-                            return "continue";
-                        }
-                        if (seriesAny.noFill) {
-                            // Transparent series (Gantt lag offset, etc.) — fill it
-                            // with `transparent` so layout is preserved but nothing
-                            // paints. Legend entries are also suppressed via `name: ""`
-                            // since the series carries no semantic information.
-                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_62 = seriesEntry.itemStyle) !== null && _62 !== void 0 ? _62 : {})), { color: "transparent", borderColor: "transparent" });
-                        }
-                        else if (isBarOrColumn &&
-                            Array.isArray(seriesAny.dataPointColors) &&
-                            seriesAny.dataPointColors.length) {
-                            // Per-data-point color overrides — Gantt-style charts colour
-                            // each task differently via `<c:dPt>`. Echarts accepts an
-                            // `itemStyle.color` function that receives the data index;
-                            // we look up the override or fall back to the series color.
-                            var overrides_2 = new Map();
-                            try {
-                                for (var _106 = (e_10 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _107 = _106.next(); !_107.done; _107 = _106.next()) {
-                                    var dp = _107.value;
-                                    if (typeof dp.idx === "number" && typeof dp.color === "string") {
-                                        overrides_2.set(dp.idx, dp.color);
+                    _loop_1 = function (specSeriesIndex, series) {
+                        var dataLabel, _130, _131, effectiveChartType, lineLike, domainSources, pieDomainLabels, piePointOffset, data, seriesEchartsType, seriesStyleAttrs, seriesEntry, isBarOrColumn, seriesAny, markerSymbol, wantsMarkers, gradientArgs, gradient, overrides_2, _132, _133, dp, fallback_1, overrides_3, _134, _135, dp, slicePalette_1, positiveColor_1, negativeColor_1;
+                        var e_11, _136, e_12, _137;
+                        return tslib_1.__generator(this, function (_138) {
+                            switch (_138.label) {
+                                case 0:
+                                    if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 2];
+                                    _131 = chart_spec_utils_1.coerceCalculatedLabel;
+                                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_69 = position.sheetId) !== null && _69 !== void 0 ? _69 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                                case 1:
+                                    _130 = _131.apply(void 0, [_138.sent()]);
+                                    return [3 /*break*/, 3];
+                                case 2:
+                                    _130 = (_70 = series.dataLabel) !== null && _70 !== void 0 ? _70 : "";
+                                    _138.label = 3;
+                                case 3:
+                                    dataLabel = _130;
+                                    // Label
+                                    if (dataLabel) {
+                                        (_71 = legend.data) === null || _71 === void 0 ? void 0 : _71.push(dataLabel);
                                     }
-                                }
-                            }
-                            catch (e_10_1) { e_10 = { error: e_10_1 }; }
-                            finally {
-                                try {
-                                    if (_107 && !_107.done && (_105 = _106.return)) _105.call(_106);
-                                }
-                                finally { if (e_10) throw e_10.error; }
-                            }
-                            var fallback_1 = (_63 = series.color) !== null && _63 !== void 0 ? _63 : theme.themeColors.accent1;
-                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_64 = seriesEntry.itemStyle) !== null && _64 !== void 0 ? _64 : {})), { color: function (params) { var _a; return (_a = overrides_2.get(params.dataIndex)) !== null && _a !== void 0 ? _a : fallback_1; } });
-                        }
-                        else if (isBarOrColumn && series.invertIfNegative) {
-                            var positiveColor_1 = (_65 = series.color) !== null && _65 !== void 0 ? _65 : theme.themeColors.accent1;
-                            var negativeColor_1 = (_66 = series.negativeColor) !== null && _66 !== void 0 ? _66 : "#FF0000";
-                            // Use a color function that returns different colors based on value
-                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_67 = seriesEntry.itemStyle) !== null && _67 !== void 0 ? _67 : {})), { color: function (params) {
-                                    var _a, _b;
-                                    var value = Array.isArray(params.data)
-                                        ? params.data[1]
-                                        : (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : params.data;
-                                    return typeof value === "number" && value < 0
-                                        ? negativeColor_1
-                                        : positiveColor_1;
-                                } });
-                        }
-                        else if (series.color) {
-                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_68 = seriesEntry.itemStyle) !== null && _68 !== void 0 ? _68 : {})), { color: series.color });
-                            seriesEntry.lineStyle = tslib_1.__assign(tslib_1.__assign({}, ((_69 = seriesEntry.lineStyle) !== null && _69 !== void 0 ? _69 : {})), { color: series.color });
-                            if (effectiveChartType === "area") {
-                                seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_70 = seriesEntry.areaStyle) !== null && _70 !== void 0 ? _70 : {})), { color: series.color });
+                                    effectiveChartType = (_72 = series.seriesChartType) !== null && _72 !== void 0 ? _72 : spec.chartType;
+                                    lineLike = (0, empty_cells_1.isLineLikeChartType)(effectiveChartType);
+                                    domainSources = (_75 = (_74 = (_73 = spec.domains) === null || _73 === void 0 ? void 0 : _73[0]) === null || _74 === void 0 ? void 0 : _74.sources) !== null && _75 !== void 0 ? _75 : [];
+                                    pieDomainLabels = spec.chartType === "pie" &&
+                                        (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;
+                                    data = series.sources.flatMap(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 (pieDomainLabels)
+                                            piePointOffset += part.length;
+                                        return part;
+                                    });
+                                    seriesEchartsType = (0, helpers_1.chartTypeToEchartsType)(effectiveChartType);
+                                    seriesStyleAttrs = (0, helpers_1.getEchartsSeriesStyle)(effectiveChartType);
+                                    seriesEntry = tslib_1.__assign(tslib_1.__assign({ type: seriesEchartsType, 
+                                        // Ties the rendered series back to spec.series for click selection
+                                        // One rendered series per spec series (source index 0).
+                                        id: (0, series_click_1.chartSeriesId)(specSeriesIndex, 0), name: dataLabel, data: data, stack: isStacked ? "dataLabel" : undefined, smooth: (_76 = spec.smooth) !== null && _76 !== void 0 ? _76 : undefined, radius: (_77 = spec.radius) !== null && _77 !== void 0 ? _77 : (isCircularChart ? [0, "75%"] : undefined) }, ((0, empty_cells_1.connectsAcrossEmptyCells)(spec, lineLike)
+                                        ? { connectNulls: true }
+                                        : {})), seriesStyleAttrs);
+                                    // Plot this series against a secondary value axis. The 2nd
+                                    // yAxis element is appended below (when any series opts in);
+                                    // here we point the series at index 1.
+                                    if (series.useSecondaryAxis) {
+                                        seriesEntry.yAxisIndex = 1;
+                                    }
+                                    isBarOrColumn = effectiveChartType === "bar" || effectiveChartType === "column";
+                                    // Bar layout (overlap/gapWidth) — echarts reads barGap /
+                                    // barCategoryGap from bar series (the last bar series wins for
+                                    // the whole coordinate system), so apply them to every
+                                    // bar/column series. Set before the gradient/noFill branches so
+                                    // every push path carries them.
+                                    if (isBarOrColumn) {
+                                        if (specBarGap !== undefined) {
+                                            seriesEntry.barGap = specBarGap;
+                                        }
+                                        if (specBarCategoryGap !== undefined) {
+                                            seriesEntry.barCategoryGap = specBarCategoryGap;
+                                        }
+                                    }
+                                    seriesAny = series;
+                                    if (effectiveChartType === "line") {
+                                        markerSymbol = (_78 = seriesAny.marker) === null || _78 === void 0 ? void 0 : _78.symbol;
+                                        wantsMarkers = markerSymbol === "none"
+                                            ? false
+                                            : Boolean(spec.showMarkers) || !(0, utils_1.isNil)(markerSymbol);
+                                        seriesEntry.showSymbol = wantsMarkers;
+                                        if (wantsMarkers) {
+                                            seriesEntry.symbol =
+                                                (_79 = (0, helpers_1.mapMarkerSymbolToEcharts)(markerSymbol)) !== null && _79 !== void 0 ? _79 : "circle";
+                                            seriesEntry.symbolSize = (_81 = (_80 = seriesAny.marker) === null || _80 === void 0 ? void 0 : _80.size) !== null && _81 !== void 0 ? _81 : 6;
+                                        }
+                                    }
+                                    gradientArgs = (0, gradient_1.gradientToEcharts)(series.gradient);
+                                    if (gradientArgs && !seriesAny.noFill) {
+                                        gradient = new echarts.graphic.LinearGradient(gradientArgs.x, gradientArgs.y, gradientArgs.x2, gradientArgs.y2, gradientArgs.colorStops);
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_82 = seriesEntry.itemStyle) !== null && _82 !== void 0 ? _82 : {})), { color: gradient });
+                                        if (effectiveChartType === "area") {
+                                            seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_83 = seriesEntry.areaStyle) !== null && _83 !== void 0 ? _83 : {})), { color: gradient });
+                                        }
+                                    }
+                                    else if (seriesAny.noFill) {
+                                        // Transparent series (Gantt lag offset, etc.) — fill it
+                                        // with `transparent` so layout is preserved but nothing
+                                        // paints. Legend entries are also suppressed via `name: ""`
+                                        // since the series carries no semantic information.
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_84 = seriesEntry.itemStyle) !== null && _84 !== void 0 ? _84 : {})), { color: "transparent", borderColor: "transparent" });
+                                    }
+                                    else if (isBarOrColumn &&
+                                        Array.isArray(seriesAny.dataPointColors) &&
+                                        seriesAny.dataPointColors.length) {
+                                        overrides_2 = new Map();
+                                        try {
+                                            for (_132 = (e_11 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _133 = _132.next(); !_133.done; _133 = _132.next()) {
+                                                dp = _133.value;
+                                                if (typeof dp.idx === "number" && typeof dp.color === "string") {
+                                                    overrides_2.set(dp.idx, dp.color);
+                                                }
+                                            }
+                                        }
+                                        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+                                        finally {
+                                            try {
+                                                if (_133 && !_133.done && (_136 = _132.return)) _136.call(_132);
+                                            }
+                                            finally { if (e_11) throw e_11.error; }
+                                        }
+                                        fallback_1 = (_85 = series.color) !== null && _85 !== void 0 ? _85 : theme.themeColors.accent1;
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_86 = seriesEntry.itemStyle) !== null && _86 !== void 0 ? _86 : {})), { color: function (params) { var _a; return (_a = overrides_2.get(params.dataIndex)) !== null && _a !== void 0 ? _a : fallback_1; } });
+                                    }
+                                    else if (isCircularChart &&
+                                        Array.isArray(seriesAny.dataPointColors) &&
+                                        seriesAny.dataPointColors.length) {
+                                        overrides_3 = new Map();
+                                        try {
+                                            for (_134 = (e_12 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _135 = _134.next(); !_135.done; _135 = _134.next()) {
+                                                dp = _135.value;
+                                                if (typeof dp.idx === "number" && typeof dp.color === "string") {
+                                                    overrides_3.set(dp.idx, dp.color);
+                                                }
+                                            }
+                                        }
+                                        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                                        finally {
+                                            try {
+                                                if (_135 && !_135.done && (_137 = _134.return)) _137.call(_134);
+                                            }
+                                            finally { if (e_12) throw e_12.error; }
+                                        }
+                                        slicePalette_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,
+                                        ]);
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_87 = seriesEntry.itemStyle) !== null && _87 !== void 0 ? _87 : {})), { color: function (params) {
+                                                var _a, _b;
+                                                return (_b = (_a = overrides_3.get(params.dataIndex)) !== null && _a !== void 0 ? _a : series.color) !== null && _b !== void 0 ? _b : slicePalette_1[params.dataIndex % slicePalette_1.length];
+                                            } });
+                                    }
+                                    else if (isBarOrColumn && series.invertIfNegative) {
+                                        positiveColor_1 = (_88 = series.color) !== null && _88 !== void 0 ? _88 : theme.themeColors.accent1;
+                                        negativeColor_1 = (_89 = series.negativeColor) !== null && _89 !== void 0 ? _89 : "#FF0000";
+                                        // Use a color function that returns different colors based on value
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_90 = seriesEntry.itemStyle) !== null && _90 !== void 0 ? _90 : {})), { color: function (params) {
+                                                var _a, _b;
+                                                var value = Array.isArray(params.data)
+                                                    ? params.data[1]
+                                                    : (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : params.data;
+                                                return typeof value === "number" && value < 0
+                                                    ? negativeColor_1
+                                                    : positiveColor_1;
+                                            } });
+                                    }
+                                    else if (series.color) {
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_91 = seriesEntry.itemStyle) !== null && _91 !== void 0 ? _91 : {})), { color: series.color });
+                                        seriesEntry.lineStyle = tslib_1.__assign(tslib_1.__assign({}, ((_92 = seriesEntry.lineStyle) !== null && _92 !== void 0 ? _92 : {})), { color: series.color });
+                                        if (effectiveChartType === "area") {
+                                            seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_93 = seriesEntry.areaStyle) !== null && _93 !== void 0 ? _93 : {})), { color: series.color });
+                                        }
+                                    }
+                                    chartSeries.push(seriesEntry);
+                                    pushSeriesOverlays(series, data, dataLabel);
+                                    return [2 /*return*/];
                             }
-                        }
-                        chartSeries.push(seriesEntry);
-                        pushSeriesOverlays(series, data, dataLabel);
+                        });
                     };
+                    _129.label = 31;
+                case 31:
+                    _129.trys.push([31, 36, 37, 38]);
+                    _r = tslib_1.__values(((_68 = spec.series) !== null && _68 !== void 0 ? _68 : []).entries()), _s = _r.next();
+                    _129.label = 32;
+                case 32:
+                    if (!!_s.done) return [3 /*break*/, 35];
+                    _t = tslib_1.__read(_s.value, 2), specSeriesIndex = _t[0], series = _t[1];
+                    return [5 /*yield**/, _loop_1(specSeriesIndex, series)];
+                case 33:
+                    _129.sent();
+                    _129.label = 34;
+                case 34:
+                    _s = _r.next();
+                    return [3 /*break*/, 32];
+                case 35: return [3 /*break*/, 38];
+                case 36:
+                    e_3_1 = _129.sent();
+                    e_3 = { error: e_3_1 };
+                    return [3 /*break*/, 38];
+                case 37:
                     try {
-                        for (_q = (e_4 = void 0, tslib_1.__values(series.sources)), _r = _q.next(); !_r.done; _r = _q.next()) {
-                            sheetRange = _r.value;
-                            _loop_1(sheetRange);
-                        }
-                    }
-                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                    finally {
-                        try {
-                            if (_r && !_r.done && (_1 = _q.return)) _1.call(_q);
-                        }
-                        finally { if (e_4) throw e_4.error; }
-                    }
-                    _104.label = 25;
-                case 25:
-                    _m = _l.next();
-                    return [3 /*break*/, 21];
-                case 26: return [3 /*break*/, 29];
-                case 27:
-                    e_2_1 = _104.sent();
-                    e_2 = { error: e_2_1 };
-                    return [3 /*break*/, 29];
-                case 28:
-                    try {
-                        if (_m && !_m.done && (_0 = _l.return)) _0.call(_l);
+                        if (_s && !_s.done && (_4 = _r.return)) _4.call(_r);
                     }
-                    finally { if (e_2) throw e_2.error; }
+                    finally { if (e_3) throw e_3.error; }
                     return [7 /*endfinally*/];
-                case 29:
+                case 38:
                     if (isOfPie) {
                         labels = rawPrimaryDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesEntry = (_71 = spec.series) === null || _71 === void 0 ? void 0 : _71[0];
+                        seriesEntry = (_94 = spec.series) === null || _94 === void 0 ? void 0 : _94[0];
                         rawValues = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
                             : [];
-                        _s = (0, of_pie_1.splitOfPie)(rawValues, labels, {
+                        _u = (0, of_pie_1.splitOfPie)(rawValues, labels, {
                             splitType: spec.splitType,
                             splitPos: spec.splitPos,
-                        }), main_1 = _s.main, secondary = _s.secondary, otherTotal = _s.otherTotal, total = _s.total;
+                        }), main_1 = _u.main, secondary = _u.secondary, otherTotal = _u.otherTotal, total = _u.total;
                         ofPieType_1 = (0, of_pie_1.resolveOfPieType)(spec.ofPieType);
                         secondScale = (0, of_pie_1.clampSecondPieSize)(spec.secondPieSize) / 100;
                         halfAngle_1 = (0, of_pie_1.otherSliceHalfAngle)(otherTotal, total);
@@ -1476,20 +1860,20 @@ var BasicChart = function (_a) {
                         };
                         chartDomains.length = 0;
                         chartSeries.length = 0;
-                        ofPiePalette_1 = [
+                        ofPiePalette_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,
-                        ];
+                        ]);
                         paletteAt_1 = function (index) {
                             return ofPiePalette_1[index % ofPiePalette_1.length];
                         };
                         chartSeries.push({
                             type: "pie",
-                            name: (_72 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _72 !== void 0 ? _72 : "",
+                            name: (_95 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _95 !== void 0 ? _95 : "",
                             center: ["".concat(MAIN_CX_1 * 100, "%"), "".concat(CY_1 * 100, "%")],
                             radius: [0, "".concat(MAIN_RADIUS_PCT_1, "%")],
                             // Rotate the pie so the "Other" slice's angular midpoint faces
@@ -1507,7 +1891,7 @@ var BasicChart = function (_a) {
                             if (ofPieType_1 === "pie") {
                                 chartSeries.push({
                                     type: "pie",
-                                    name: (_73 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _73 !== void 0 ? _73 : "",
+                                    name: (_96 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _96 !== void 0 ? _96 : "",
                                     center: ["".concat(SECONDARY_CX_1 * 100, "%"), "".concat(CY_1 * 100, "%")],
                                     radius: [0, "".concat(secondaryRadiusPct_1, "%")],
                                     data: secondary.map(function (s, i) { return ({
@@ -1602,16 +1986,16 @@ var BasicChart = function (_a) {
                         legend.data = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(main_1.map(function (s) { return s.label; })), false), tslib_1.__read(secondary.map(function (s) { return s.label; })), false);
                     }
                     else if (spec.chartType === "waterfall") {
-                        primaryDomainSource_1 = (_76 = (_75 = (_74 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _74 === void 0 ? void 0 : _74[0]) === null || _75 === void 0 ? void 0 : _75.sources) === null || _76 === void 0 ? void 0 : _76[0];
+                        primaryDomainSource_1 = (_99 = (_98 = (_97 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _97 === void 0 ? void 0 : _97[0]) === null || _98 === void 0 ? void 0 : _98.sources) === null || _99 === void 0 ? void 0 : _99[0];
                         rawDomainValues = primaryDomainSource_1
-                            ? (0, aggregation_1.sanitizeDomainValues)((_77 = getDomainValuesFromRange(primaryDomainSource_1, spec.hiddenDimensionStrategy)) !== null && _77 !== void 0 ? _77 : [])
+                            ? (0, aggregation_1.sanitizeDomainValues)((_100 = getDomainValuesFromRange(primaryDomainSource_1, spec.hiddenDimensionStrategy)) !== null && _100 !== void 0 ? _100 : [])
                             : [];
                         labels = rawDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesEntry = (_78 = spec.series) === null || _78 === void 0 ? void 0 : _78[0];
+                        seriesEntry = (_101 = spec.series) === null || _101 === void 0 ? void 0 : _101[0];
                         rawValues_1 = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
                             : [];
-                        totalIndices = new Set((_79 = spec.totalIndices) !== null && _79 !== void 0 ? _79 : []);
+                        totalIndices = new Set((_102 = spec.totalIndices) !== null && _102 !== void 0 ? _102 : []);
                         steps = (0, waterfall_1.computeWaterfall)(rawValues_1, labels, totalIndices);
                         chartDomains.length = 0;
                         chartDomains.push({
@@ -1621,7 +2005,7 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_80 = spec.horizontalAxisTitle) !== null && _80 !== void 0 ? _80 : "",
+                            name: (_103 = spec.horizontalAxisTitle) !== null && _103 !== void 0 ? _103 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         });
@@ -1634,9 +2018,9 @@ var BasicChart = function (_a) {
                             data: steps.map(function (s) { return s.placeholder; }),
                             silent: true,
                         });
-                        accent_1 = (_81 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color) !== null && _81 !== void 0 ? _81 : theme.themeColors.accent1;
-                        decreaseColor_1 = (_83 = (_82 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.negativeColor) !== null && _82 !== void 0 ? _82 : theme.themeColors.accent2) !== null && _83 !== void 0 ? _83 : accent_1;
-                        totalColor_1 = (_84 = theme.themeColors.accent3) !== null && _84 !== void 0 ? _84 : accent_1;
+                        accent_1 = (_104 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color) !== null && _104 !== void 0 ? _104 : theme.themeColors.accent1;
+                        decreaseColor_1 = (_106 = (_105 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.negativeColor) !== null && _105 !== void 0 ? _105 : theme.themeColors.accent2) !== null && _106 !== void 0 ? _106 : accent_1;
+                        totalColor_1 = (_107 = theme.themeColors.accent3) !== null && _107 !== void 0 ? _107 : accent_1;
                         connectors = steps.slice(0, -1).map(function (s, i) { return [
                             { coord: [i, s.cumulative] },
                             { coord: [i + 1, s.cumulative] },
@@ -1644,7 +2028,7 @@ var BasicChart = function (_a) {
                         chartSeries.push({
                             type: "bar",
                             stack: "waterfall",
-                            name: (_85 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _85 !== void 0 ? _85 : "",
+                            name: (_108 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _108 !== void 0 ? _108 : "",
                             data: steps.map(function (s, i) { return ({
                                 value: s.value,
                                 itemStyle: {
@@ -1671,12 +2055,12 @@ var BasicChart = function (_a) {
                         legend.data = [];
                     }
                     else if (spec.chartType === "funnel") {
-                        primaryDomainSource_2 = (_88 = (_87 = (_86 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _86 === void 0 ? void 0 : _86[0]) === null || _87 === void 0 ? void 0 : _87.sources) === null || _88 === void 0 ? void 0 : _88[0];
+                        primaryDomainSource_2 = (_111 = (_110 = (_109 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _109 === void 0 ? void 0 : _109[0]) === null || _110 === void 0 ? void 0 : _110.sources) === null || _111 === void 0 ? void 0 : _111[0];
                         rawDomainValues = primaryDomainSource_2
-                            ? (0, aggregation_1.sanitizeDomainValues)((_89 = getDomainValuesFromRange(primaryDomainSource_2, spec.hiddenDimensionStrategy)) !== null && _89 !== void 0 ? _89 : [])
+                            ? (0, aggregation_1.sanitizeDomainValues)((_112 = getDomainValuesFromRange(primaryDomainSource_2, spec.hiddenDimensionStrategy)) !== null && _112 !== void 0 ? _112 : [])
                             : [];
                         labels_1 = rawDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesEntry = (_90 = spec.series) === null || _90 === void 0 ? void 0 : _90[0];
+                        seriesEntry = (_113 = spec.series) === null || _113 === void 0 ? void 0 : _113[0];
                         rawValues = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : 0); })
                             : [];
@@ -1684,7 +2068,7 @@ var BasicChart = function (_a) {
                         chartSeries.length = 0;
                         chartSeries.push({
                             type: "funnel",
-                            name: (_91 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _91 !== void 0 ? _91 : "",
+                            name: (_114 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _114 !== void 0 ? _114 : "",
                             data: rawValues.map(function (value, i) {
                                 var _a;
                                 return ({
@@ -1705,8 +2089,8 @@ var BasicChart = function (_a) {
                         outlierPoints = [];
                         meanPoints = [];
                         try {
-                            for (_t = tslib_1.__values((_92 = spec.series) !== null && _92 !== void 0 ? _92 : []), _u = _t.next(); !_u.done; _u = _t.next()) {
-                                seriesEntry = _u.value;
+                            for (_v = tslib_1.__values((_115 = spec.series) !== null && _115 !== void 0 ? _115 : []), _w = _v.next(); !_w.done; _w = _v.next()) {
+                                seriesEntry = _w.value;
                                 label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                                     ? seriesEntry.dataLabel
                                     : "";
@@ -1720,17 +2104,17 @@ var BasicChart = function (_a) {
                                     boxLabels.push(label);
                                     if (showOutliers === true) {
                                         try {
-                                            for (_v = (e_6 = void 0, tslib_1.__values(summary.outliers)), _w = _v.next(); !_w.done; _w = _v.next()) {
-                                                outlier = _w.value;
+                                            for (_x = (e_7 = void 0, tslib_1.__values(summary.outliers)), _y = _x.next(); !_y.done; _y = _x.next()) {
+                                                outlier = _y.value;
                                                 outlierPoints.push([boxIndex, outlier]);
                                             }
                                         }
-                                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                                        catch (e_7_1) { e_7 = { error: e_7_1 }; }
                                         finally {
                                             try {
-                                                if (_w && !_w.done && (_3 = _v.return)) _3.call(_v);
+                                                if (_y && !_y.done && (_6 = _x.return)) _6.call(_x);
                                             }
-                                            finally { if (e_6) throw e_6.error; }
+                                            finally { if (e_7) throw e_7.error; }
                                         }
                                     }
                                     if (showMeanMarker) {
@@ -1739,12 +2123,12 @@ var BasicChart = function (_a) {
                                 }
                             }
                         }
-                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
                         finally {
                             try {
-                                if (_u && !_u.done && (_2 = _t.return)) _2.call(_t);
+                                if (_w && !_w.done && (_5 = _v.return)) _5.call(_v);
                             }
-                            finally { if (e_5) throw e_5.error; }
+                            finally { if (e_6) throw e_6.error; }
                         }
                         chartDomains.length = 0;
                         chartDomains.push({
@@ -1754,7 +2138,7 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_93 = spec.horizontalAxisTitle) !== null && _93 !== void 0 ? _93 : "",
+                            name: (_116 = spec.horizontalAxisTitle) !== null && _116 !== void 0 ? _116 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         });
@@ -1764,7 +2148,7 @@ var BasicChart = function (_a) {
                             name: "",
                             data: boxStats,
                         };
-                        boxColor = (_95 = (_94 = spec.series) === null || _94 === void 0 ? void 0 : _94[0]) === null || _95 === void 0 ? void 0 : _95.color;
+                        boxColor = (_118 = (_117 = spec.series) === null || _117 === void 0 ? void 0 : _117[0]) === null || _118 === void 0 ? void 0 : _118.color;
                         if (boxColor) {
                             boxSeries.itemStyle = { color: boxColor, borderColor: boxColor };
                         }
@@ -1779,7 +2163,7 @@ var BasicChart = function (_a) {
                     }
                     else if (spec.chartType === "histogram") {
                         rawValues = flattenChartDataValues(spec.series, getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
-                        _x = (0, histogram_1.binHistogram)(rawValues, spec.binCount), labels = _x.labels, counts = _x.counts;
+                        _z = (0, histogram_1.binHistogram)(rawValues, spec.binCount), labels = _z.labels, counts = _z.counts;
                         isPareto_1 = (0, histogram_1.isParetoSpec)(spec);
                         cumulativePercents = [];
                         if (isPareto_1) {
@@ -1796,18 +2180,18 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_96 = spec.horizontalAxisTitle) !== null && _96 !== void 0 ? _96 : "",
+                            name: (_119 = spec.horizontalAxisTitle) !== null && _119 !== void 0 ? _119 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         });
                         chartSeries.length = 0;
                         histogramSeries = {
                             type: "bar",
-                            name: (_99 = (_98 = (_97 = spec.series) === null || _97 === void 0 ? void 0 : _97[0]) === null || _98 === void 0 ? void 0 : _98.dataLabel) !== null && _99 !== void 0 ? _99 : "",
+                            name: (_122 = (_121 = (_120 = spec.series) === null || _120 === void 0 ? void 0 : _120[0]) === null || _121 === void 0 ? void 0 : _121.dataLabel) !== null && _122 !== void 0 ? _122 : "",
                             data: counts,
                             barCategoryGap: "1%",
                         };
-                        histogramColor = (_101 = (_100 = spec.series) === null || _100 === void 0 ? void 0 : _100[0]) === null || _101 === void 0 ? void 0 : _101.color;
+                        histogramColor = (_124 = (_123 = spec.series) === null || _123 === void 0 ? void 0 : _123[0]) === null || _124 === void 0 ? void 0 : _124.color;
                         if (histogramColor) {
                             histogramSeries.itemStyle = { color: histogramColor };
                         }
@@ -1861,29 +2245,73 @@ var BasicChart = function (_a) {
                     isPareto = spec.chartType === "histogram" && (0, histogram_1.isParetoSpec)(spec);
                     hasSecondaryAxis = !isCircularChart &&
                         !isHorizontalBarChart &&
-                        (((_102 = spec.series) !== null && _102 !== void 0 ? _102 : []).some(function (s) { return s.useSecondaryAxis; }) || isPareto);
+                        (((_125 = spec.series) !== null && _125 !== void 0 ? _125 : []).some(function (s) { return s.useSecondaryAxis; }) || isPareto);
+                    isPercentStackedBars = spec.stackedType === "PERCENT_STACKED" &&
+                        (spec.chartType === "bar" || spec.chartType === "column");
+                    primaryAxisNumberFormat = isPercentStackedBars
+                        ? undefined
+                        : (0, axis_number_format_1.resolveValueAxisNumberFormat)({
+                            axisOptions: spec.valueAxisOptions,
+                            series: ((_126 = spec.series) !== null && _126 !== void 0 ? _126 : []).filter(function (s) { return !s.useSecondaryAxis; }),
+                            getFormattingFromRange: getFormattingFromRange,
+                            hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+                        });
+                    secondaryAxisNumberFormat = (0, axis_number_format_1.resolveValueAxisNumberFormat)({
+                        axisOptions: spec.secondaryValueAxisOptions,
+                        series: ((_127 = spec.series) !== null && _127 !== void 0 ? _127 : []).filter(function (s) { return s.useSecondaryAxis; }),
+                        getFormattingFromRange: getFormattingFromRange,
+                        hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+                    });
+                    axisNumberFormatFor = function (s) {
+                        return (s === null || s === void 0 ? void 0 : s.yAxisIndex) === 1
+                            ? secondaryAxisNumberFormat
+                            : primaryAxisNumberFormat;
+                    };
+                    seriesNumberFormats = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+                    seriesNumberFormatFor = function (s) {
+                        var _a;
+                        var specIndex = (0, series_click_1.chartSeriesSpecIndex)(s === null || s === void 0 ? void 0 : s.id);
+                        return ((_a = (specIndex === undefined ? undefined : seriesNumberFormats[specIndex])) !== null && _a !== void 0 ? _a : axisNumberFormatFor(s));
+                    };
                     tooltipConfig = {
                         textStyle: {
                             fontSize: 12,
                         },
                         trigger: isCircularChart ? "item" : "axis",
-                        formatter: isCircularChart ? "{b}: {c} ({d}%)" : undefined,
+                        formatter: isCircularChart
+                            ? primaryAxisNumberFormat
+                                ? (0, axis_number_format_1.circularTooltipFormatter)(primaryAxisNumberFormat)
+                                : "{b}: {c} ({d}%)"
+                            : undefined,
                     };
                     finalLegend = (0, overrides_1.applyLegendOverrides)(legend, spec.legend);
-                    seriesLabelOption = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                    dataLabelOptions = spec.dataLabels;
+                    seriesLabelOptionFor = function (s) {
+                        return (0, overrides_1.buildSeriesLabelOption)(dataLabelOptions && !dataLabelOptions.numberFormatPattern
+                            ? tslib_1.__assign(tslib_1.__assign({}, dataLabelOptions), { numberFormatPattern: seriesNumberFormatFor(s) }) : dataLabelOptions);
+                    };
                     isDoughnut = spec.chartType === "doughnut";
                     doughnutHoleSize = spec.doughnutHoleSize;
+                    explosion = isCircularChart && !isOfPie ? (0, pie_explosion_1.resolveExplosion)(spec) : 0;
+                    explodedRef.current = explosion > 0;
+                    explosionOffset = (0, pie_explosion_1.explosionOffsetPx)(explosion, (0, pie_explosion_1.pieRadiusPx)(isDoughnut ? [0, "75%"] : spec.radius, width !== null && width !== void 0 ? width : 0, height !== null && height !== void 0 ? height : 0));
                     // PERCENT_STACKED — echarts has no built-in `barnorm: 'percent'`,
                     // so we normalize per category here: each cell becomes
                     // (value / category_total) * 100, while the original value is
                     // tucked into a sibling field so the label formatter can still
-                    // surface the dollar amount. Touches only bar/column series in
-                    // the percent-stacked spec; other charts pass through unchanged.
+                    // surface the dollar amount. Touches only the stacked base series
+                    // (bar/column, and the line series of 100% stacked line / area
+                    // charts); overlays and other charts pass through unchanged.
                     if (spec.stackedType === "PERCENT_STACKED" &&
-                        (spec.chartType === "bar" || spec.chartType === "column")) {
-                        barSeries = chartSeries.filter(function (s) { return (s === null || s === void 0 ? void 0 : s.type) === "bar"; });
+                        (spec.chartType === "bar" ||
+                            spec.chartType === "column" ||
+                            spec.chartType === "line" ||
+                            spec.chartType === "area")) {
+                        barSeries = chartSeries.filter(function (s) {
+                            return (s === null || s === void 0 ? void 0 : s.stack) !== undefined && ((s === null || s === void 0 ? void 0 : s.type) === "bar" || (s === null || s === void 0 ? void 0 : s.type) === "line");
+                        });
                         len = barSeries.reduce(function (m, s) { return Math.max(m, Array.isArray(s.data) ? s.data.length : 0); }, 0);
-                        categoryTotals_1 = new Array(len).fill(0);
+                        categoryTotals_2 = new Array(len).fill(0);
                         try {
                             for (barSeries_1 = tslib_1.__values(barSeries), barSeries_1_1 = barSeries_1.next(); !barSeries_1_1.done; barSeries_1_1 = barSeries_1.next()) {
                                 s = barSeries_1_1.value;
@@ -1893,16 +2321,16 @@ var BasicChart = function (_a) {
                                     raw = s.data[i];
                                     n = typeof raw === "number" ? raw : Number(raw);
                                     if (Number.isFinite(n))
-                                        categoryTotals_1[i] += n;
+                                        categoryTotals_2[i] += n;
                                 }
                             }
                         }
-                        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
                         finally {
                             try {
-                                if (barSeries_1_1 && !barSeries_1_1.done && (_4 = barSeries_1.return)) _4.call(barSeries_1);
+                                if (barSeries_1_1 && !barSeries_1_1.done && (_7 = barSeries_1.return)) _7.call(barSeries_1);
                             }
-                            finally { if (e_7) throw e_7.error; }
+                            finally { if (e_8) throw e_8.error; }
                         }
                         try {
                             for (barSeries_2 = tslib_1.__values(barSeries), barSeries_2_1 = barSeries_2.next(); !barSeries_2_1.done; barSeries_2_1 = barSeries_2.next()) {
@@ -1911,7 +2339,7 @@ var BasicChart = function (_a) {
                                     continue;
                                 s.data = s.data.map(function (raw, i) {
                                     var n = typeof raw === "number" ? raw : Number(raw);
-                                    var total = categoryTotals_1[i];
+                                    var total = categoryTotals_2[i];
                                     if (!Number.isFinite(n) || total === 0) {
                                         return { value: 0, originalValue: raw };
                                     }
@@ -1919,20 +2347,43 @@ var BasicChart = function (_a) {
                                 });
                             }
                         }
-                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
                         finally {
                             try {
-                                if (barSeries_2_1 && !barSeries_2_1.done && (_5 = barSeries_2.return)) _5.call(barSeries_2);
+                                if (barSeries_2_1 && !barSeries_2_1.done && (_8 = barSeries_2.return)) _8.call(barSeries_2);
                             }
-                            finally { if (e_8) throw e_8.error; }
+                            finally { if (e_9) throw e_9.error; }
                         }
                     }
                     seriesWithLabels = chartSeries.map(function (s) {
-                        var _a;
+                        var _a, _b, _c, _d, _e;
                         var next = tslib_1.__assign({}, s);
+                        var seriesLabelOption = seriesLabelOptionFor(s);
                         if (seriesLabelOption) {
                             next.label = tslib_1.__assign(tslib_1.__assign({}, ((_a = s === null || s === void 0 ? void 0 : s.label) !== null && _a !== void 0 ? _a : {})), seriesLabelOption);
                         }
+                        // Tooltip values of the value-axis series (a boxplot / candlestick
+                        // tooltip lists its own statistics and keeps echarts' default).
+                        var seriesTooltipValueFormatter = VALUE_TOOLTIP_SERIES_TYPES.has(s === null || s === void 0 ? void 0 : s.type)
+                            ? (0, axis_number_format_1.valueAxisLabelFormatter)(seriesNumberFormatFor(s))
+                            : undefined;
+                        if (seriesTooltipValueFormatter && ((_b = s === null || s === void 0 ? void 0 : s.tooltip) === null || _b === void 0 ? void 0 : _b.show) !== false) {
+                            next.tooltip = tslib_1.__assign(tslib_1.__assign({}, ((_c = s === null || s === void 0 ? void 0 : s.tooltip) !== null && _c !== void 0 ? _c : {})), { valueFormatter: seriesTooltipValueFormatter });
+                        }
+                        if (next.type === "pie") {
+                            var pieNumberFormat = seriesNumberFormatFor(s);
+                            if (pieNumberFormat && ((_d = s === null || s === void 0 ? void 0 : s.tooltip) === null || _d === void 0 ? void 0 : _d.show) !== false) {
+                                next.tooltip = tslib_1.__assign(tslib_1.__assign({}, ((_e = s === null || s === void 0 ? void 0 : s.tooltip) !== null && _e !== void 0 ? _e : {})), { formatter: (0, axis_number_format_1.circularTooltipFormatter)(pieNumberFormat) });
+                            }
+                            if (explosionOffset > 0 && Array.isArray(next.data)) {
+                                next.selectedMode = "multiple";
+                                next.selectedOffset = explosionOffset;
+                                next.data = next.data.map(function (item) {
+                                    return item !== null && typeof item === "object"
+                                        ? tslib_1.__assign(tslib_1.__assign({}, item), { selected: true }) : { value: item, selected: true };
+                                });
+                            }
+                        }
                         if (isDoughnut && next.type === "pie") {
                             var inner = typeof doughnutHoleSize === "number"
                                 ? Math.round(Math.max(0, Math.min(0.9, doughnutHoleSize)) * 100)
@@ -1942,7 +2393,7 @@ var BasicChart = function (_a) {
                         return next;
                     });
                     // Update charts
-                    (_103 = chartRef.current) === null || _103 === void 0 ? void 0 : _103.setOption({
+                    (_128 = chartRef.current) === null || _128 === void 0 ? void 0 : _128.setOption({
                         xAxis: (function () {
                             var _a, _b;
                             if (isOfPie) {
@@ -1986,7 +2437,7 @@ var BasicChart = function (_a) {
                             }
                             if (isHorizontalBarChart) {
                                 return [
-                                    (0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: (_a = spec.horizontalAxisTitle) !== null && _a !== void 0 ? _a : "" }), spec.valueAxisOptions),
+                                    (0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: (_a = spec.horizontalAxisTitle) !== null && _a !== void 0 ? _a : "" }), spec.valueAxisOptions, primaryAxisNumberFormat),
                                 ];
                             }
                             var base = chartDomains.length > 0
@@ -2050,7 +2501,7 @@ var BasicChart = function (_a) {
                                 });
                             }
                             var axes = [
-                                (0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: (_b = spec.verticalAxisTitle) !== null && _b !== void 0 ? _b : "" }), spec.valueAxisOptions),
+                                (0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: (_b = spec.verticalAxisTitle) !== null && _b !== void 0 ? _b : "" }), spec.valueAxisOptions, primaryAxisNumberFormat),
                             ];
                             if (hasSecondaryAxis) {
                                 axes.push((0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: "", splitLine: { show: false } }), (isPareto
@@ -2059,7 +2510,7 @@ var BasicChart = function (_a) {
                                         max: 100,
                                         axisLabel: { formatter: "{value}%" },
                                     }
-                                    : {})), spec.secondaryValueAxisOptions));
+                                    : {})), spec.secondaryValueAxisOptions, secondaryAxisNumberFormat));
                             }
                             return axes;
                         })(),
@@ -2086,6 +2537,7 @@ var BasicChart = function (_a) {
             charts_1.CandlestickChart,
             charts_1.CustomChart,
             charts_1.FunnelChart,
+            charts_1.HeatmapChart,
             charts_1.LineChart,
             charts_1.PieChart,
             charts_1.RadarChart,
@@ -2094,6 +2546,7 @@ var BasicChart = function (_a) {
             charts_1.SunburstChart,
             renderers_1.CanvasRenderer,
             components_1.DatasetComponent,
+            components_1.VisualMapComponent,
         ]);
         initializeChart();
     }, []);
@@ -2106,7 +2559,7 @@ var BasicChart = function (_a) {
     // between the cartesian 2-D option and the grid3D / map one and must
     // re-apply these.
     var applyThemeOptions = function () {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (chartRef.current) {
             var textColor = (0, spreadsheet_1.getStringifiedColor)({
                 theme: 1,
@@ -2146,14 +2599,17 @@ var BasicChart = function (_a) {
                         color: textColor,
                     },
                 },
-                color: [
+                color: (0, chart_styles_1.getChartPalette)(chart.spec, [
                     theme.themeColors.accent1,
                     theme.themeColors.accent2,
                     theme.themeColors.accent3,
                     theme.themeColors.accent4,
                     theme.themeColors.accent5,
                     theme.themeColors.accent6,
-                ],
+                ]),
+                // Excel's Format Chart Area fill; `transparent` (echarts' own
+                // default) so clearing the fill undoes an earlier setOption.
+                backgroundColor: (_f = chart.spec.backgroundColor) !== null && _f !== void 0 ? _f : "transparent",
             };
             // Skip when rendering 3-D or a region map: merging a cartesian
             // yAxis into a grid3D / map option would create a stray empty
@@ -2175,7 +2631,14 @@ var BasicChart = function (_a) {
     // Update chart properties
     (0, ui_1.useIsomorphicLayoutEffect)(function () {
         applyThemeOptions();
-    }, [theme, title, isDarkMode, chart.spec.chartType]);
+    }, [
+        theme,
+        title,
+        isDarkMode,
+        chart.spec.chartType,
+        chart.spec.palette,
+        chart.spec.backgroundColor,
+    ]);
     // Draw chart. `glUpgradeTick` re-runs the draw when the lazily loaded
     // echarts-gl module resolves, upgrading a 3-D spec's immediate 2-D
     // fallback to the true 3-D rendering.
@@ -2185,6 +2648,7 @@ var BasicChart = function (_a) {
         chart.spec,
         getDomainValuesFromRange,
         getSeriesValuesFromRange,
+        getFormattingFromRange,
         glUpgradeTick,
     ]);
     // Resize chart
@@ -2202,16 +2666,43 @@ var BasicChart = function (_a) {
         var _a;
         (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.resize({ silent: true });
     }, [width, height]);
+    var chartPngDataUrl = function () {
+        var _a, _b;
+        return (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.getDataURL({
+            type: "png",
+            pixelRatio: 2,
+            backgroundColor: (_b = chart.spec.backgroundColor) !== null && _b !== void 0 ? _b : (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme),
+        });
+    };
     var onDownloadChart = function () {
         var _a;
-        if (chartRef.current) {
-            var url = chartRef.current.getDataURL({
-                type: "png",
-                backgroundColor: (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme),
-            });
+        var url = chartPngDataUrl();
+        if (url) {
             (0, toolkit_1.createDownloadableFile)((_a = chart.spec.title) !== null && _a !== void 0 ? _a : "Chart", url);
         }
     };
+    // Copy as Picture / print preview — the same raster as the download.
+    var exportChartPng = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () { return tslib_1.__generator(this, function (_a) {
+        return [2 /*return*/, (0, chart_image_1.dataUrlToBlob)(chartPngDataUrl())];
+    }); }); };
+    // 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;
+    // 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,
+        downloadPng: onDownloadChart,
+        exportPng: exportChartPng,
+        switchRowColumn: switchRowColumnAction,
+    });
     // Excel's "Rounded Corners" chart style (`<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 — otherwise
@@ -2220,6 +2711,7 @@ var BasicChart = function (_a) {
         ? { borderRadius: 8, overflow: "hidden" }
         : undefined;
     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" },