@rowsncolumns/charts 28.1.8 → 28.1.11

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

@@ -22,9 +22,9 @@ 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 echarts_overlays_1 = require("../utils/echarts-overlays");
 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");
@@ -40,7 +40,6 @@ 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");
 var webgl_1 = require("../utils/webgl");
 var helpers_1 = require("./helpers");
@@ -113,29 +112,52 @@ var isBubbleChartSpec = function (spec) {
 var isHierarchyChartSpec = function (spec) {
     return HIERARCHY_CHART_TYPES.has(spec.chartType);
 };
+// Every level keeps the colour its node was given (one solid colour per
+// top-level category, like Excel — no per-level saturation ramp); thin
+// white gaps separate the cells. Index 0 is echarts' virtual root, 1 the
+// top-level categories, 2+ the levels beneath them.
 var HIERARCHY_LEVEL_STYLES = [
     {
         itemStyle: {
-            gapWidth: 1,
-            borderColorSaturation: 0.6,
-        },
-        upperLabel: { show: false },
-    },
-    {
-        colorSaturation: [0.35, 0.65],
-        itemStyle: {
-            gapWidth: 1,
-            borderColorSaturation: 0.6,
+            gapWidth: 2,
+            borderColor: "#ffffff",
+            borderWidth: 0,
         },
     },
     {
-        colorSaturation: [0.45, 0.75],
         itemStyle: {
             gapWidth: 1,
-            borderColorSaturation: 0.6,
+            borderColor: "#ffffff",
+            borderWidth: 1,
         },
     },
 ];
+/** Height of the strip a treemap category name is drawn in (Excel's "Banner"). */
+var TREEMAP_BANNER_HEIGHT = 20;
+/**
+ * Excel's treemap `parentLabelLayout`: the top-level category names are
+ * drawn in a banner strip (or not at all); the levels between the categories
+ * and the leaves are never labelled, so small groups keep their height for
+ * the leaf cells (rowsncolumns/spreadsheet#1072). Excel's default
+ * `overlapping` writes the name over the group's top-left corner, which an
+ * echarts treemap cannot draw (an upper label always reserves its strip and
+ * is dropped when the strip is too small for the text), so it draws as a
+ * banner.
+ */
+var treemapBannerShown = function (layout) { return layout !== "none"; };
+/**
+ * Colour a hierarchy like Excel: each top-level node takes the next
+ * palette colour and every descendant inherits it (#1072).
+ */
+var colorHierarchyNodes = function (nodes, palette) {
+    return nodes.map(function (node, index) {
+        var color = (0, utils_1.chartPaletteColorAt)(palette, index);
+        var paint = function (n) { return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, n), { itemStyle: { color: color } }), (n.children ? { children: n.children.map(paint) } : {}))); };
+        return paint(node);
+    });
+};
+/** Sunburst rings: Excel leaves the centre empty, so even the first level is a ring (#1073). */
+var SUNBURST_RADIUS = ["15%", "80%"];
 var getHierarchyDepth = function (nodes, depth) {
     if (depth === void 0) { depth = 1; }
     var maxDepth = depth;
@@ -172,18 +194,40 @@ var flattenChartDataValues = function (chartData, extractor, hiddenStrategy, ski
     });
     return values;
 };
-var buildHierarchyLevels = function (maxDepth) {
+var buildHierarchyLevels = function (maxDepth, options) {
     if (maxDepth <= 0)
         return undefined;
     var levels = [];
-    for (var i = 0; i < maxDepth; i++) {
+    // One entry per depth, the virtual root included, so every level's upper
+    // label is explicit: the categories' banner on level 1 only.
+    for (var i = 0; i <= maxDepth; i++) {
         var baseStyle = HIERARCHY_LEVEL_STYLES[Math.min(i, HIERARCHY_LEVEL_STYLES.length - 1)];
-        levels.push(tslib_1.__assign(tslib_1.__assign({}, baseStyle), { itemStyle: tslib_1.__assign({}, baseStyle.itemStyle) }));
+        levels.push(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, baseStyle), { itemStyle: tslib_1.__assign({}, baseStyle.itemStyle) }), (options.treemap
+            ? {
+                upperLabel: i === 1 && options.banner
+                    ? {
+                        show: true,
+                        height: TREEMAP_BANNER_HEIGHT,
+                        padding: [0, 0, 0, 4],
+                    }
+                    : { show: false },
+            }
+            : {})));
     }
     return levels;
 };
 /** Series whose tooltip value is one number on a value axis. */
 var VALUE_TOOLTIP_SERIES_TYPES = new Set(["bar", "line", "scatter", "funnel"]);
+/** The transparent spacer bars a waterfall stacks its visible bars on. */
+var WATERFALL_PLACEHOLDER_ID = "rnc-waterfall-placeholder";
+/** The invisible funnel that carries the stage names beside the bars. */
+var FUNNEL_NAMES_ID = "rnc-funnel-names";
+/**
+ * Layout-only series: they carry no data of their own, so they get no
+ * data labels and no tooltip entry (#1070 labelled every waterfall bar
+ * with its spacer's height too).
+ */
+var DECORATION_SERIES_IDS = new Set([WATERFALL_PLACEHOLDER_ID, FUNNEL_NAMES_ID]);
 var defaultLegendConfig = {
     padding: 10,
     itemWidth: 10,
@@ -368,11 +412,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, bubbleSeriesLabelFor_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, radarAxisOptions, 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, seriesPalette, paletteColorAt, _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, valueAxisBase, isPareto, hasSecondaryAxis, isPercentStackedBars, primaryAxisNumberFormat, secondaryAxisNumberFormat, axisNumberFormatFor, seriesNumberFormats, seriesNumberFormatFor, tooltipConfig, finalLegend, bottomAxisNameGap, legendBand, positionedLegend, gridConfig, chartDataLabels, seriesLabelOptionFor, isDoughnut, doughnutHoleSize, doughnutSeriesOrder, doughnutRingSet, 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, _129, _130, _131, _132, _133, _134, _135, _136, _137, _138, _139;
-        return tslib_1.__generator(this, function (_140) {
-            switch (_140.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, bubblePalette_1, bubbleItemColor_1, hasBubbleSecondaryAxis, xAxisConfig, tooltipFormatter, bubbleSeriesLabelFor_1, bubbleSeries, bubbleOverlays, hierarchyRows, headerTitle, hierarchyPalette, hierarchyData, rootName, drillDown, seriesDisplayName, hierarchyDepth, isTreemap, banner, levels, hierarchyLegend, legendShown, categoryLegendSeries, 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, radarAxisOptions_1, 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, seriesPalette, paletteColorAt, _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, pointColors_1, _v, _w, dp, connectors, primaryDomainSource_2, rawDomainValues, labels_1, seriesEntry, rawValues, funnelPalette, funnelColor_1, stageColors_1, _x, _y, dp, funnelData, funnelLayout, quartileMethod, showOutliers, showMeanMarker, boxStats, boxLabels, outlierPoints, meanPoints, _z, _0, seriesEntry, label, rawValues, summary, boxIndex, lo, hi, _1, _2, outlier, boxSeries, boxColor, rawValues, _3, labels, counts, isPareto_1, cumulativePercents, pareto, histogramSeries, histogramColor, renderedSeriesCount, replaceMerge, valueAxisBase, isPareto, hasSecondaryAxis, isPercentStackedBars, primaryAxisNumberFormat, secondaryAxisNumberFormat, axisNumberFormatFor, seriesNumberFormats, seriesNumberFormatFor, tooltipConfig, finalLegend, bottomAxisNameGap, legendBand, positionedLegend, gridConfig, chartDataLabels, seriesLabelOptionFor, isDoughnut, doughnutHoleSize, doughnutSeriesOrder, doughnutRingSet, 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, _4, e_2, _5, e_4, _6, e_5, _7, e_3, _8, e_6, _9, e_7, _10, e_8, _11, e_9, _12, e_10, _13, e_11, _14;
+        var _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, _129, _130, _131, _132, _133, _134, _135, _136, _137, _138, _139, _140, _141, _142, _143, _144, _145, _146, _147, _148, _149;
+        return tslib_1.__generator(this, function (_150) {
+            switch (_150.label) {
                 case 0:
                     (0, utils_1.debug)("Updating chart", chart);
                     threeDRenderKind = (0, three_d_1.resolve3DRenderKind)(spec.sourceChartType);
@@ -396,7 +440,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.
-                        (_9 = chartRef.current) === null || _9 === void 0 ? void 0 : _9.dispose();
+                        (_15 = chartRef.current) === null || _15 === void 0 ? void 0 : _15.dispose();
                         chartRef.current = undefined;
                         renderedIn3D.current = false;
                         previousChartType.current = undefined;
@@ -410,7 +454,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.
-                        (_10 = chartRef.current) === null || _10 === void 0 ? void 0 : _10.dispose();
+                        (_16 = chartRef.current) === null || _16 === void 0 ? void 0 : _16.dispose();
                         chartRef.current = undefined;
                         renderedAsRegionMap.current = false;
                         previousChartType.current = undefined;
@@ -423,7 +467,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 = _140.sent();
+                    geo = _150.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).
@@ -438,7 +482,7 @@ var BasicChart = function (_a) {
                     if (!geo) {
                         // Map asset failed to load (or unknown scope) — the loader
                         // already warned once; render an empty chart, never crash.
-                        (_11 = chartRef.current) === null || _11 === void 0 ? void 0 : _11.setOption({ series: [] }, { replaceMerge: ["series", "visualMap"] });
+                        (_17 = chartRef.current) === null || _17 === void 0 ? void 0 : _17.setOption({ series: [] }, { replaceMerge: ["series", "visualMap"] });
                         renderedAsRegionMap.current = true;
                         applyThemeOptions();
                         previousChartType.current = spec.chartType;
@@ -446,7 +490,7 @@ var BasicChart = function (_a) {
                         return [2 /*return*/];
                     }
                     labels = flattenChartDataValues(regionSpec.domains, getDomainValuesFromRange, regionSpec.hiddenDimensionStrategy, false);
-                    seriesEntry = (_12 = regionSpec.series) === null || _12 === void 0 ? void 0 : _12[0];
+                    seriesEntry = (_18 = regionSpec.series) === null || _18 === void 0 ? void 0 : _18[0];
                     values = seriesEntry
                         ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, regionSpec.hiddenDimensionStrategy)
                         : [];
@@ -462,7 +506,7 @@ var BasicChart = function (_a) {
                     seriesName = (seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                         ? seriesEntry.dataLabel
                         : "";
-                    (_13 = chartRef.current) === null || _13 === void 0 ? void 0 : _13.setOption({
+                    (_19 = chartRef.current) === null || _19 === void 0 ? void 0 : _19.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),
@@ -530,54 +574,91 @@ var BasicChart = function (_a) {
                     hierarchyTitleRef.current = explicitChartTitle;
                     skipHeaders_1 = spec.useFirstRowAsHeaders !== false;
                     labelValues = flattenChartDataValues(spec.bubbleLabels, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
-                    perSeriesX = ((_14 = spec.domains) !== null && _14 !== void 0 ? _14 : []).map(function (dom) {
+                    perSeriesX = ((_20 = spec.domains) !== null && _20 !== void 0 ? _20 : []).map(function (dom) {
                         return flattenChartDataValues([dom], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
-                    perSeriesSize = ((_15 = spec.bubbleSizes) !== null && _15 !== void 0 ? _15 : []).map(function (sz) {
+                    perSeriesSize = ((_21 = spec.bubbleSizes) !== null && _21 !== void 0 ? _21 : []).map(function (sz) {
                         return flattenChartDataValues([sz], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
                     });
                     seriesInputs = [];
                     i = 0;
-                    _140.label = 3;
+                    _150.label = 3;
                 case 3:
                     if (!(i < spec.series.length)) return [3 /*break*/, 7];
                     seriesEntry = spec.series[i];
-                    resolvedLabel = (_16 = seriesEntry.dataLabel) !== null && _16 !== void 0 ? _16 : "";
+                    resolvedLabel = (_22 = seriesEntry.dataLabel) !== null && _22 !== void 0 ? _22 : "";
                     if (!(resolvedLabel && (0, utils_1.isAFormula)(resolvedLabel))) return [3 /*break*/, 5];
                     _b = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_17 = position.sheetId) !== null && _17 !== void 0 ? _17 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_23 = position.sheetId) !== null && _23 !== void 0 ? _23 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                 case 4:
-                    resolvedLabel = _b.apply(void 0, [_140.sent()]);
-                    _140.label = 5;
+                    resolvedLabel = _b.apply(void 0, [_150.sent()]);
+                    _150.label = 5;
                 case 5:
-                    xValues = (_18 = perSeriesX[i]) !== null && _18 !== void 0 ? _18 : perSeriesX[0];
-                    sizeValues_1 = (_19 = perSeriesSize[i]) !== null && _19 !== void 0 ? _19 : perSeriesSize[0];
+                    xValues = (_24 = perSeriesX[i]) !== null && _24 !== void 0 ? _24 : perSeriesX[0];
+                    sizeValues_1 = (_25 = perSeriesSize[i]) !== null && _25 !== void 0 ? _25 : 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 } : {})));
-                    _140.label = 6;
+                    _150.label = 6;
                 case 6:
                     i++;
                     return [3 /*break*/, 3];
                 case 7:
-                    sharedXValues = (_20 = perSeriesX[0]) !== null && _20 !== void 0 ? _20 : [];
-                    sharedSizeValues = (_21 = perSeriesSize[0]) !== null && _21 !== void 0 ? _21 : [];
+                    sharedXValues = (_26 = perSeriesX[0]) !== null && _26 !== void 0 ? _26 : [];
+                    sharedSizeValues = (_27 = perSeriesSize[0]) !== null && _27 !== void 0 ? _27 : [];
                     _c = (0, bubble_1.prepareBubbleSeriesData)({
                         xValues: sharedXValues,
                         labelValues: labelValues,
                         sizeValues: sharedSizeValues,
                         series: seriesInputs,
                     }), categories_1 = _c.categories, preparedSeries = _c.series, sizeValues = _c.sizeValues;
-                    sizeScale_1 = (0, bubble_1.createBubbleSizeScale)(sizeValues);
+                    sizeScale_1 = (0, bubble_1.createBubbleSizeScale)(sizeValues, {
+                        sizeRepresents: spec.sizeRepresents,
+                        bubbleScale: spec.bubbleScale,
+                        plotMinSide: Math.min((width !== null && width !== void 0 ? width : 0) * 0.85, (height !== null && height !== void 0 ? height : 0) * 0.75),
+                    });
+                    bubblePalette_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,
+                    ]);
+                    bubbleItemColor_1 = function (seriesEntry, index) {
+                        var e_12, _a;
+                        var _b, _c;
+                        var base = (_b = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color) !== null && _b !== void 0 ? _b : (0, utils_1.chartPaletteColorAt)(bubblePalette_1, index);
+                        var overrides = new Map();
+                        try {
+                            for (var _d = tslib_1.__values((_c = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataPointColors) !== null && _c !== void 0 ? _c : []), _e = _d.next(); !_e.done; _e = _d.next()) {
+                                var dp = _e.value;
+                                if (typeof (dp === null || dp === void 0 ? void 0 : dp.idx) === "number" && typeof (dp === null || dp === void 0 ? void 0 : dp.color) === "string") {
+                                    overrides.set(dp.idx, dp.color);
+                                }
+                            }
+                        }
+                        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                        finally {
+                            try {
+                                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                            }
+                            finally { if (e_12) throw e_12.error; }
+                        }
+                        return overrides.size
+                            ? function (params) { var _a, _b; return (_b = overrides.get((_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.index)) !== null && _b !== void 0 ? _b : base; }
+                            : base;
+                    };
+                    hasBubbleSecondaryAxis = ((_28 = spec.series) !== null && _28 !== void 0 ? _28 : []).some(function (seriesEntry) { return seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.useSecondaryAxis; });
                     xAxisConfig = categories_1.length > 0
                         ? {
                             type: "category",
                             data: categories_1,
-                            name: (_22 = spec.horizontalAxisTitle) !== null && _22 !== void 0 ? _22 : "",
+                            name: (_29 = spec.horizontalAxisTitle) !== null && _29 !== void 0 ? _29 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         }
                         : {
                             type: "value",
-                            name: (_23 = spec.horizontalAxisTitle) !== null && _23 !== void 0 ? _23 : "",
+                            name: (_30 = spec.horizontalAxisTitle) !== null && _30 !== void 0 ? _30 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         };
@@ -595,18 +676,92 @@ var BasicChart = function (_a) {
                         var _a;
                         return (0, overrides_1.buildSeriesLabelOption)((0, overrides_1.resolveSeriesDataLabels)(spec.dataLabels, (_a = spec.series) === null || _a === void 0 ? void 0 : _a[index]), undefined, locale);
                     };
-                    (_24 = chartRef.current) === null || _24 === void 0 ? void 0 : _24.setOption({
+                    bubbleSeries = preparedSeries
+                        .map(function (entry, index) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        var isScatter = spec.chartType === "scatter";
+                        var scatterStyle = (_a = spec.scatterStyle) !== null && _a !== void 0 ? _a : (isScatter ? "lineMarker" : undefined);
+                        var seriesEntry = (_b = spec.series) === null || _b === void 0 ? void 0 : _b[index];
+                        var seriesColor = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color;
+                        var perMarker = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.marker;
+                        var itemColor = bubbleItemColor_1(seriesEntry, index);
+                        var onSecondary = (seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.useSecondaryAxis) ? { yAxisIndex: 1 } : {};
+                        if (isScatter) {
+                            var symbol = perMarker === null || perMarker === void 0 ? void 0 : perMarker.symbol;
+                            var noMarkers = symbol === "none";
+                            var wantsLine = scatterStyle === "line" ||
+                                scatterStyle === "lineMarker" ||
+                                scatterStyle === "smooth" ||
+                                scatterStyle === "smoothMarker";
+                            var wantsMarkers = !noMarkers &&
+                                (scatterStyle === "marker" ||
+                                    scatterStyle === "lineMarker" ||
+                                    scatterStyle === "smoothMarker" ||
+                                    !scatterStyle);
+                            var smooth = scatterStyle === "smooth" || scatterStyle === "smoothMarker";
+                            // Labels hang off the point symbols: a marker-less line keeps
+                            // an invisible 0-size symbol per point when they show (#1049).
+                            var labelsWithoutMarkers = !wantsMarkers &&
+                                Boolean((_c = (0, overrides_1.resolveSeriesDataLabels)(spec.dataLabels, seriesEntry)) === null || _c === void 0 ? void 0 : _c.show);
+                            // The series colour paints the line; the markers take the
+                            // per-point overrides when the series has any.
+                            var markerStyle = seriesColor || typeof itemColor === "function"
+                                ? { itemStyle: { color: itemColor } }
+                                : {};
+                            return wantsLine
+                                ? tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ type: "line", name: entry.name, data: entry.points, showSymbol: wantsMarkers || labelsWithoutMarkers, smooth: smooth, symbol: (_d = (0, helpers_1.mapMarkerSymbolToEcharts)(symbol)) !== null && _d !== void 0 ? _d : "circle", symbolSize: labelsWithoutMarkers ? 0 : (_e = perMarker === null || perMarker === void 0 ? void 0 : perMarker.size) !== null && _e !== void 0 ? _e : 6 }, markerStyle), (seriesColor ? { lineStyle: { color: seriesColor } } : {})), onSecondary) : tslib_1.__assign(tslib_1.__assign({ type: "scatter", name: entry.name, data: entry.points, symbol: (_f = (0, helpers_1.mapMarkerSymbolToEcharts)(symbol)) !== null && _f !== void 0 ? _f : "circle", symbolSize: (_g = perMarker === null || perMarker === void 0 ? void 0 : perMarker.size) !== null && _g !== void 0 ? _g : 6 }, markerStyle), onSecondary);
+                        }
+                        return tslib_1.__assign(tslib_1.__assign({ type: chartType, name: entry.name, data: entry.points, symbolSize: function (data) { var _a; return sizeScale_1((_a = data === null || data === void 0 ? void 0 : data[2]) !== null && _a !== void 0 ? _a : 0); }, label: {
+                                show: true,
+                                formatter: function (params) { var _a; return (_a = params.name) !== null && _a !== void 0 ? _a : ""; },
+                            } }, (seriesColor || typeof itemColor === "function"
+                            ? { itemStyle: { color: itemColor } }
+                            : {})), onSecondary);
+                    })
+                        .map(function (s, index) {
+                        var _a;
+                        var bubbleSeriesLabel = bubbleSeriesLabelFor_1(index);
+                        return bubbleSeriesLabel
+                            ? tslib_1.__assign(tslib_1.__assign({}, s), { label: tslib_1.__assign(tslib_1.__assign({}, ((_a = s.label) !== null && _a !== void 0 ? _a : {})), bubbleSeriesLabel) }) : s;
+                    });
+                    bubbleOverlays = preparedSeries.flatMap(function (entry, index) {
+                        var _a, _b;
+                        var seriesEntry = (_a = spec.series) === null || _a === void 0 ? void 0 : _a[index];
+                        if (!seriesEntry)
+                            return [];
+                        return (0, echarts_overlays_1.buildEchartsOverlaySeries)({
+                            series: seriesEntry,
+                            values: entry.points.map(function (point) { return point.value[1]; }),
+                            xValues: entry.points.map(function (point) { return point.value[0]; }),
+                            dataLabel: entry.name,
+                            seriesColor: (_b = seriesEntry.color) !== null && _b !== void 0 ? _b : (0, utils_1.chartPaletteColorAt)(bubblePalette_1, index),
+                            resolveRange: function (range) {
+                                return getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy);
+                            },
+                        });
+                    });
+                    (_31 = chartRef.current) === null || _31 === void 0 ? void 0 : _31.setOption({
                         xAxis: [
                             (0, overrides_1.applyAxisOverrides)(tslib_1.__assign({}, xAxisConfig), spec.categoryAxisOptions),
                         ],
-                        yAxis: [
+                        yAxis: tslib_1.__spreadArray([
                             (0, overrides_1.applyAxisOverrides)({
                                 type: "value",
-                                name: (_25 = spec.verticalAxisTitle) !== null && _25 !== void 0 ? _25 : "",
+                                name: (_32 = spec.verticalAxisTitle) !== null && _32 !== void 0 ? _32 : "",
                                 nameLocation: "middle",
                                 nameGap: 45,
-                            }, spec.valueAxisOptions, undefined, locale),
-                        ],
+                            }, spec.valueAxisOptions, undefined, locale)
+                        ], tslib_1.__read((hasBubbleSecondaryAxis
+                            ? [
+                                (0, overrides_1.applyAxisOverrides)({
+                                    type: "value",
+                                    position: "right",
+                                    nameLocation: "middle",
+                                    nameGap: 45,
+                                    splitLine: { show: false },
+                                }, spec.secondaryValueAxisOptions, undefined, locale),
+                            ]
+                            : [])), false),
                         legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, legend), { show: preparedSeries.length > 1, data: preparedSeries.map(function (entry) { return entry.name; }) }), spec.legend),
                         grid: {
                             left: "3%",
@@ -618,57 +773,7 @@ var BasicChart = function (_a) {
                             trigger: "item",
                             formatter: tooltipFormatter,
                         },
-                        // Scatter vs bubble — scatter uses small fixed markers
-                        // (optionally connected with a line per scatterStyle); bubble
-                        // applies a size scale on the 3rd dimension. Pre-fix scatter
-                        // routed through the bubble code, producing Y-scaled giant
-                        // circles instead of Excel's small dots.
-                        series: preparedSeries.map(function (entry, index) {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            var isScatter = spec.chartType === "scatter";
-                            var scatterStyle = (_a = spec.scatterStyle) !== null && _a !== void 0 ? _a : (isScatter ? "lineMarker" : undefined);
-                            var seriesEntry = (_b = spec.series) === null || _b === void 0 ? void 0 : _b[index];
-                            var seriesColor = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color;
-                            var perMarker = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.marker;
-                            if (isScatter) {
-                                var symbol = perMarker === null || perMarker === void 0 ? void 0 : perMarker.symbol;
-                                var noMarkers = symbol === "none";
-                                var wantsLine = scatterStyle === "line" ||
-                                    scatterStyle === "lineMarker" ||
-                                    scatterStyle === "smooth" ||
-                                    scatterStyle === "smoothMarker";
-                                var wantsMarkers = !noMarkers &&
-                                    (scatterStyle === "marker" ||
-                                        scatterStyle === "lineMarker" ||
-                                        scatterStyle === "smoothMarker" ||
-                                        !scatterStyle);
-                                var smooth = scatterStyle === "smooth" || scatterStyle === "smoothMarker";
-                                // Labels hang off the point symbols: a marker-less line keeps
-                                // an invisible 0-size symbol per point when they show (#1049).
-                                var labelsWithoutMarkers = !wantsMarkers &&
-                                    Boolean((_c = (0, overrides_1.resolveSeriesDataLabels)(spec.dataLabels, seriesEntry)) === null || _c === void 0 ? void 0 : _c.show);
-                                return wantsLine
-                                    ? tslib_1.__assign({ type: "line", name: entry.name, data: entry.points, showSymbol: wantsMarkers || labelsWithoutMarkers, smooth: smooth, symbol: (_d = (0, helpers_1.mapMarkerSymbolToEcharts)(symbol)) !== null && _d !== void 0 ? _d : "circle", symbolSize: labelsWithoutMarkers
-                                            ? 0
-                                            : (_e = perMarker === null || perMarker === void 0 ? void 0 : perMarker.size) !== null && _e !== void 0 ? _e : 6 }, (seriesColor
-                                        ? {
-                                            itemStyle: { color: seriesColor },
-                                            lineStyle: { color: seriesColor },
-                                        }
-                                        : {})) : tslib_1.__assign({ type: "scatter", name: entry.name, data: entry.points, symbol: (_f = (0, helpers_1.mapMarkerSymbolToEcharts)(symbol)) !== null && _f !== void 0 ? _f : "circle", symbolSize: (_g = perMarker === null || perMarker === void 0 ? void 0 : perMarker.size) !== null && _g !== void 0 ? _g : 6 }, (seriesColor
-                                    ? { itemStyle: { color: seriesColor } }
-                                    : {}));
-                            }
-                            return tslib_1.__assign({ type: chartType, name: entry.name, data: entry.points, symbolSize: function (data) { var _a; return sizeScale_1((_a = data === null || data === void 0 ? void 0 : data[2]) !== null && _a !== void 0 ? _a : 0); }, label: {
-                                    show: true,
-                                    formatter: function (params) { var _a; return (_a = params.name) !== null && _a !== void 0 ? _a : ""; },
-                                } }, (seriesColor ? { itemStyle: { color: seriesColor } } : {}));
-                        }).map(function (s, index) {
-                            var _a;
-                            var bubbleSeriesLabel = bubbleSeriesLabelFor_1(index);
-                            return bubbleSeriesLabel
-                                ? tslib_1.__assign(tslib_1.__assign({}, s), { label: tslib_1.__assign(tslib_1.__assign({}, ((_a = s.label) !== null && _a !== void 0 ? _a : {})), bubbleSeriesLabel) }) : s;
-                        }),
+                        series: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(bubbleSeries), false), tslib_1.__read(bubbleOverlays), false),
                     }, {
                         replaceMerge: [
                             "series",
@@ -680,7 +785,7 @@ var BasicChart = function (_a) {
                         ],
                     });
                     previousChartType.current = spec.chartType;
-                    previousSeriesCount.current = preparedSeries.length;
+                    previousSeriesCount.current = bubbleSeries.length + bubbleOverlays.length;
                     return [2 /*return*/];
                 case 8:
                     if (isHierarchy) {
@@ -695,12 +800,42 @@ var BasicChart = function (_a) {
                             hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                         });
                         hierarchyTitleRef.current = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle;
-                        hierarchyData = (0, hierarchy_1.buildHierarchyTree)(hierarchyRows);
-                        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 : "";
+                        hierarchyPalette = (0, chart_styles_1.getChartPalette)(spec, [
+                            theme.themeColors.accent1,
+                            theme.themeColors.accent2,
+                            theme.themeColors.accent3,
+                            theme.themeColors.accent4,
+                            theme.themeColors.accent5,
+                            theme.themeColors.accent6,
+                        ]);
+                        hierarchyData = colorHierarchyNodes((0, hierarchy_1.buildHierarchyTree)(hierarchyRows), hierarchyPalette);
+                        rootName = hierarchyData.length === 1 ? (_34 = (_33 = hierarchyData[0]) === null || _33 === void 0 ? void 0 : _33.name) !== null && _34 !== void 0 ? _34 : "" : "";
+                        drillDown = Boolean(spec.drillDown);
+                        seriesDisplayName = (_36 = (_35 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _35 !== void 0 ? _35 : rootName) !== null && _36 !== void 0 ? _36 : "";
                         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);
+                        isTreemap = spec.chartType === "treemap";
+                        banner = isTreemap && treemapBannerShown(spec.parentLabelLayout);
+                        levels = buildHierarchyLevels(hierarchyDepth, {
+                            treemap: isTreemap,
+                            banner: banner,
+                        });
+                        hierarchyLegend = (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: false }), spec.legend);
+                        legendShown = hierarchyLegend.show !== false;
+                        categoryLegendSeries = legendShown
+                            ? hierarchyData.map(function (node) {
+                                var _a, _b;
+                                return ({
+                                    type: "bar",
+                                    id: "rnc-hierarchy-legend-".concat((_a = node.id) !== null && _a !== void 0 ? _a : node.name),
+                                    name: node.name,
+                                    data: [],
+                                    silent: true,
+                                    itemStyle: { color: (_b = node.itemStyle) === null || _b === void 0 ? void 0 : _b.color },
+                                    tooltip: { show: false },
+                                });
+                            })
+                            : [];
+                        sizeNumberFormat_1 = (0, axis_number_format_1.resolveSourceNumberFormat)((_38 = (_37 = spec.sizeData) === null || _37 === void 0 ? void 0 : _37[0]) === null || _38 === void 0 ? void 0 : _38.sources, getFormattingFromRange, spec.hiddenDimensionStrategy);
                         tooltipFormatter = function (params) {
                             var _a;
                             var value = Array.isArray(params.value)
@@ -711,7 +846,7 @@ var BasicChart = function (_a) {
                         hierarchyDataLabels = spec.dataLabels;
                         hierarchySeriesLabel = (0, overrides_1.buildSeriesLabelOption)(hierarchyDataLabels && !hierarchyDataLabels.numberFormatPattern
                             ? tslib_1.__assign(tslib_1.__assign({}, hierarchyDataLabels), { numberFormatPattern: sizeNumberFormat_1 }) : hierarchyDataLabels, undefined, locale);
-                        (_32 = chartRef.current) === null || _32 === void 0 ? void 0 : _32.setOption({
+                        (_39 = chartRef.current) === null || _39 === void 0 ? void 0 : _39.setOption({
                             xAxis: [
                                 {
                                     type: "category",
@@ -724,7 +859,7 @@ var BasicChart = function (_a) {
                                     show: false,
                                 },
                             ],
-                            legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: false }), spec.legend),
+                            legend: tslib_1.__assign(tslib_1.__assign({}, hierarchyLegend), { data: hierarchyData.map(function (node) { return node.name; }), selectedMode: false }),
                             grid: {
                                 left: 0,
                                 right: 0,
@@ -735,23 +870,21 @@ var BasicChart = function (_a) {
                                 trigger: "item",
                                 formatter: tooltipFormatter,
                             },
-                            series: [
-                                {
-                                    type: chartType,
-                                    name: seriesDisplayName,
-                                    rootName: rootName || seriesDisplayName || "",
-                                    data: hierarchyData,
-                                    label: tslib_1.__assign({ show: true, formatter: "{b}" }, (hierarchySeriesLabel !== null && hierarchySeriesLabel !== void 0 ? hierarchySeriesLabel : {})),
-                                    upperLabel: spec.chartType === "treemap"
-                                        ? {
-                                            show: true,
-                                            padding: [0, 0, 0, 4],
-                                        }
-                                        : undefined,
-                                    levels: levels,
-                                    colorMappingBy: "index",
-                                },
-                            ],
+                            series: tslib_1.__spreadArray([
+                                tslib_1.__assign({ type: chartType, name: seriesDisplayName, rootName: rootName || seriesDisplayName || "", data: hierarchyData, label: tslib_1.__assign(tslib_1.__assign({ show: true, formatter: "{b}" }, (isTreemap ? { position: "insideBottomLeft" } : {})), (hierarchySeriesLabel !== null && hierarchySeriesLabel !== void 0 ? hierarchySeriesLabel : {})), 
+                                    // Only `levels[1]` (the categories) may carry a banner; see
+                                    // buildHierarchyLevels.
+                                    upperLabel: isTreemap ? { show: false } : undefined, levels: levels, 
+                                    // Excel has no drill-down on either chart: zooming into a
+                                    // branch on click (and the treemap breadcrumb) is opt-in.
+                                    nodeClick: drillDown
+                                        ? spec.chartType === "treemap"
+                                            ? "zoomToNode"
+                                            : "rootToNode"
+                                        : false }, (isTreemap
+                                    ? { breadcrumb: { show: drillDown } }
+                                    : { radius: tslib_1.__spreadArray([], tslib_1.__read(SUNBURST_RADIUS), false) }))
+                            ], tslib_1.__read(categoryLegendSeries), false),
                         }, {
                             replaceMerge: [
                                 "series",
@@ -763,7 +896,7 @@ var BasicChart = function (_a) {
                             ],
                         });
                         previousChartType.current = spec.chartType;
-                        previousSeriesCount.current = 1;
+                        previousSeriesCount.current = 1 + categoryLegendSeries.length;
                         return [2 /*return*/];
                     }
                     else {
@@ -775,7 +908,7 @@ var BasicChart = function (_a) {
                     }
                     isContour = (0, three_d_1.isContourSpec)(spec);
                     if (renderedAsContour.current && !isContour) {
-                        (_33 = chartRef.current) === null || _33 === void 0 ? void 0 : _33.dispose();
+                        (_40 = chartRef.current) === null || _40 === void 0 ? void 0 : _40.dispose();
                         chartRef.current = undefined;
                         renderedAsContour.current = false;
                         previousChartType.current = undefined;
@@ -786,39 +919,39 @@ var BasicChart = function (_a) {
                     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 : ""); });
                     contourSeriesInputs = [];
-                    _140.label = 9;
+                    _150.label = 9;
                 case 9:
-                    _140.trys.push([9, 16, 17, 18]);
-                    _d = tslib_1.__values((_34 = spec.series) !== null && _34 !== void 0 ? _34 : []), _e = _d.next();
-                    _140.label = 10;
+                    _150.trys.push([9, 16, 17, 18]);
+                    _d = tslib_1.__values((_41 = spec.series) !== null && _41 !== void 0 ? _41 : []), _e = _d.next();
+                    _150.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, (_35 = position.sheetId) !== null && _35 !== void 0 ? _35 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_42 = position.sheetId) !== null && _42 !== void 0 ? _42 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                 case 11:
-                    _f = _g.apply(void 0, [_140.sent()]);
+                    _f = _g.apply(void 0, [_150.sent()]);
                     return [3 /*break*/, 13];
                 case 12:
-                    _f = (_36 = seriesEntry.dataLabel) !== null && _36 !== void 0 ? _36 : "";
-                    _140.label = 13;
+                    _f = (_43 = seriesEntry.dataLabel) !== null && _43 !== void 0 ? _43 : "";
+                    _150.label = 13;
                 case 13:
                     dataLabel = _f;
                     values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(sanitizeChartValue);
                     contourSeriesInputs.push({ name: dataLabel, values: values });
-                    _140.label = 14;
+                    _150.label = 14;
                 case 14:
                     _e = _d.next();
                     return [3 /*break*/, 10];
                 case 15: return [3 /*break*/, 18];
                 case 16:
-                    e_1_1 = _140.sent();
+                    e_1_1 = _150.sent();
                     e_1 = { error: e_1_1 };
                     return [3 /*break*/, 18];
                 case 17:
                     try {
-                        if (_e && !_e.done && (_0 = _d.return)) _0.call(_d);
+                        if (_e && !_e.done && (_4 = _d.return)) _4.call(_d);
                     }
                     finally { if (e_1) throw e_1.error; }
                     return [7 /*endfinally*/];
@@ -838,7 +971,7 @@ var BasicChart = function (_a) {
                         chartRef.current = echarts.init(el.current);
                         bindSeriesSelection(chartRef.current);
                     }
-                    (_37 = chartRef.current) === null || _37 === void 0 ? void 0 : _37.setOption({
+                    (_44 = chartRef.current) === null || _44 === void 0 ? void 0 : _44.setOption({
                         tooltip: {
                             textStyle: { fontSize: 12 },
                             trigger: "item",
@@ -858,7 +991,7 @@ var BasicChart = function (_a) {
                                 type: "category",
                                 data: categories_2,
                                 splitArea: { show: true },
-                                name: (_38 = spec.horizontalAxisTitle) !== null && _38 !== void 0 ? _38 : "",
+                                name: (_45 = spec.horizontalAxisTitle) !== null && _45 !== void 0 ? _45 : "",
                                 nameLocation: "middle",
                                 nameGap: 30,
                             }, spec.categoryAxisOptions),
@@ -868,7 +1001,7 @@ var BasicChart = function (_a) {
                                 type: "category",
                                 data: seriesNames_1,
                                 splitArea: { show: true },
-                                name: (_39 = spec.verticalAxisTitle) !== null && _39 !== void 0 ? _39 : "",
+                                name: (_46 = spec.verticalAxisTitle) !== null && _46 !== void 0 ? _46 : "",
                                 nameLocation: "middle",
                                 nameGap: 50,
                             },
@@ -921,39 +1054,39 @@ var BasicChart = function (_a) {
                     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 = [];
-                    _140.label = 20;
+                    _150.label = 20;
                 case 20:
-                    _140.trys.push([20, 27, 28, 29]);
-                    _j = tslib_1.__values((_40 = spec.series) !== null && _40 !== void 0 ? _40 : []), _k = _j.next();
-                    _140.label = 21;
+                    _150.trys.push([20, 27, 28, 29]);
+                    _j = tslib_1.__values((_47 = spec.series) !== null && _47 !== void 0 ? _47 : []), _k = _j.next();
+                    _150.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)];
+                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_48 = position.sheetId) !== null && _48 !== void 0 ? _48 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                 case 22:
-                    _l = _m.apply(void 0, [_140.sent()]);
+                    _l = _m.apply(void 0, [_150.sent()]);
                     return [3 /*break*/, 24];
                 case 23:
-                    _l = (_42 = seriesEntry.dataLabel) !== null && _42 !== void 0 ? _42 : "";
-                    _140.label = 24;
+                    _l = (_49 = seriesEntry.dataLabel) !== null && _49 !== void 0 ? _49 : "";
+                    _150.label = 24;
                 case 24:
                     dataLabel = _l;
                     values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(sanitizeChartValue);
                     threeDSeriesInputs.push({ name: dataLabel, values: values });
-                    _140.label = 25;
+                    _150.label = 25;
                 case 25:
                     _k = _j.next();
                     return [3 /*break*/, 21];
                 case 26: return [3 /*break*/, 29];
                 case 27:
-                    e_2_1 = _140.sent();
+                    e_2_1 = _150.sent();
                     e_2 = { error: e_2_1 };
                     return [3 /*break*/, 29];
                 case 28:
                     try {
-                        if (_k && !_k.done && (_1 = _j.return)) _1.call(_j);
+                        if (_k && !_k.done && (_5 = _j.return)) _5.call(_j);
                     }
                     finally { if (e_2) throw e_2.error; }
                     return [7 /*endfinally*/];
@@ -1027,7 +1160,7 @@ var BasicChart = function (_a) {
                         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);
+                                if (threeDSeriesInputs_1_1 && !threeDSeriesInputs_1_1.done && (_6 = threeDSeriesInputs_1.return)) _6.call(threeDSeriesInputs_1);
                             }
                             finally { if (e_4) throw e_4.error; }
                         }
@@ -1117,12 +1250,12 @@ var BasicChart = function (_a) {
                             inRange: { color: tslib_1.__spreadArray([], tslib_1.__read(three_d_1.SURFACE_COLOR_RAMP), false) },
                         };
                     }
-                    (_43 = chartRef.current) === null || _43 === void 0 ? void 0 : _43.setOption(tslib_1.__assign(tslib_1.__assign({ tooltip: {
+                    (_50 = chartRef.current) === null || _50 === void 0 ? void 0 : _50.setOption(tslib_1.__assign(tslib_1.__assign({ tooltip: {
                             textStyle: { fontSize: 12 },
                             formatter: threeDTooltipFormatter,
                         }, 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: {
+                            : { show: false }, xAxis3D: tslib_1.__assign(tslib_1.__assign({}, xAxis3D), { name: (_51 = spec.horizontalAxisTitle) !== null && _51 !== void 0 ? _51 : "" }), yAxis3D: tslib_1.__assign(tslib_1.__assign({}, yAxis3D), { name: "" }), zAxis3D: { type: "value", name: (_52 = spec.verticalAxisTitle) !== null && _52 !== void 0 ? _52 : "" }, grid3D: {
                             boxDepth: Math.max(20, Math.min(100, seriesNames_2.length * 20)),
                             viewControl: { autoRotate: false },
                         } }, (visualMap ? { visualMap: [visualMap] } : {})), { series: threeDSeries }), {
@@ -1153,7 +1286,7 @@ var BasicChart = function (_a) {
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders);
                         radarSeriesInputs = [];
                         try {
-                            for (_p = tslib_1.__values((_46 = spec.series) !== null && _46 !== void 0 ? _46 : []), _q = _p.next(); !_q.done; _q = _p.next()) {
+                            for (_p = tslib_1.__values((_53 = spec.series) !== null && _53 !== void 0 ? _53 : []), _q = _p.next(); !_q.done; _q = _p.next()) {
                                 seriesEntry = _q.value;
                                 label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                                     ? seriesEntry.dataLabel
@@ -1165,14 +1298,14 @@ var BasicChart = function (_a) {
                         catch (e_5_1) { e_5 = { error: e_5_1 }; }
                         finally {
                             try {
-                                if (_q && !_q.done && (_3 = _p.return)) _3.call(_p);
+                                if (_q && !_q.done && (_7 = _p.return)) _7.call(_p);
                             }
                             finally { if (e_5) throw e_5.error; }
                         }
-                        radarAxisOptions = spec.valueAxisOptions;
-                        indicators_1 = (0, radar_1.buildRadarIndicators)(categories, radarSeriesInputs, radarAxisOptions);
+                        radarAxisOptions_1 = spec.valueAxisOptions;
+                        indicators_1 = (0, radar_1.buildRadarIndicators)(categories, radarSeriesInputs, radarAxisOptions_1);
                         radarData = (0, radar_1.buildRadarSeriesData)(radarSeriesInputs, indicators_1.length);
-                        radarStyle_1 = (_47 = spec.radarStyle) !== null && _47 !== void 0 ? _47 : "standard";
+                        radarStyle_1 = (_54 = spec.radarStyle) !== null && _54 !== void 0 ? _54 : "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; });
                         radarFormats_1 = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
                         radarDataLabels_1 = spec.dataLabels;
@@ -1189,16 +1322,20 @@ var BasicChart = function (_a) {
                             });
                             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({
+                        (_55 = chartRef.current) === null || _55 === void 0 ? void 0 : _55.setOption({
                             radar: {
-                                indicator: indicators_1.length
+                                // The common scale's tick labels along ONE axis, as Excel draws
+                                // them: echarts labels every indicator axis, so each indicator
+                                // carries its own `axisLabel.show` (an indicator's own options win
+                                // over the radar-level ones in echarts' merge) and only the first
+                                // shows (#1066 follow-up); hidden with the spec's value axis.
+                                indicator: (indicators_1.length
                                     ? indicators_1
-                                    : [{ name: "", min: 0, max: 1 }],
-                                // The common scale's tick labels along one axis, as Excel draws
-                                // them (echarts labels the first indicator axis only); hidden
-                                // with the spec's value axis.
+                                    : [{ name: "", min: 0, max: 1 }]).map(function (indicator, index) { return (tslib_1.__assign(tslib_1.__assign({}, indicator), { axisLabel: {
+                                        show: index === 0 && (radarAxisOptions_1 === null || radarAxisOptions_1 === void 0 ? void 0 : radarAxisOptions_1.visible) !== false,
+                                    } })); }),
                                 axisLabel: {
-                                    show: (radarAxisOptions === null || radarAxisOptions === void 0 ? void 0 : radarAxisOptions.visible) !== false,
+                                    show: (radarAxisOptions_1 === null || radarAxisOptions_1 === void 0 ? void 0 : radarAxisOptions_1.visible) !== false,
                                     formatter: function (value) {
                                         return (0, axis_number_format_1.formatAxisValue)(radarFormats_1[0], value, locale);
                                     },
@@ -1241,9 +1378,9 @@ var BasicChart = function (_a) {
                     // V-variants additionally get a volume column sub-pane below the
                     // price plot.
                     if (spec.chartType === "stock") {
-                        variant_1 = ((_49 = spec.stockVariant) !== null && _49 !== void 0 ? _49 : "HLC");
+                        variant_1 = ((_56 = spec.stockVariant) !== null && _56 !== void 0 ? _56 : "HLC");
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesValues = ((_50 = spec.series) !== null && _50 !== void 0 ? _50 : []).map(function (seriesEntry) {
+                        seriesValues = ((_57 = spec.series) !== null && _57 !== void 0 ? _57 : []).map(function (seriesEntry) {
                             return flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
                         });
                         stockFormats_1 = (0, axis_number_format_1.resolveSeriesNumberFormats)(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
@@ -1261,7 +1398,7 @@ var BasicChart = function (_a) {
                         upColor_1 = theme.themeColors.accent1;
                         downColor_1 = theme.themeColors.accent2;
                         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;
+                        hasVolume = ((_58 = volumePoints === null || volumePoints === void 0 ? void 0 : volumePoints.length) !== null && _58 !== void 0 ? _58 : 0) > 0;
                         stockGrid = hasVolume
                             ? [
                                 { left: "10%", right: "4%", top: "8%", height: "56%" },
@@ -1275,7 +1412,7 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_52 = spec.horizontalAxisTitle) !== null && _52 !== void 0 ? _52 : "",
+                            name: (_59 = spec.horizontalAxisTitle) !== null && _59 !== void 0 ? _59 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         }, spec.categoryAxisOptions);
@@ -1317,14 +1454,14 @@ var BasicChart = function (_a) {
                         // (no open) fall through to the line-derived rendering below.
                         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({
+                            (_60 = chartRef.current) === null || _60 === void 0 ? void 0 : _60.setOption({
                                 xAxis: stockXAxis,
                                 yAxis: tslib_1.__spreadArray([
                                     (0, overrides_1.applyAxisOverrides)({
                                         type: "value",
                                         show: true,
                                         scale: true,
-                                        name: (_54 = spec.verticalAxisTitle) !== null && _54 !== void 0 ? _54 : "",
+                                        name: (_61 = spec.verticalAxisTitle) !== null && _61 !== void 0 ? _61 : "",
                                         nameLocation: "middle",
                                         nameGap: 50,
                                         gridIndex: 0,
@@ -1369,13 +1506,13 @@ var BasicChart = function (_a) {
                             theme.themeColors.accent3,
                             theme.themeColors.accent4,
                         ]);
-                        (_55 = chartRef.current) === null || _55 === void 0 ? void 0 : _55.setOption({
+                        (_62 = chartRef.current) === null || _62 === void 0 ? void 0 : _62.setOption({
                             xAxis: stockXAxis,
                             yAxis: tslib_1.__spreadArray([
                                 (0, overrides_1.applyAxisOverrides)({
                                     type: "value",
                                     show: true,
-                                    name: (_56 = spec.verticalAxisTitle) !== null && _56 !== void 0 ? _56 : "",
+                                    name: (_63 = spec.verticalAxisTitle) !== null && _63 !== void 0 ? _63 : "",
                                     nameLocation: "middle",
                                     nameGap: 50,
                                     gridIndex: 0,
@@ -1414,14 +1551,14 @@ var BasicChart = function (_a) {
                     ofPieLayout = null;
                     isHorizontalBarChart = spec.chartType === "bar";
                     shouldAggregate = (0, aggregation_1.shouldAggregateSeries)(spec.series);
-                    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];
+                    primaryDomainSource = (_66 = (_65 = (_64 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _64 === void 0 ? void 0 : _64[0]) === null || _65 === void 0 ? void 0 : _65.sources) === null || _66 === void 0 ? void 0 : _66[0];
                     rawPrimaryDomainValues = primaryDomainSource
-                        ? (0, aggregation_1.sanitizeDomainValues)((_60 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _60 !== void 0 ? _60 : [])
+                        ? (0, aggregation_1.sanitizeDomainValues)((_67 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _67 !== void 0 ? _67 : [])
                         : [];
                     aggregateDomainValues = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
                     categoryLevels = isCircularChart
                         ? undefined
-                        : (0, category_levels_1.resolveCategoryLevels)((_61 = spec.categoryLevels) === null || _61 === void 0 ? void 0 : _61.map(function (level) {
+                        : (0, category_levels_1.resolveCategoryLevels)((_68 = spec.categoryLevels) === null || _68 === void 0 ? void 0 : _68.map(function (level) {
                             return flattenChartDataValues([level], getDomainValuesFromRange, spec.hiddenDimensionStrategy, false);
                         }));
                     if (categoryLevels) {
@@ -1432,15 +1569,15 @@ var BasicChart = function (_a) {
                             axisTick: { show: true },
                             splitLine: { show: true },
                             name: isHorizontalBarChart
-                                ? (_62 = spec.verticalAxisTitle) !== null && _62 !== void 0 ? _62 : ""
-                                : (_63 = spec.horizontalAxisTitle) !== null && _63 !== void 0 ? _63 : "",
+                                ? (_69 = spec.verticalAxisTitle) !== null && _69 !== void 0 ? _69 : ""
+                                : (_70 = spec.horizontalAxisTitle) !== null && _70 !== void 0 ? _70 : "",
                             nameLocation: "middle",
                             nameGap: CATEGORY_AXIS_NAME_GAP + 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) {
+                    (categoryLevels ? [] : (_71 = spec.domains) !== null && _71 !== void 0 ? _71 : []).forEach(function (domain, domainIndex) {
                         var _a, _b;
                         var axisData = domain.sources.flatMap(function (sheetRange, sourceIndex) {
                             var _a;
@@ -1476,15 +1613,14 @@ var BasicChart = function (_a) {
                             splitLine: { show: true },
                             gridIndex: 0,
                             name: isHorizontalBarChart
-                                ? (_65 = spec.verticalAxisTitle) !== null && _65 !== void 0 ? _65 : ""
-                                : (_66 = spec.horizontalAxisTitle) !== null && _66 !== void 0 ? _66 : "",
+                                ? (_72 = spec.verticalAxisTitle) !== null && _72 !== void 0 ? _72 : ""
+                                : (_73 = spec.horizontalAxisTitle) !== null && _73 !== void 0 ? _73 : "",
                             nameLocation: "middle",
                             nameGap: CATEGORY_AXIS_NAME_GAP,
                         });
                     }
                     pushSeriesOverlays = function (series, data, dataLabel) {
-                        var e_10, _a;
-                        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                        var _a;
                         var numericValues = Array.isArray(data)
                             ? data.map(function (v) {
                                 return typeof v === "number"
@@ -1496,135 +1632,21 @@ var BasicChart = function (_a) {
                             : [];
                         if (numericValues.length === 0)
                             return;
-                        var seriesColor = (_b = series.color) !== null && _b !== void 0 ? _b : theme.themeColors.accent1;
-                        var useSecondary = series.useSecondaryAxis ? { yAxisIndex: 1 } : {};
-                        try {
-                            // Trendlines — one overlay line series per spec.
-                            for (var _m = tslib_1.__values((_c = series.trendlines) !== null && _c !== void 0 ? _c : []), _o = _m.next(); !_o.done; _o = _m.next()) {
-                                var tl = _o.value;
-                                var result = (0, trendline_1.computeTrendline)(numericValues, {
-                                    type: tl.type,
-                                    order: tl.order,
-                                    period: tl.period,
-                                    forecastForward: tl.forecastForward,
-                                    forecastBackward: tl.forecastBackward,
-                                });
-                                if (!result || result.points.length < 2)
-                                    continue;
-                                var tlName = (_d = tl.name) !== null && _d !== void 0 ? _d : "".concat(dataLabel ? dataLabel + " " : "").concat((_e = tl.type) !== null && _e !== void 0 ? _e : "linear", " trend");
-                                chartSeries.push(tslib_1.__assign({ type: "line", name: tlName, 
-                                    // Index x lets the trendline overlay the category axis even
-                                    // when forecasting extends beyond the data range.
-                                    data: result.points.map(function (p) { return [p.x, p.y]; }), showSymbol: false, smooth: tl.type === "poly", lineStyle: {
-                                        color: (_f = tl.color) !== null && _f !== void 0 ? _f : seriesColor,
-                                        type: "dashed",
-                                        width: 2,
-                                    }, itemStyle: { color: (_g = tl.color) !== null && _g !== void 0 ? _g : seriesColor }, tooltip: { show: false }, z: 5 }, useSecondary));
-                            }
-                        }
-                        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_10) throw e_10.error; }
-                        }
-                        // Error bars — drawn as a custom series of vertical/horizontal
-                        // whiskers. valueType "custom" reads per-point magnitudes from the
-                        // spec's plus/minus ranges, resolved through the same extractor
-                        // the series values use.
-                        var magnitudes = (0, error_bars_1.computeErrorBars)(numericValues, (0, error_bars_1.resolveCustomErrorBarValues)(series.errorBars, function (range) {
-                            return getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy);
-                        }));
-                        if (magnitudes) {
-                            var direction_1 = (_j = (_h = series.errorBars) === null || _h === void 0 ? void 0 : _h.direction) !== null && _j !== void 0 ? _j : "y";
-                            var noEndCap_1 = (_l = (_k = series.errorBars) === null || _k === void 0 ? void 0 : _k.noEndCap) !== null && _l !== void 0 ? _l : false;
-                            var errorData = numericValues.map(function (v, i) {
-                                var _a, _b;
-                                return [
-                                    i,
-                                    typeof v === "number" ? v : 0,
-                                    (_a = magnitudes.plus[i]) !== null && _a !== void 0 ? _a : 0,
-                                    (_b = magnitudes.minus[i]) !== null && _b !== void 0 ? _b : 0,
-                                ];
-                            });
-                            chartSeries.push(tslib_1.__assign(tslib_1.__assign({ type: "custom", name: "".concat(dataLabel ? dataLabel + " " : "", "error"), data: errorData, z: 6, tooltip: { show: false } }, useSecondary), { renderItem: function (_params, api) {
-                                    var value = api.value(1);
-                                    var plus = api.value(2);
-                                    var minus = api.value(3);
-                                    var capHalf = 5;
-                                    if (direction_1 === "x") {
-                                        var center_1 = api.coord([value, api.value(0)]);
-                                        var hi_1 = api.coord([value + plus, api.value(0)]);
-                                        var lo_1 = api.coord([value - minus, api.value(0)]);
-                                        var children_1 = [
-                                            {
-                                                type: "line",
-                                                shape: { x1: lo_1[0], y1: center_1[1], x2: hi_1[0], y2: center_1[1] },
-                                                style: { stroke: seriesColor, lineWidth: 1 },
-                                            },
-                                        ];
-                                        if (!noEndCap_1) {
-                                            children_1.push({
-                                                type: "line",
-                                                shape: {
-                                                    x1: hi_1[0],
-                                                    y1: center_1[1] - capHalf,
-                                                    x2: hi_1[0],
-                                                    y2: center_1[1] + capHalf,
-                                                },
-                                                style: { stroke: seriesColor, lineWidth: 1 },
-                                            }, {
-                                                type: "line",
-                                                shape: {
-                                                    x1: lo_1[0],
-                                                    y1: center_1[1] - capHalf,
-                                                    x2: lo_1[0],
-                                                    y2: center_1[1] + capHalf,
-                                                },
-                                                style: { stroke: seriesColor, lineWidth: 1 },
-                                            });
-                                        }
-                                        return { type: "group", children: children_1 };
-                                    }
-                                    var center = api.coord([api.value(0), value]);
-                                    var hi = api.coord([api.value(0), value + plus]);
-                                    var lo = api.coord([api.value(0), value - minus]);
-                                    var children = [
-                                        {
-                                            type: "line",
-                                            shape: { x1: center[0], y1: lo[1], x2: center[0], y2: hi[1] },
-                                            style: { stroke: seriesColor, lineWidth: 1 },
-                                        },
-                                    ];
-                                    if (!noEndCap_1) {
-                                        children.push({
-                                            type: "line",
-                                            shape: {
-                                                x1: center[0] - capHalf,
-                                                y1: hi[1],
-                                                x2: center[0] + capHalf,
-                                                y2: hi[1],
-                                            },
-                                            style: { stroke: seriesColor, lineWidth: 1 },
-                                        }, {
-                                            type: "line",
-                                            shape: {
-                                                x1: center[0] - capHalf,
-                                                y1: lo[1],
-                                                x2: center[0] + capHalf,
-                                                y2: lo[1],
-                                            },
-                                            style: { stroke: seriesColor, lineWidth: 1 },
-                                        });
-                                    }
-                                    return { type: "group", children: children };
-                                } }));
-                        }
+                        chartSeries.push.apply(chartSeries, tslib_1.__spreadArray([], tslib_1.__read((0, echarts_overlays_1.buildEchartsOverlaySeries)({
+                            series: series,
+                            values: numericValues,
+                            // A horizontal bar keeps its categories on y (#1061).
+                            horizontal: isHorizontalBarChart,
+                            dataLabel: dataLabel,
+                            seriesColor: (_a = series.color) !== null && _a !== void 0 ? _a : theme.themeColors.accent1,
+                            resolveRange: function (range) {
+                                return getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy);
+                            },
+                        })), false));
                     };
                     sideBySideBarCount = isStacked
                         ? 1
-                        : ((_67 = spec.series) !== null && _67 !== void 0 ? _67 : []).reduce(function (count, s) {
+                        : ((_74 = spec.series) !== null && _74 !== void 0 ? _74 : []).reduce(function (count, s) {
                             var _a;
                             var seriesType = (_a = s.seriesChartType) !== null && _a !== void 0 ? _a : spec.chartType;
                             return seriesType === "bar" || seriesType === "column"
@@ -1648,29 +1670,29 @@ var BasicChart = function (_a) {
                         return (0, utils_1.chartPaletteColorAt)(seriesPalette, index);
                     };
                     _loop_1 = function (specSeriesIndex, series) {
-                        var dataLabel, _141, _142, effectiveChartType, lineLike, domainSources, pieDomainLabels, piePointOffset, data, seriesEchartsType, seriesStyleAttrs, seriesEntry, isBarOrColumn, seriesAny, markerSymbol, wantsMarkers, labelsWithoutMarkers, isolated, marked, isolated_1, isolated_1_1, i, gradientArgs, gradient, overrides_2, _143, _144, dp, fallback_1, overrides_3, _145, _146, dp, positiveColor_1, negativeColor_1;
-                        var e_11, _147, e_12, _148, e_13, _149;
-                        return tslib_1.__generator(this, function (_150) {
-                            switch (_150.label) {
+                        var dataLabel, _151, _152, effectiveChartType, lineLike, domainSources, pieDomainLabels, piePointOffset, data, seriesEchartsType, seriesStyleAttrs, seriesEntry, isBarOrColumn, seriesAny, markerSymbol, wantsMarkers, labelsWithoutMarkers, isolated, marked, isolated_1, isolated_1_1, i, gradientArgs, gradient, overrides_2, _153, _154, dp, fallback_1, overrides_3, _155, _156, dp, positiveColor_1, negativeColor_1;
+                        var e_13, _157, e_14, _158, e_15, _159;
+                        return tslib_1.__generator(this, function (_160) {
+                            switch (_160.label) {
                                 case 0:
                                     if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 2];
-                                    _142 = 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)];
+                                    _152 = chart_spec_utils_1.coerceCalculatedLabel;
+                                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_76 = position.sheetId) !== null && _76 !== void 0 ? _76 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                                 case 1:
-                                    _141 = _142.apply(void 0, [_150.sent()]);
+                                    _151 = _152.apply(void 0, [_160.sent()]);
                                     return [3 /*break*/, 3];
                                 case 2:
-                                    _141 = (_70 = series.dataLabel) !== null && _70 !== void 0 ? _70 : "";
-                                    _150.label = 3;
+                                    _151 = (_77 = series.dataLabel) !== null && _77 !== void 0 ? _77 : "";
+                                    _160.label = 3;
                                 case 3:
-                                    dataLabel = _141;
+                                    dataLabel = _151;
                                     // Label
                                     if (dataLabel) {
-                                        (_71 = legend.data) === null || _71 === void 0 ? void 0 : _71.push(dataLabel);
+                                        (_78 = legend.data) === null || _78 === void 0 ? void 0 : _78.push(dataLabel);
                                     }
-                                    effectiveChartType = (_72 = series.seriesChartType) !== null && _72 !== void 0 ? _72 : spec.chartType;
+                                    effectiveChartType = (_79 = series.seriesChartType) !== null && _79 !== void 0 ? _79 : 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 : [];
+                                    domainSources = (_82 = (_81 = (_80 = spec.domains) === null || _80 === void 0 ? void 0 : _80[0]) === null || _81 === void 0 ? void 0 : _81.sources) !== null && _82 !== void 0 ? _82 : [];
                                     pieDomainLabels = isCircularChart &&
                                         (domainSources.length > 1 || series.sources.length > 1)
                                         ? domainSources.flatMap(function (sheetRange) {
@@ -1702,7 +1724,7 @@ var BasicChart = function (_a) {
                                     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)
+                                        id: (0, series_click_1.chartSeriesId)(specSeriesIndex, 0), name: dataLabel, data: data, stack: isStacked ? "dataLabel" : undefined, smooth: (_83 = spec.smooth) !== null && _83 !== void 0 ? _83 : undefined, radius: (_84 = spec.radius) !== null && _84 !== void 0 ? _84 : (isCircularChart ? [0, "75%"] : undefined) }, ((0, empty_cells_1.connectsAcrossEmptyCells)(spec, lineLike)
                                         ? { connectNulls: true }
                                         : {})), seriesStyleAttrs);
                                     // Plot this series against a secondary value axis. The 2nd
@@ -1727,17 +1749,17 @@ var BasicChart = function (_a) {
                                     }
                                     seriesAny = series;
                                     if (effectiveChartType === "line") {
-                                        markerSymbol = (_78 = seriesAny.marker) === null || _78 === void 0 ? void 0 : _78.symbol;
+                                        markerSymbol = (_85 = seriesAny.marker) === null || _85 === void 0 ? void 0 : _85.symbol;
                                         wantsMarkers = markerSymbol === "none"
                                             ? false
                                             : Boolean(spec.showMarkers) || !(0, utils_1.isNil)(markerSymbol);
                                         labelsWithoutMarkers = !wantsMarkers &&
-                                            Boolean((_79 = (0, overrides_1.resolveSeriesDataLabels)(spec.dataLabels, seriesAny)) === null || _79 === void 0 ? void 0 : _79.show);
+                                            Boolean((_86 = (0, overrides_1.resolveSeriesDataLabels)(spec.dataLabels, seriesAny)) === null || _86 === void 0 ? void 0 : _86.show);
                                         seriesEntry.showSymbol = wantsMarkers || labelsWithoutMarkers;
                                         if (wantsMarkers) {
                                             seriesEntry.symbol =
-                                                (_80 = (0, helpers_1.mapMarkerSymbolToEcharts)(markerSymbol)) !== null && _80 !== void 0 ? _80 : "circle";
-                                            seriesEntry.symbolSize = (_82 = (_81 = seriesAny.marker) === null || _81 === void 0 ? void 0 : _81.size) !== null && _82 !== void 0 ? _82 : 6;
+                                                (_87 = (0, helpers_1.mapMarkerSymbolToEcharts)(markerSymbol)) !== null && _87 !== void 0 ? _87 : "circle";
+                                            seriesEntry.symbolSize = (_89 = (_88 = seriesAny.marker) === null || _88 === void 0 ? void 0 : _88.size) !== null && _89 !== void 0 ? _89 : 6;
                                         }
                                         else {
                                             if (labelsWithoutMarkers) {
@@ -1752,17 +1774,17 @@ var BasicChart = function (_a) {
                                                         seriesEntry.symbol = "none";
                                                     marked = tslib_1.__spreadArray([], tslib_1.__read(data), false);
                                                     try {
-                                                        for (isolated_1 = (e_11 = void 0, tslib_1.__values(isolated)), isolated_1_1 = isolated_1.next(); !isolated_1_1.done; isolated_1_1 = isolated_1.next()) {
+                                                        for (isolated_1 = (e_13 = void 0, tslib_1.__values(isolated)), isolated_1_1 = isolated_1.next(); !isolated_1_1.done; isolated_1_1 = isolated_1.next()) {
                                                             i = isolated_1_1.value;
                                                             marked[i] = { value: marked[i], symbol: "circle", symbolSize: 6 };
                                                         }
                                                     }
-                                                    catch (e_11_1) { e_11 = { error: e_11_1 }; }
+                                                    catch (e_13_1) { e_13 = { error: e_13_1 }; }
                                                     finally {
                                                         try {
-                                                            if (isolated_1_1 && !isolated_1_1.done && (_147 = isolated_1.return)) _147.call(isolated_1);
+                                                            if (isolated_1_1 && !isolated_1_1.done && (_157 = isolated_1.return)) _157.call(isolated_1);
                                                         }
-                                                        finally { if (e_11) throw e_11.error; }
+                                                        finally { if (e_13) throw e_13.error; }
                                                     }
                                                     seriesEntry.data = marked;
                                                 }
@@ -1772,9 +1794,9 @@ var BasicChart = function (_a) {
                                     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({}, ((_83 = seriesEntry.itemStyle) !== null && _83 !== void 0 ? _83 : {})), { color: gradient });
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_90 = seriesEntry.itemStyle) !== null && _90 !== void 0 ? _90 : {})), { color: gradient });
                                         if (effectiveChartType === "area") {
-                                            seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_84 = seriesEntry.areaStyle) !== null && _84 !== void 0 ? _84 : {})), { color: gradient });
+                                            seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_91 = seriesEntry.areaStyle) !== null && _91 !== void 0 ? _91 : {})), { color: gradient });
                                         }
                                     }
                                     else if (seriesAny.noFill) {
@@ -1782,58 +1804,58 @@ var BasicChart = function (_a) {
                                         // 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({}, ((_85 = seriesEntry.itemStyle) !== null && _85 !== void 0 ? _85 : {})), { color: "transparent", borderColor: "transparent" });
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_92 = seriesEntry.itemStyle) !== null && _92 !== void 0 ? _92 : {})), { color: "transparent", borderColor: "transparent" });
                                     }
                                     else if (isBarOrColumn &&
                                         Array.isArray(seriesAny.dataPointColors) &&
                                         seriesAny.dataPointColors.length) {
                                         overrides_2 = new Map();
                                         try {
-                                            for (_143 = (e_12 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _144 = _143.next(); !_144.done; _144 = _143.next()) {
-                                                dp = _144.value;
+                                            for (_153 = (e_14 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _154 = _153.next(); !_154.done; _154 = _153.next()) {
+                                                dp = _154.value;
                                                 if (typeof dp.idx === "number" && typeof dp.color === "string") {
                                                     overrides_2.set(dp.idx, dp.color);
                                                 }
                                             }
                                         }
-                                        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                                        catch (e_14_1) { e_14 = { error: e_14_1 }; }
                                         finally {
                                             try {
-                                                if (_144 && !_144.done && (_148 = _143.return)) _148.call(_143);
+                                                if (_154 && !_154.done && (_158 = _153.return)) _158.call(_153);
                                             }
-                                            finally { if (e_12) throw e_12.error; }
+                                            finally { if (e_14) throw e_14.error; }
                                         }
-                                        fallback_1 = (_86 = series.color) !== null && _86 !== void 0 ? _86 : paletteColorAt(specSeriesIndex);
-                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_87 = seriesEntry.itemStyle) !== null && _87 !== void 0 ? _87 : {})), { color: function (params) { var _a; return (_a = overrides_2.get(params.dataIndex)) !== null && _a !== void 0 ? _a : fallback_1; } });
+                                        fallback_1 = (_93 = series.color) !== null && _93 !== void 0 ? _93 : paletteColorAt(specSeriesIndex);
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_94 = seriesEntry.itemStyle) !== null && _94 !== void 0 ? _94 : {})), { 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 (_145 = (e_13 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _146 = _145.next(); !_146.done; _146 = _145.next()) {
-                                                dp = _146.value;
+                                            for (_155 = (e_15 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _156 = _155.next(); !_156.done; _156 = _155.next()) {
+                                                dp = _156.value;
                                                 if (typeof dp.idx === "number" && typeof dp.color === "string") {
                                                     overrides_3.set(dp.idx, dp.color);
                                                 }
                                             }
                                         }
-                                        catch (e_13_1) { e_13 = { error: e_13_1 }; }
+                                        catch (e_15_1) { e_15 = { error: e_15_1 }; }
                                         finally {
                                             try {
-                                                if (_146 && !_146.done && (_149 = _145.return)) _149.call(_145);
+                                                if (_156 && !_156.done && (_159 = _155.return)) _159.call(_155);
                                             }
-                                            finally { if (e_13) throw e_13.error; }
+                                            finally { if (e_15) throw e_15.error; }
                                         }
-                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_88 = seriesEntry.itemStyle) !== null && _88 !== void 0 ? _88 : {})), { color: function (params) {
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_95 = seriesEntry.itemStyle) !== null && _95 !== void 0 ? _95 : {})), { 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 : paletteColorAt(params.dataIndex);
                                             } });
                                     }
                                     else if (isBarOrColumn && series.invertIfNegative) {
-                                        positiveColor_1 = (_89 = series.color) !== null && _89 !== void 0 ? _89 : paletteColorAt(specSeriesIndex);
-                                        negativeColor_1 = (_90 = series.negativeColor) !== null && _90 !== void 0 ? _90 : "#FF0000";
-                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_91 = seriesEntry.itemStyle) !== null && _91 !== void 0 ? _91 : {})), { color: function (params) {
+                                        positiveColor_1 = (_96 = series.color) !== null && _96 !== void 0 ? _96 : paletteColorAt(specSeriesIndex);
+                                        negativeColor_1 = (_97 = series.negativeColor) !== null && _97 !== void 0 ? _97 : "#FF0000";
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_98 = seriesEntry.itemStyle) !== null && _98 !== void 0 ? _98 : {})), { color: function (params) {
                                                 var _a, _b;
                                                 var value = Array.isArray(params.data)
                                                     ? params.data[1]
@@ -1844,10 +1866,10 @@ var BasicChart = function (_a) {
                                             } });
                                     }
                                     else if (series.color) {
-                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_92 = seriesEntry.itemStyle) !== null && _92 !== void 0 ? _92 : {})), { color: series.color });
-                                        seriesEntry.lineStyle = tslib_1.__assign(tslib_1.__assign({}, ((_93 = seriesEntry.lineStyle) !== null && _93 !== void 0 ? _93 : {})), { color: series.color });
+                                        seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_99 = seriesEntry.itemStyle) !== null && _99 !== void 0 ? _99 : {})), { color: series.color });
+                                        seriesEntry.lineStyle = tslib_1.__assign(tslib_1.__assign({}, ((_100 = seriesEntry.lineStyle) !== null && _100 !== void 0 ? _100 : {})), { color: series.color });
                                         if (effectiveChartType === "area") {
-                                            seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_94 = seriesEntry.areaStyle) !== null && _94 !== void 0 ? _94 : {})), { color: series.color });
+                                            seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_101 = seriesEntry.areaStyle) !== null && _101 !== void 0 ? _101 : {})), { color: series.color });
                                         }
                                     }
                                     chartSeries.push(seriesEntry);
@@ -1856,29 +1878,29 @@ var BasicChart = function (_a) {
                             }
                         });
                     };
-                    _140.label = 31;
+                    _150.label = 31;
                 case 31:
-                    _140.trys.push([31, 36, 37, 38]);
-                    _r = tslib_1.__values(((_68 = spec.series) !== null && _68 !== void 0 ? _68 : []).entries()), _s = _r.next();
-                    _140.label = 32;
+                    _150.trys.push([31, 36, 37, 38]);
+                    _r = tslib_1.__values(((_75 = spec.series) !== null && _75 !== void 0 ? _75 : []).entries()), _s = _r.next();
+                    _150.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:
-                    _140.sent();
-                    _140.label = 34;
+                    _150.sent();
+                    _150.label = 34;
                 case 34:
                     _s = _r.next();
                     return [3 /*break*/, 32];
                 case 35: return [3 /*break*/, 38];
                 case 36:
-                    e_3_1 = _140.sent();
+                    e_3_1 = _150.sent();
                     e_3 = { error: e_3_1 };
                     return [3 /*break*/, 38];
                 case 37:
                     try {
-                        if (_s && !_s.done && (_4 = _r.return)) _4.call(_r);
+                        if (_s && !_s.done && (_8 = _r.return)) _8.call(_r);
                     }
                     finally { if (e_3) throw e_3.error; }
                     return [7 /*endfinally*/];
@@ -1891,7 +1913,7 @@ var BasicChart = function (_a) {
                     }
                     if (isOfPie) {
                         labels = rawPrimaryDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesEntry = (_95 = spec.series) === null || _95 === void 0 ? void 0 : _95[0];
+                        seriesEntry = (_102 = spec.series) === null || _102 === void 0 ? void 0 : _102[0];
                         rawValues = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
                             : [];
@@ -1938,7 +1960,7 @@ var BasicChart = function (_a) {
                         };
                         chartSeries.push({
                             type: "pie",
-                            name: (_96 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _96 !== void 0 ? _96 : "",
+                            name: (_103 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _103 !== void 0 ? _103 : "",
                             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
@@ -1956,7 +1978,7 @@ var BasicChart = function (_a) {
                             if (ofPieType_1 === "pie") {
                                 chartSeries.push({
                                     type: "pie",
-                                    name: (_97 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _97 !== void 0 ? _97 : "",
+                                    name: (_104 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _104 !== void 0 ? _104 : "",
                                     center: ["".concat(SECONDARY_CX_1 * 100, "%"), "".concat(CY_1 * 100, "%")],
                                     radius: [0, "".concat(secondaryRadiusPct_1, "%")],
                                     data: secondary.map(function (s, i) { return ({
@@ -2051,16 +2073,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 = (_100 = (_99 = (_98 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _98 === void 0 ? void 0 : _98[0]) === null || _99 === void 0 ? void 0 : _99.sources) === null || _100 === void 0 ? void 0 : _100[0];
+                        primaryDomainSource_1 = (_107 = (_106 = (_105 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _105 === void 0 ? void 0 : _105[0]) === null || _106 === void 0 ? void 0 : _106.sources) === null || _107 === void 0 ? void 0 : _107[0];
                         rawDomainValues = primaryDomainSource_1
-                            ? (0, aggregation_1.sanitizeDomainValues)((_101 = getDomainValuesFromRange(primaryDomainSource_1, spec.hiddenDimensionStrategy)) !== null && _101 !== void 0 ? _101 : [])
+                            ? (0, aggregation_1.sanitizeDomainValues)((_108 = getDomainValuesFromRange(primaryDomainSource_1, spec.hiddenDimensionStrategy)) !== null && _108 !== void 0 ? _108 : [])
                             : [];
                         labels = rawDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesEntry = (_102 = spec.series) === null || _102 === void 0 ? void 0 : _102[0];
+                        seriesEntry = (_109 = spec.series) === null || _109 === void 0 ? void 0 : _109[0];
                         rawValues_1 = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
                             : [];
-                        totalIndices = new Set((_103 = spec.totalIndices) !== null && _103 !== void 0 ? _103 : []);
+                        totalIndices = new Set((_110 = spec.totalIndices) !== null && _110 !== void 0 ? _110 : []);
                         steps = (0, waterfall_1.computeWaterfall)(rawValues_1, labels, totalIndices);
                         chartDomains.length = 0;
                         chartDomains.push({
@@ -2070,40 +2092,68 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_104 = spec.horizontalAxisTitle) !== null && _104 !== void 0 ? _104 : "",
+                            name: (_111 = spec.horizontalAxisTitle) !== null && _111 !== void 0 ? _111 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         });
                         chartSeries.length = 0;
+                        // The spacer bars are layout only: no labels, no tooltip entry.
                         chartSeries.push({
                             type: "bar",
+                            id: WATERFALL_PLACEHOLDER_ID,
                             stack: "waterfall",
                             itemStyle: { color: "transparent" },
                             emphasis: { itemStyle: { color: "transparent" } },
                             data: steps.map(function (s) { return s.placeholder; }),
                             silent: true,
+                            label: { show: false },
+                            tooltip: { show: false },
                         });
-                        accent_1 = (_105 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color) !== null && _105 !== void 0 ? _105 : theme.themeColors.accent1;
-                        decreaseColor_1 = (_107 = (_106 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.negativeColor) !== null && _106 !== void 0 ? _106 : theme.themeColors.accent2) !== null && _107 !== void 0 ? _107 : accent_1;
-                        totalColor_1 = (_108 = theme.themeColors.accent3) !== null && _108 !== void 0 ? _108 : accent_1;
+                        accent_1 = (_112 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color) !== null && _112 !== void 0 ? _112 : theme.themeColors.accent1;
+                        decreaseColor_1 = (_114 = (_113 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.negativeColor) !== null && _113 !== void 0 ? _113 : theme.themeColors.accent2) !== null && _114 !== void 0 ? _114 : accent_1;
+                        totalColor_1 = (_115 = theme.themeColors.accent3) !== null && _115 !== void 0 ? _115 : accent_1;
+                        pointColors_1 = new Map();
+                        try {
+                            for (_v = tslib_1.__values((_116 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataPointColors) !== null && _116 !== void 0 ? _116 : []), _w = _v.next(); !_w.done; _w = _v.next()) {
+                                dp = _w.value;
+                                if (typeof (dp === null || dp === void 0 ? void 0 : dp.idx) === "number" && typeof (dp === null || dp === void 0 ? void 0 : dp.color) === "string") {
+                                    pointColors_1.set(dp.idx, dp.color);
+                                }
+                            }
+                        }
+                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                        finally {
+                            try {
+                                if (_w && !_w.done && (_9 = _v.return)) _9.call(_v);
+                            }
+                            finally { if (e_6) throw e_6.error; }
+                        }
                         connectors = steps.slice(0, -1).map(function (s, i) { return [
                             { coord: [i, s.cumulative] },
                             { coord: [i + 1, s.cumulative] },
                         ]; });
                         chartSeries.push({
                             type: "bar",
+                            id: (0, series_click_1.chartSeriesId)(0, 0),
                             stack: "waterfall",
-                            name: (_109 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _109 !== void 0 ? _109 : "",
-                            data: steps.map(function (s, i) { return ({
-                                value: s.value,
-                                itemStyle: {
-                                    color: s.isTotal
-                                        ? totalColor_1
-                                        : rawValues_1[i] < 0
-                                            ? decreaseColor_1
-                                            : accent_1,
-                                },
-                            }); }),
+                            name: (_117 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _117 !== void 0 ? _117 : "",
+                            // A bar's height is the step's magnitude; the signed source value
+                            // rides along as `originalValue` so labels and tooltips read
+                            // "-90" for a decrease, like Excel.
+                            data: steps.map(function (s, i) {
+                                var _a;
+                                return ({
+                                    value: s.value,
+                                    originalValue: rawValues_1[i],
+                                    itemStyle: {
+                                        color: (_a = pointColors_1.get(i)) !== null && _a !== void 0 ? _a : (s.isTotal
+                                            ? totalColor_1
+                                            : rawValues_1[i] < 0
+                                                ? decreaseColor_1
+                                                : accent_1),
+                                    },
+                                });
+                            }),
                             markLine: {
                                 silent: true,
                                 symbol: "none",
@@ -2120,29 +2170,68 @@ var BasicChart = function (_a) {
                         legend.data = [];
                     }
                     else if (spec.chartType === "funnel") {
-                        primaryDomainSource_2 = (_112 = (_111 = (_110 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _110 === void 0 ? void 0 : _110[0]) === null || _111 === void 0 ? void 0 : _111.sources) === null || _112 === void 0 ? void 0 : _112[0];
+                        primaryDomainSource_2 = (_120 = (_119 = (_118 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _118 === void 0 ? void 0 : _118[0]) === null || _119 === void 0 ? void 0 : _119.sources) === null || _120 === void 0 ? void 0 : _120[0];
                         rawDomainValues = primaryDomainSource_2
-                            ? (0, aggregation_1.sanitizeDomainValues)((_113 = getDomainValuesFromRange(primaryDomainSource_2, spec.hiddenDimensionStrategy)) !== null && _113 !== void 0 ? _113 : [])
+                            ? (0, aggregation_1.sanitizeDomainValues)((_121 = getDomainValuesFromRange(primaryDomainSource_2, spec.hiddenDimensionStrategy)) !== null && _121 !== void 0 ? _121 : [])
                             : [];
                         labels_1 = rawDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesEntry = (_114 = spec.series) === null || _114 === void 0 ? void 0 : _114[0];
+                        seriesEntry = (_122 = spec.series) === null || _122 === void 0 ? void 0 : _122[0];
                         rawValues = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : 0); })
                             : [];
                         chartDomains.length = 0;
                         chartSeries.length = 0;
-                        chartSeries.push({
-                            type: "funnel",
-                            name: (_115 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _115 !== void 0 ? _115 : "",
-                            data: rawValues.map(function (value, i) {
-                                var _a;
-                                return ({
-                                    name: (_a = labels_1[i]) !== null && _a !== void 0 ? _a : String(i),
-                                    value: value,
-                                });
-                            }),
-                            label: { show: true, position: "inside" },
+                        funnelPalette = (0, chart_styles_1.getChartPalette)(spec, [
+                            theme.themeColors.accent1,
+                            theme.themeColors.accent2,
+                            theme.themeColors.accent3,
+                            theme.themeColors.accent4,
+                            theme.themeColors.accent5,
+                            theme.themeColors.accent6,
+                        ]);
+                        funnelColor_1 = (_123 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color) !== null && _123 !== void 0 ? _123 : (0, utils_1.chartPaletteColorAt)(funnelPalette, 0);
+                        stageColors_1 = new Map();
+                        try {
+                            for (_x = tslib_1.__values((_124 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataPointColors) !== null && _124 !== void 0 ? _124 : []), _y = _x.next(); !_y.done; _y = _x.next()) {
+                                dp = _y.value;
+                                if (typeof (dp === null || dp === void 0 ? void 0 : dp.idx) === "number" && typeof (dp === null || dp === void 0 ? void 0 : dp.color) === "string") {
+                                    stageColors_1.set(dp.idx, dp.color);
+                                }
+                            }
+                        }
+                        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                        finally {
+                            try {
+                                if (_y && !_y.done && (_10 = _x.return)) _10.call(_x);
+                            }
+                            finally { if (e_7) throw e_7.error; }
+                        }
+                        funnelData = rawValues.map(function (value, i) {
+                            var _a;
+                            return ({
+                                name: (_a = labels_1[i]) !== null && _a !== void 0 ? _a : String(i),
+                                value: value,
+                            });
                         });
+                        funnelLayout = {
+                            sort: "none",
+                            left: "22%",
+                            right: "10%",
+                            top: 60,
+                            bottom: 20,
+                        };
+                        chartSeries.push(tslib_1.__assign(tslib_1.__assign({ type: "funnel", id: (0, series_click_1.chartSeriesId)(0, 0), name: (_125 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _125 !== void 0 ? _125 : "", data: funnelData }, funnelLayout), { itemStyle: {
+                                color: function (params) { var _a; return (_a = stageColors_1.get(params.dataIndex)) !== null && _a !== void 0 ? _a : funnelColor_1; },
+                            }, label: {
+                                show: true,
+                                position: "inside",
+                                formatter: function (params) {
+                                    return (0, axis_number_format_1.formatAxisValue)(undefined, params.value, locale);
+                                },
+                            } }));
+                        // The stage names sit to the left of the bars, where Excel's
+                        // category axis puts them: an invisible twin funnel carries them.
+                        chartSeries.push(tslib_1.__assign(tslib_1.__assign({ type: "funnel", id: FUNNEL_NAMES_ID, data: funnelData }, funnelLayout), { silent: true, itemStyle: { color: "transparent", borderWidth: 0 }, emphasis: { disabled: true }, tooltip: { show: false }, label: { show: true, position: "left", formatter: "{b}" }, labelLine: { show: false }, z: 1 }));
                         legend.data = [];
                     }
                     else if (spec.chartType === "boxplot") {
@@ -2154,8 +2243,8 @@ var BasicChart = function (_a) {
                         outlierPoints = [];
                         meanPoints = [];
                         try {
-                            for (_v = tslib_1.__values((_116 = spec.series) !== null && _116 !== void 0 ? _116 : []), _w = _v.next(); !_w.done; _w = _v.next()) {
-                                seriesEntry = _w.value;
+                            for (_z = tslib_1.__values((_126 = spec.series) !== null && _126 !== void 0 ? _126 : []), _0 = _z.next(); !_0.done; _0 = _z.next()) {
+                                seriesEntry = _0.value;
                                 label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                                     ? seriesEntry.dataLabel
                                     : "";
@@ -2169,17 +2258,17 @@ var BasicChart = function (_a) {
                                     boxLabels.push(label);
                                     if (showOutliers === true) {
                                         try {
-                                            for (_x = (e_7 = void 0, tslib_1.__values(summary.outliers)), _y = _x.next(); !_y.done; _y = _x.next()) {
-                                                outlier = _y.value;
+                                            for (_1 = (e_9 = void 0, tslib_1.__values(summary.outliers)), _2 = _1.next(); !_2.done; _2 = _1.next()) {
+                                                outlier = _2.value;
                                                 outlierPoints.push([boxIndex, outlier]);
                                             }
                                         }
-                                        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
                                         finally {
                                             try {
-                                                if (_y && !_y.done && (_6 = _x.return)) _6.call(_x);
+                                                if (_2 && !_2.done && (_12 = _1.return)) _12.call(_1);
                                             }
-                                            finally { if (e_7) throw e_7.error; }
+                                            finally { if (e_9) throw e_9.error; }
                                         }
                                     }
                                     if (showMeanMarker) {
@@ -2188,12 +2277,12 @@ var BasicChart = function (_a) {
                                 }
                             }
                         }
-                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
                         finally {
                             try {
-                                if (_w && !_w.done && (_5 = _v.return)) _5.call(_v);
+                                if (_0 && !_0.done && (_11 = _z.return)) _11.call(_z);
                             }
-                            finally { if (e_6) throw e_6.error; }
+                            finally { if (e_8) throw e_8.error; }
                         }
                         chartDomains.length = 0;
                         chartDomains.push({
@@ -2203,7 +2292,7 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_117 = spec.horizontalAxisTitle) !== null && _117 !== void 0 ? _117 : "",
+                            name: (_127 = spec.horizontalAxisTitle) !== null && _127 !== void 0 ? _127 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         });
@@ -2213,7 +2302,7 @@ var BasicChart = function (_a) {
                             name: "",
                             data: boxStats,
                         };
-                        boxColor = (_119 = (_118 = spec.series) === null || _118 === void 0 ? void 0 : _118[0]) === null || _119 === void 0 ? void 0 : _119.color;
+                        boxColor = (_129 = (_128 = spec.series) === null || _128 === void 0 ? void 0 : _128[0]) === null || _129 === void 0 ? void 0 : _129.color;
                         if (boxColor) {
                             boxSeries.itemStyle = { color: boxColor, borderColor: boxColor };
                         }
@@ -2228,7 +2317,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)); });
-                        _z = (0, histogram_1.binHistogram)(rawValues, spec.binCount), labels = _z.labels, counts = _z.counts;
+                        _3 = (0, histogram_1.binHistogram)(rawValues, spec.binCount), labels = _3.labels, counts = _3.counts;
                         isPareto_1 = (0, histogram_1.isParetoSpec)(spec);
                         cumulativePercents = [];
                         if (isPareto_1) {
@@ -2245,18 +2334,18 @@ var BasicChart = function (_a) {
                             axisLine: { show: true },
                             axisTick: { show: true },
                             splitLine: { show: false },
-                            name: (_120 = spec.horizontalAxisTitle) !== null && _120 !== void 0 ? _120 : "",
+                            name: (_130 = spec.horizontalAxisTitle) !== null && _130 !== void 0 ? _130 : "",
                             nameLocation: "middle",
                             nameGap: 30,
                         });
                         chartSeries.length = 0;
                         histogramSeries = {
                             type: "bar",
-                            name: (_123 = (_122 = (_121 = spec.series) === null || _121 === void 0 ? void 0 : _121[0]) === null || _122 === void 0 ? void 0 : _122.dataLabel) !== null && _123 !== void 0 ? _123 : "",
+                            name: (_133 = (_132 = (_131 = spec.series) === null || _131 === void 0 ? void 0 : _131[0]) === null || _132 === void 0 ? void 0 : _132.dataLabel) !== null && _133 !== void 0 ? _133 : "",
                             data: counts,
                             barCategoryGap: "1%",
                         };
-                        histogramColor = (_125 = (_124 = spec.series) === null || _124 === void 0 ? void 0 : _124[0]) === null || _125 === void 0 ? void 0 : _125.color;
+                        histogramColor = (_135 = (_134 = spec.series) === null || _134 === void 0 ? void 0 : _134[0]) === null || _135 === void 0 ? void 0 : _135.color;
                         if (histogramColor) {
                             histogramSeries.itemStyle = { color: histogramColor };
                         }
@@ -2293,20 +2382,20 @@ var BasicChart = function (_a) {
                     isPareto = spec.chartType === "histogram" && (0, histogram_1.isParetoSpec)(spec);
                     hasSecondaryAxis = !isCircularChart &&
                         !isHorizontalBarChart &&
-                        (((_126 = spec.series) !== null && _126 !== void 0 ? _126 : []).some(function (s) { return s.useSecondaryAxis; }) || isPareto);
+                        (((_136 = spec.series) !== null && _136 !== void 0 ? _136 : []).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: ((_127 = spec.series) !== null && _127 !== void 0 ? _127 : []).filter(function (s) { return !s.useSecondaryAxis; }),
+                            series: ((_137 = spec.series) !== null && _137 !== void 0 ? _137 : []).filter(function (s) { return !s.useSecondaryAxis; }),
                             getFormattingFromRange: getFormattingFromRange,
                             hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                         });
                     secondaryAxisNumberFormat = (0, axis_number_format_1.resolveValueAxisNumberFormat)({
                         axisOptions: spec.secondaryValueAxisOptions,
-                        series: ((_128 = spec.series) !== null && _128 !== void 0 ? _128 : []).filter(function (s) { return s.useSecondaryAxis; }),
+                        series: ((_138 = spec.series) !== null && _138 !== void 0 ? _138 : []).filter(function (s) { return s.useSecondaryAxis; }),
                         getFormattingFromRange: getFormattingFromRange,
                         hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                     });
@@ -2335,17 +2424,17 @@ var BasicChart = function (_a) {
                     finalLegend = (0, overrides_1.applyLegendOverrides)(legend, spec.legend);
                     bottomAxisNameGap = isHorizontalBarChart
                         ? valueAxisBase.nameGap
-                        : Number((_130 = (_129 = chartDomains[0]) === null || _129 === void 0 ? void 0 : _129.nameGap) !== null && _130 !== void 0 ? _130 : CATEGORY_AXIS_NAME_GAP);
+                        : Number((_140 = (_139 = chartDomains[0]) === null || _139 === void 0 ? void 0 : _139.nameGap) !== null && _140 !== void 0 ? _140 : CATEGORY_AXIS_NAME_GAP);
                     legendBand = (0, legend_layout_1.reserveEchartsLegendBand)({
-                        position: (_131 = spec.legend) === null || _131 === void 0 ? void 0 : _131.position,
+                        position: (_141 = spec.legend) === null || _141 === void 0 ? void 0 : _141.position,
                         visible: finalLegend.show !== false,
                         labels: (0, legend_layout_1.legendLabelsFrom)(finalLegend.data, chartSeries.map(function (s) { return s === null || s === void 0 ? void 0 : s.name; })),
-                        legendFontSize: (_136 = (_133 = (_132 = finalLegend.textStyle) === null || _132 === void 0 ? void 0 : _132.fontSize) !== null && _133 !== void 0 ? _133 : (_135 = (_134 = spec.legend) === null || _134 === void 0 ? void 0 : _134.textFormat) === null || _135 === void 0 ? void 0 : _135.fontSize) !== null && _136 !== void 0 ? _136 : 12,
+                        legendFontSize: (_146 = (_143 = (_142 = finalLegend.textStyle) === null || _142 === void 0 ? void 0 : _142.fontSize) !== null && _143 !== void 0 ? _143 : (_145 = (_144 = spec.legend) === null || _144 === void 0 ? void 0 : _144.textFormat) === null || _145 === void 0 ? void 0 : _145.fontSize) !== null && _146 !== void 0 ? _146 : 12,
                         legendItemWidth: defaultLegendConfig.itemWidth,
                         width: width !== null && width !== void 0 ? width : 0,
                         height: height !== null && height !== void 0 ? height : 0,
                         hasTitle: Boolean(title),
-                        titleFontSize: (_138 = (_137 = spec.titleTextFormat) === null || _137 === void 0 ? void 0 : _137.fontSize) !== null && _138 !== void 0 ? _138 : 16,
+                        titleFontSize: (_148 = (_147 = spec.titleTextFormat) === null || _147 === void 0 ? void 0 : _147.fontSize) !== null && _148 !== void 0 ? _148 : 16,
                         hasBottomAxisTitle: !isCircularChart && Boolean(spec.horizontalAxisTitle),
                         bottomAxisNameGap: bottomAxisNameGap,
                         hasLeftAxisTitle: !isCircularChart && Boolean(spec.verticalAxisTitle),
@@ -2418,12 +2507,12 @@ var BasicChart = function (_a) {
                                 }
                             }
                         }
-                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                        catch (e_10_1) { e_10 = { error: e_10_1 }; }
                         finally {
                             try {
-                                if (barSeries_1_1 && !barSeries_1_1.done && (_7 = barSeries_1.return)) _7.call(barSeries_1);
+                                if (barSeries_1_1 && !barSeries_1_1.done && (_13 = barSeries_1.return)) _13.call(barSeries_1);
                             }
-                            finally { if (e_8) throw e_8.error; }
+                            finally { if (e_10) throw e_10.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()) {
@@ -2440,17 +2529,20 @@ var BasicChart = function (_a) {
                                 });
                             }
                         }
-                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                        catch (e_11_1) { e_11 = { error: e_11_1 }; }
                         finally {
                             try {
-                                if (barSeries_2_1 && !barSeries_2_1.done && (_8 = barSeries_2.return)) _8.call(barSeries_2);
+                                if (barSeries_2_1 && !barSeries_2_1.done && (_14 = barSeries_2.return)) _14.call(barSeries_2);
                             }
-                            finally { if (e_9) throw e_9.error; }
+                            finally { if (e_11) throw e_11.error; }
                         }
                     }
                     seriesWithLabels = chartSeries.map(function (s) {
                         var _a, _b, _c, _d, _e, _f, _g, _h;
                         var next = tslib_1.__assign({}, s);
+                        if (DECORATION_SERIES_IDS.has(s === null || s === void 0 ? void 0 : s.id)) {
+                            return next;
+                        }
                         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);
@@ -2466,8 +2558,24 @@ var BasicChart = function (_a) {
                         var seriesTooltipValueFormatter = VALUE_TOOLTIP_SERIES_TYPES.has(s === null || s === void 0 ? void 0 : s.type)
                             ? (0, axis_number_format_1.valueAxisLabelFormatter)(seriesNumberFormatFor(s), locale)
                             : undefined;
-                        if (seriesTooltipValueFormatter && ((_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 : {})), { valueFormatter: seriesTooltipValueFormatter });
+                        // A data item carrying `originalValue` (a waterfall step's signed
+                        // source value, a percent-stacked bar's raw amount) reads as that
+                        // value in the tooltip, like its data label.
+                        var originalValueAt = function (dataIndex) {
+                            var item = Array.isArray(s === null || s === void 0 ? void 0 : s.data) ? s.data[dataIndex] : undefined;
+                            return item !== null && typeof item === "object"
+                                ? item.originalValue
+                                : undefined;
+                        };
+                        var carriesOriginalValues = VALUE_TOOLTIP_SERIES_TYPES.has(s === null || s === void 0 ? void 0 : s.type) &&
+                            Array.isArray(s === null || s === void 0 ? void 0 : s.data) &&
+                            s.data.some(function (item) {
+                                return item !== null && typeof item === "object" && "originalValue" in item;
+                            });
+                        if ((seriesTooltipValueFormatter || carriesOriginalValues) &&
+                            ((_d = s === null || s === void 0 ? void 0 : s.tooltip) === null || _d === void 0 ? void 0 : _d.show) !== false) {
+                            var formatValue_1 = seriesTooltipValueFormatter !== null && seriesTooltipValueFormatter !== void 0 ? seriesTooltipValueFormatter : (function (value) { return (0, axis_number_format_1.formatAxisValue)(undefined, value, locale); });
+                            next.tooltip = tslib_1.__assign(tslib_1.__assign({}, ((_e = s === null || s === void 0 ? void 0 : s.tooltip) !== null && _e !== void 0 ? _e : {})), { valueFormatter: function (value, dataIndex) { var _a; return formatValue_1((_a = originalValueAt(dataIndex)) !== null && _a !== void 0 ? _a : value); } });
                         }
                         if (next.type === "pie") {
                             var pieNumberFormat = seriesNumberFormatFor(s);
@@ -2496,7 +2604,7 @@ var BasicChart = function (_a) {
                         return next;
                     });
                     // Update charts
-                    (_139 = chartRef.current) === null || _139 === void 0 ? void 0 : _139.setOption({
+                    (_149 = chartRef.current) === null || _149 === void 0 ? void 0 : _149.setOption({
                         xAxis: (function () {
                             var _a, _b;
                             if (isOfPie) {