@rowsncolumns/charts 28.1.8 → 28.1.10

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

@@ -354,6 +354,15 @@ var sanitizeChartValue = function (value) {
  * (Excel): every range's points in sequence. A single range passes through
  * untouched so the common path renders exactly as before.
  */
+/**
+ * The plain value array of a series' data. (`"values" in seriesData` is
+ * true for an ARRAY too — `Array.prototype.values` — which handed the
+ * waterfall / funnel / histogram / boxplot branches that method instead
+ * of the numbers.)
+ */
+var seriesValuesOf = function (seriesData) {
+    return Array.isArray(seriesData) ? seriesData : seriesData.values;
+};
 var mergeSeriesData = function (parts) {
     var e_1, _a;
     if (parts.length === 1)
@@ -417,6 +426,11 @@ var BasicChart = function (_a) {
     // The plotted `<div>` plotly hands back on init — what `Plotly.toImage`
     // rasterises for Copy as Picture and the print preview.
     var graphDivRef = (0, react_1.useRef)(null);
+    // Plotly zooms a treemap / sunburst into the clicked branch by default;
+    // Excel has no drill-down, so the click handler cancels it unless the
+    // spec opts in (`drillDown`).
+    var drillDownRef = (0, react_1.useRef)(false);
+    drillDownRef.current = Boolean(spec.drillDown);
     var focusSheet = (0, spreadsheet_1.useFocusSheet)();
     // Excel selects a data series (or one data point) when it is clicked
     // inside the chart and the grid highlights its source cells. The plot
@@ -493,11 +507,11 @@ var BasicChart = function (_a) {
      * Triggers a chart update
      */
     var updateChart = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-        var traces, chartType, position, isBubble, isHierarchy, textColor, bgColor, gridColor, skipHeaders_1, labels, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _a, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _b, categories_1, preparedSeries, sizeValues, sizeScale_1, hasStringX_1, palette_1, isScatter_1, scatterStyle_1, plotlyModeForScatterStyle_1, lineShapeFor_1, traces_1, titleFmt, xAxisFmt, yAxisFmt, legendFmt, bubbleLayout, hierarchyRows, headerTitle, hierarchyData, seriesName, hierarchyTrace, layoutForHierarchy, labels, seriesEntry, rawValues_1, locations_1, z_1, ramp_1, colorscale, geoScope, regionTrace, surfaceToken, categories, surfaceSeriesInputs, _c, _d, seriesEntry, dataLabel, _e, _f, values, e_2_1, seriesNames, surfaceTrace, surfaceLayout, categories, radarStyle, radarTraces, radarInputs, _g, _h, seriesEntry, label, values, radarAxisOptions, indicators, _loop_1, i, radarScale, variant, categories, seriesValues, volumePoints_1, hasVolume, buildVolumeTrace, volumeLayout, priceYAxisDomain, roles, xs_1, candleTrace, lineSeries, stockPalette_1, xs_2, stockTraces, isStacked, isHorizontalBarChart, lineTraceVariant, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, domainData, categoryLevels, multicategoryX, aggregateDomainValues, domainAxisData, secondaryDomainData, categoriesFor, assignCartesianData, themeColorPalette, applyTraceColor, hasSecondaryAxis, hasSecondaryCategoryAxis, valueAxisKey, categoryAxisKey, secondaryValueAxisRef, secondaryCategoryAxisRef, isPareto, isOfPie, ofPieHandled, ofPieExtras, decorateCartesianTrace, domainSources, seriesIndex, _loop_2, _j, _k, series, e_3_1, authoredTitleFmt, isPercentStackedBars, primaryAxisNumberFormat, secondaryAxisNumberFormat, _l, legendOverrides, showlegend, axisFontSize, primaryValues, leftAxisLabelDepth, leftAxisDepth, rightAxisDepth, bottomAxisTitleStandoff, legendBand, newLayout, dlOpts, doughnutSeriesOrder, doughnutRingSet, traceDataLabels, doughnutHole, seriesNumberFormats, traceNumberFormat, piePull, formattedTraces, sortedTraces;
+        var traces, chartType, position, isBubble, isHierarchy, textColor, bgColor, gridColor, skipHeaders_1, labels, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _a, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _b, categories_1, preparedSeries, sizeValues, sizeScale_1, hasStringX_1, hasBubbleSecondaryAxis, palette_1, isScatter_1, scatterStyle_1, plotlyModeForScatterStyle_1, lineShapeFor_1, traces_1, titleFmt, xAxisFmt, yAxisFmt, legendFmt, bubbleLayout, hierarchyRows, headerTitle, hierarchyData_1, seriesName, hierarchyPalette, nodeColors, isSunburst, SUNBURST_ROOT_ID_1, rootTotal, hierarchyTrace, layoutForHierarchy, labels, seriesEntry, rawValues_1, locations_1, z_1, ramp_1, colorscale, geoScope, regionTrace, surfaceToken, categories, surfaceSeriesInputs, _c, _d, seriesEntry, dataLabel, _e, _f, values, e_2_1, seriesNames, surfaceTrace, surfaceLayout, categories, radarStyle, radarTraces, radarInputs, _g, _h, seriesEntry, label, values, radarAxisOptions, indicators, _loop_1, i, radarScale, variant, categories, seriesValues, volumePoints_1, hasVolume, buildVolumeTrace, volumeLayout, priceYAxisDomain, roles, xs_1, candleTrace, lineSeries, stockPalette_1, xs_2, stockTraces, isStacked, isHorizontalBarChart, lineTraceVariant, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, domainData, categoryLevels, multicategoryX, aggregateDomainValues, domainAxisData, secondaryDomainData, categoriesFor, assignCartesianData, themeColorPalette, applyTraceColor, hasSecondaryAxis, hasSecondaryCategoryAxis, valueAxisKey, categoryAxisKey, secondaryValueAxisRef, secondaryCategoryAxisRef, isPareto, isOfPie, ofPieHandled, ofPieExtras, decorateCartesianTrace, domainSources, seriesIndex, _loop_2, _j, _k, series, e_3_1, authoredTitleFmt, isPercentStackedBars, primaryAxisNumberFormat, secondaryAxisNumberFormat, _l, legendOverrides, showlegend, axisFontSize, primaryValues, leftAxisLabelDepth, leftAxisDepth, rightAxisDepth, bottomAxisTitleStandoff, legendBand, newLayout, dlOpts, doughnutSeriesOrder, doughnutRingSet, traceDataLabels, doughnutHole, seriesNumberFormats, traceNumberFormat, piePull, formattedTraces, sortedTraces;
         var e_2, _m, e_4, _o, e_3, _p, _q, _r;
-        var _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76;
-        return tslib_1.__generator(this, function (_77) {
-            switch (_77.label) {
+        var _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81;
+        return tslib_1.__generator(this, function (_82) {
+            switch (_82.label) {
                 case 0:
                     (0, utils_1.debug)("Updating chart", chart);
                     traces = [];
@@ -522,7 +536,7 @@ var BasicChart = function (_a) {
                     });
                     seriesInputs = [];
                     i = 0;
-                    _77.label = 1;
+                    _82.label = 1;
                 case 1:
                     if (!(i < spec.series.length)) return [3 /*break*/, 5];
                     seriesEntry = spec.series[i];
@@ -531,13 +545,13 @@ var BasicChart = function (_a) {
                     _a = chart_spec_utils_1.coerceCalculatedLabel;
                     return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_w = chart.position.sheetId) !== null && _w !== void 0 ? _w : sheetId, chart.position.overlayPosition.anchorCell.rowIndex, chart.position.overlayPosition.anchorCell.columnIndex)];
                 case 2:
-                    resolvedLabel = _a.apply(void 0, [_77.sent()]);
-                    _77.label = 3;
+                    resolvedLabel = _a.apply(void 0, [_82.sent()]);
+                    _82.label = 3;
                 case 3:
                     xValues = (_x = perSeriesX[i]) !== null && _x !== void 0 ? _x : perSeriesX[0];
                     sizeValues_1 = (_y = perSeriesSize[i]) !== null && _y !== void 0 ? _y : perSeriesSize[0];
                     seriesInputs.push(tslib_1.__assign(tslib_1.__assign({ name: resolvedLabel, values: flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1) }, (xValues ? { xValues: xValues } : {})), (sizeValues_1 ? { sizeValues: sizeValues_1 } : {})));
-                    _77.label = 4;
+                    _82.label = 4;
                 case 4:
                     i++;
                     return [3 /*break*/, 1];
@@ -550,8 +564,13 @@ var BasicChart = function (_a) {
                         sizeValues: sharedSizeValues,
                         series: seriesInputs,
                     }), categories_1 = _b.categories, preparedSeries = _b.series, sizeValues = _b.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) - 80, (height !== null && height !== void 0 ? height : 0) - 100),
+                    });
                     hasStringX_1 = categories_1.length > 0;
+                    hasBubbleSecondaryAxis = ((_1 = spec.series) !== null && _1 !== void 0 ? _1 : []).some(function (seriesEntry) { return seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.useSecondaryAxis; });
                     palette_1 = (0, chart_styles_1.getChartPalette)(spec, [
                         theme.themeColors.accent1,
                         theme.themeColors.accent2,
@@ -561,7 +580,7 @@ var BasicChart = function (_a) {
                         theme.themeColors.accent6,
                     ]);
                     isScatter_1 = spec.chartType === "scatter";
-                    scatterStyle_1 = (_1 = spec.scatterStyle) !== null && _1 !== void 0 ? _1 : (isScatter_1 ? "lineMarker" : undefined);
+                    scatterStyle_1 = (_2 = spec.scatterStyle) !== null && _2 !== void 0 ? _2 : (isScatter_1 ? "lineMarker" : undefined);
                     plotlyModeForScatterStyle_1 = function (style) {
                         switch (style) {
                             case "line":
@@ -582,8 +601,10 @@ var BasicChart = function (_a) {
                             ? "spline"
                             : "linear";
                     };
-                    traces_1 = preparedSeries.map(function (entry, index) {
-                        var _a, _b, _c, _d, _e, _f;
+                    traces_1 = [];
+                    preparedSeries.forEach(function (entry, index) {
+                        var e_5, _a, e_6, _b;
+                        var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
                         var xValues = entry.points.map(function (point) {
                             var _a, _b;
                             return hasStringX_1
@@ -591,9 +612,57 @@ var BasicChart = function (_a) {
                                 : point.value[0];
                         });
                         var yValues = entry.points.map(function (point) { return point.value[1]; });
-                        var labelValuesForSeries = entry.points.map(function (point) { return point.name; });
-                        var seriesColor = (_b = (_a = spec.series[index]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : (0, utils_1.chartPaletteColorAt)(palette_1, index);
-                        var perSeriesMarker = (_d = (_c = spec.series[index]) === null || _c === void 0 ? void 0 : _c.marker) !== null && _d !== void 0 ? _d : undefined;
+                        var rawSizes = entry.points.map(function (point) { return point.value[2]; });
+                        var seriesSpec = spec.series[index];
+                        var seriesColor = (_c = seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.color) !== null && _c !== void 0 ? _c : (0, utils_1.chartPaletteColorAt)(palette_1, index);
+                        var perSeriesMarker = (_d = seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.marker) !== null && _d !== void 0 ? _d : undefined;
+                        // Per-point colours (`<c:dPt>`) key on the point's source row
+                        // (`BubbleSeriesPoint.index` — points without a Y are skipped).
+                        var pointColorOverrides = new Map();
+                        try {
+                            for (var _r = tslib_1.__values((_e = seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.dataPointColors) !== null && _e !== void 0 ? _e : []), _s = _r.next(); !_s.done; _s = _r.next()) {
+                                var dp = _s.value;
+                                if (typeof (dp === null || dp === void 0 ? void 0 : dp.idx) === "number" && typeof (dp === null || dp === void 0 ? void 0 : dp.color) === "string") {
+                                    pointColorOverrides.set(dp.idx, dp.color);
+                                }
+                            }
+                        }
+                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        finally {
+                            try {
+                                if (_s && !_s.done && (_a = _r.return)) _a.call(_r);
+                            }
+                            finally { if (e_5) throw e_5.error; }
+                        }
+                        var pointColors = function (base) {
+                            return pointColorOverrides.size
+                                ? entry.points.map(function (point) { var _a; return (_a = pointColorOverrides.get(point.index)) !== null && _a !== void 0 ? _a : base; })
+                                : base;
+                        };
+                        // Hover reads the bubble label and size from `customdata`, leaving
+                        // `text` to the data labels.
+                        var customdata = entry.points.map(function (point) { return [point.name, point.value[2]]; });
+                        var onSecondary = (seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.useSecondaryAxis) ? { yaxis: "y2" } : {};
+                        // This series' data labels: Y value by default, the bubble's size
+                        // with `showBubbleSize`, the bubble label with `showCategoryName`.
+                        var labelOpts = (0, overrides_1.resolveSeriesDataLabels)(spec.dataLabels, seriesSpec);
+                        var labelText = (labelOpts === null || labelOpts === void 0 ? void 0 : labelOpts.show)
+                            ? entry.points.map(function (point) {
+                                return (0, overrides_1.dataLabelFormatter)(labelOpts, locale)({
+                                    value: point.value,
+                                    name: point.name,
+                                    seriesName: entry.name,
+                                    data: point,
+                                });
+                            })
+                            : undefined;
+                        var labelPosition = (labelOpts === null || labelOpts === void 0 ? void 0 : labelOpts.show)
+                            ? (_f = (labelOpts.position && PLOTLY_DLBL_POS_POINT[labelOpts.position])) !== null && _f !== void 0 ? _f : "top center"
+                            : undefined;
+                        var withLabels = function (trace) {
+                            return labelText
+                                ? tslib_1.__assign(tslib_1.__assign({}, trace), { mode: withTextMode(trace.mode), text: labelText, textposition: labelPosition }) : trace;
+                        };
                         if (isScatter_1) {
                             // Per-series marker.symbol = "none" → pure line (no markers).
                             // Per-series marker.size overrides the default. Falls back to
@@ -603,9 +672,9 @@ var BasicChart = function (_a) {
                             var mode = noMarkers
                                 ? "lines"
                                 : plotlyModeForScatterStyle_1(scatterStyle_1);
-                            var markerSize = (_e = perSeriesMarker === null || perSeriesMarker === void 0 ? void 0 : perSeriesMarker.size) !== null && _e !== void 0 ? _e : 6;
-                            var markerColor = (_f = perSeriesMarker === null || perSeriesMarker === void 0 ? void 0 : perSeriesMarker.color) !== null && _f !== void 0 ? _f : seriesColor;
-                            return tslib_1.__assign({ type: "scatter", mode: mode, x: xValues, y: yValues, text: labelValuesForSeries, name: entry.name, hovertemplate: "%{text}<br>X: %{x}<br>Y: %{y}<extra></extra>", line: {
+                            var markerSize = (_g = perSeriesMarker === null || perSeriesMarker === void 0 ? void 0 : perSeriesMarker.size) !== null && _g !== void 0 ? _g : 6;
+                            var markerColor = (_h = perSeriesMarker === null || perSeriesMarker === void 0 ? void 0 : perSeriesMarker.color) !== null && _h !== void 0 ? _h : seriesColor;
+                            traces_1.push(withLabels(tslib_1.__assign(tslib_1.__assign({ type: "scatter", mode: mode, x: xValues, y: yValues, customdata: customdata, name: entry.name, hovertemplate: "%{customdata[0]}<br>X: %{x}<br>Y: %{y}<extra></extra>", line: {
                                     shape: lineShapeFor_1(scatterStyle_1),
                                     color: seriesColor,
                                     width: 2,
@@ -614,71 +683,114 @@ var BasicChart = function (_a) {
                                 : {
                                     marker: {
                                         size: markerSize,
-                                        color: markerColor,
+                                        color: pointColors(markerColor),
                                         symbol: (0, helpers_1.mapMarkerSymbolToPlotly)(symbol),
                                     },
-                                }));
+                                })), onSecondary)));
+                        }
+                        else {
+                            // Bubble — third dimension scaled into marker diameter.
+                            var scaledSizes = rawSizes.map(function (value) { return sizeScale_1(value); });
+                            traces_1.push(withLabels(tslib_1.__assign({ type: "scatter", mode: "markers", x: xValues, y: yValues, customdata: customdata, name: entry.name, hovertemplate: "%{customdata[0]}<br>X: %{x}<br>Y: %{y}<br>Size: %{customdata[1]}<extra></extra>", marker: {
+                                    size: scaledSizes,
+                                    sizemode: "diameter",
+                                    color: pointColors(seriesColor),
+                                    opacity: 0.7,
+                                } }, onSecondary)));
+                        }
+                        // Trendlines on the real (x, y) points — a regression of Y on X,
+                        // not on the point index — and native error bars (#1067).
+                        var numericX = entry.points.map(function (point) { return point.value[0]; });
+                        try {
+                            for (var _t = tslib_1.__values((_j = seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.trendlines) !== null && _j !== void 0 ? _j : []), _u = _t.next(); !_u.done; _u = _t.next()) {
+                                var tl = _u.value;
+                                var result = (0, trendline_1.computeTrendline)(yValues, {
+                                    type: tl.type,
+                                    order: tl.order,
+                                    period: tl.period,
+                                    forecastForward: tl.forecastForward,
+                                    forecastBackward: tl.forecastBackward,
+                                }, numericX);
+                                if (!result || result.points.length < 2)
+                                    continue;
+                                var tlName = (_k = tl.name) !== null && _k !== void 0 ? _k : "".concat(entry.name ? entry.name + " " : "").concat((_l = tl.type) !== null && _l !== void 0 ? _l : "linear", " trend");
+                                traces_1.push(tslib_1.__assign({ type: "scatter", mode: "lines", name: tlName, x: result.points.map(function (p) {
+                                        var _a;
+                                        return hasStringX_1
+                                            ? (_a = categories_1[Math.round(p.x)]) !== null && _a !== void 0 ? _a : p.x
+                                            : p.x;
+                                    }), y: result.points.map(function (p) { return p.y; }), line: { color: (_m = tl.color) !== null && _m !== void 0 ? _m : seriesColor, dash: "dash", width: 2 }, hoverinfo: "skip" }, onSecondary));
+                            }
+                        }
+                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                        finally {
+                            try {
+                                if (_u && !_u.done && (_b = _t.return)) _b.call(_t);
+                            }
+                            finally { if (e_6) throw e_6.error; }
+                        }
+                        if (seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.errorBars) {
+                            var direction = (_o = seriesSpec.errorBars.direction) !== null && _o !== void 0 ? _o : "y";
+                            // An X error bar sizes from the X values (a percentage or
+                            // deviation of X).
+                            var magnitudes_1 = (0, error_bars_1.computeErrorBars)(direction === "x" ? numericX : yValues, (0, error_bars_1.resolveCustomErrorBarValues)(seriesSpec.errorBars, function (range) {
+                                return getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy);
+                            }));
+                            if (magnitudes_1) {
+                                var symmetric = magnitudes_1.plus.every(function (plus, i) { return plus === magnitudes_1.minus[i]; });
+                                var errorConfig = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ type: "data", symmetric: symmetric, array: magnitudes_1.plus }, (symmetric ? {} : { arrayminus: magnitudes_1.minus })), { color: seriesColor }), (seriesSpec.errorBars.noEndCap ? { width: 0 } : {}));
+                                var target = traces_1[traces_1.length - 1 - ((_q = (_p = seriesSpec.trendlines) === null || _p === void 0 ? void 0 : _p.length) !== null && _q !== void 0 ? _q : 0)];
+                                if (target) {
+                                    target[direction === "x" ? "error_x" : "error_y"] = errorConfig;
+                                }
+                            }
                         }
-                        // Bubble — third dimension scaled into marker diameter.
-                        var rawSizes = entry.points.map(function (point) { return point.value[2]; });
-                        var scaledSizes = rawSizes.map(function (value) { return sizeScale_1(value); });
-                        return {
-                            type: "scatter",
-                            mode: "markers",
-                            x: xValues,
-                            y: yValues,
-                            text: labelValuesForSeries,
-                            customdata: rawSizes,
-                            name: entry.name,
-                            hovertemplate: "%{text}<br>X: %{x}<br>Y: %{y}<br>Size: %{customdata}<extra></extra>",
-                            marker: {
-                                size: scaledSizes,
-                                sizemode: "diameter",
-                                color: seriesColor,
-                                opacity: 0.7,
-                            },
-                        };
                     });
                     titleFmt = spec.titleTextFormat;
-                    xAxisFmt = (_2 = spec.categoryAxisOptions) === null || _2 === void 0 ? void 0 : _2.textFormat;
-                    yAxisFmt = (_3 = spec.valueAxisOptions) === null || _3 === void 0 ? void 0 : _3.textFormat;
-                    legendFmt = (_4 = spec.legend) === null || _4 === void 0 ? void 0 : _4.textFormat;
-                    bubbleLayout = {
-                        title: {
+                    xAxisFmt = (_3 = spec.categoryAxisOptions) === null || _3 === void 0 ? void 0 : _3.textFormat;
+                    yAxisFmt = (_4 = spec.valueAxisOptions) === null || _4 === void 0 ? void 0 : _4.textFormat;
+                    legendFmt = (_5 = spec.legend) === null || _5 === void 0 ? void 0 : _5.textFormat;
+                    bubbleLayout = tslib_1.__assign(tslib_1.__assign({ title: {
                             text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
                             font: {
-                                family: (_5 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontFamily) !== null && _5 !== void 0 ? _5 : "Untitled Sans, apple-system, sans-serif",
-                                size: (_6 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontSize) !== null && _6 !== void 0 ? _6 : 16,
-                                color: (_7 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.color) !== null && _7 !== void 0 ? _7 : textColor,
+                                family: (_6 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontFamily) !== null && _6 !== void 0 ? _6 : "Untitled Sans, apple-system, sans-serif",
+                                size: (_7 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontSize) !== null && _7 !== void 0 ? _7 : 16,
+                                color: (_8 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.color) !== null && _8 !== void 0 ? _8 : textColor,
                             },
                             x: 0.02,
                             xanchor: "left",
-                        },
-                        xaxis: {
+                        }, 
+                        // Axis min / max / reverse / log / visibility from the spec
+                        // (`categoryAxisOptions` is the X axis, as in the echarts
+                        // renderer).
+                        xaxis: applyAxisOverridesPlotly({
                             title: {
-                                text: (_8 = spec.horizontalAxisTitle) !== null && _8 !== void 0 ? _8 : "",
-                                font: { color: (_9 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _9 !== void 0 ? _9 : textColor },
+                                text: (_9 = spec.horizontalAxisTitle) !== null && _9 !== void 0 ? _9 : "",
+                                font: { color: (_10 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _10 !== void 0 ? _10 : textColor },
                             },
                             gridcolor: gridColor,
-                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_10 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _10 !== void 0 ? _10 : textColor }, ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontFamily) ? { family: xAxisFmt.fontFamily } : {})), ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontSize) ? { size: xAxisFmt.fontSize } : {})),
+                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_11 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _11 !== void 0 ? _11 : textColor }, ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontFamily) ? { family: xAxisFmt.fontFamily } : {})), ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontSize) ? { size: xAxisFmt.fontSize } : {})),
                             type: hasStringX_1 ? "category" : "linear",
-                        },
-                        yaxis: {
+                        }, spec.categoryAxisOptions), yaxis: applyAxisOverridesPlotly({
                             title: {
-                                text: (_11 = spec.verticalAxisTitle) !== null && _11 !== void 0 ? _11 : "",
-                                font: { color: (_12 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _12 !== void 0 ? _12 : textColor },
+                                text: (_12 = spec.verticalAxisTitle) !== null && _12 !== void 0 ? _12 : "",
+                                font: { color: (_13 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _13 !== void 0 ? _13 : textColor },
                             },
                             gridcolor: gridColor,
-                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_13 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _13 !== void 0 ? _13 : textColor }, ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontFamily) ? { family: yAxisFmt.fontFamily } : {})), ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontSize) ? { size: yAxisFmt.fontSize } : {})),
-                        },
-                        legend: {
-                            font: tslib_1.__assign(tslib_1.__assign({ color: (_14 = legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.color) !== null && _14 !== void 0 ? _14 : textColor }, ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontFamily) ? { family: legendFmt.fontFamily } : {})), ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontSize) ? { size: legendFmt.fontSize } : {})),
-                        },
-                        paper_bgcolor: bgColor,
-                        plot_bgcolor: bgColor,
-                        showlegend: preparedSeries.length > 1,
-                        margin: { l: 60, r: 20, t: 50, b: 50 },
-                    };
+                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_14 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _14 !== void 0 ? _14 : textColor }, ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontFamily) ? { family: yAxisFmt.fontFamily } : {})), ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontSize) ? { size: yAxisFmt.fontSize } : {})),
+                        }, spec.valueAxisOptions) }, (hasBubbleSecondaryAxis
+                        ? {
+                            yaxis2: applyAxisOverridesPlotly({
+                                overlaying: "y",
+                                side: "right",
+                                showgrid: false,
+                                automargin: true,
+                                tickfont: { color: (_15 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _15 !== void 0 ? _15 : textColor },
+                            }, spec.secondaryValueAxisOptions),
+                        }
+                        : {})), { legend: {
+                            font: tslib_1.__assign(tslib_1.__assign({ color: (_16 = legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.color) !== null && _16 !== void 0 ? _16 : textColor }, ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontFamily) ? { family: legendFmt.fontFamily } : {})), ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontSize) ? { size: legendFmt.fontSize } : {})),
+                        }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: preparedSeries.length > 1, margin: { l: 60, r: hasBubbleSecondaryAxis ? 60 : 20, t: 50, b: 50 } });
                     setPlotData(traces_1);
                     setLayout(bubbleLayout);
                     return [2 /*return*/];
@@ -695,19 +807,24 @@ var BasicChart = function (_a) {
                             hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                         });
                         hierarchyTitleRef.current = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle;
-                        hierarchyData = (0, hierarchy_1.toPlotlyHierarchy)(hierarchyRows);
-                        seriesName = hierarchyData.labels.length === 1
-                            ? (_15 = hierarchyData.labels[0]) !== null && _15 !== void 0 ? _15 : ""
-                            : (_16 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _16 !== void 0 ? _16 : "";
-                        hierarchyTrace = {
-                            type: chartType,
-                            labels: hierarchyData.labels,
-                            parents: hierarchyData.parents,
-                            values: hierarchyData.values,
-                            name: seriesName,
-                            textinfo: "label+value",
-                            branchvalues: "total",
-                        };
+                        hierarchyData_1 = (0, hierarchy_1.toPlotlyHierarchy)(hierarchyRows);
+                        seriesName = hierarchyData_1.labels.length === 1
+                            ? (_17 = hierarchyData_1.labels[0]) !== null && _17 !== void 0 ? _17 : ""
+                            : (_18 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _18 !== void 0 ? _18 : "";
+                        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,
+                        ]);
+                        nodeColors = (0, hierarchy_1.hierarchyNodeColors)(hierarchyData_1, hierarchyPalette);
+                        isSunburst = spec.chartType === "sunburst";
+                        SUNBURST_ROOT_ID_1 = "__rnc_sunburst_root__";
+                        rootTotal = hierarchyData_1.values.reduce(function (sum, value, i) { return (hierarchyData_1.parents[i] === "" ? sum + value : sum); }, 0);
+                        hierarchyTrace = tslib_1.__assign({ type: chartType, labels: isSunburst ? tslib_1.__spreadArray([""], tslib_1.__read(hierarchyData_1.labels), false) : hierarchyData_1.labels, ids: isSunburst ? tslib_1.__spreadArray([SUNBURST_ROOT_ID_1], tslib_1.__read(hierarchyData_1.ids), false) : hierarchyData_1.ids, parents: isSunburst
+                                ? tslib_1.__spreadArray([""], tslib_1.__read(hierarchyData_1.parents.map(function (parent) { return parent || SUNBURST_ROOT_ID_1; })), false) : hierarchyData_1.parents, values: isSunburst ? tslib_1.__spreadArray([rootTotal], tslib_1.__read(hierarchyData_1.values), false) : hierarchyData_1.values, marker: tslib_1.__assign({ colors: isSunburst ? tslib_1.__spreadArray(["rgba(0,0,0,0)"], tslib_1.__read(nodeColors), false) : nodeColors }, (isSunburst ? { line: { width: 1 } } : {})), name: seriesName, textinfo: "label+value", branchvalues: "total" }, (isSunburst ? {} : { textposition: "bottom left" }));
                         layoutForHierarchy = {
                             title: {
                                 text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat),
@@ -747,7 +864,7 @@ var BasicChart = function (_a) {
                     // country-name matching and silently skips labels it can't place.
                     if ((0, region_map_1.isRegionMapSpec)(spec)) {
                         labels = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : "").trim(); });
-                        seriesEntry = (_17 = spec.series) === null || _17 === void 0 ? void 0 : _17[0];
+                        seriesEntry = (_19 = spec.series) === null || _19 === void 0 ? void 0 : _19[0];
                         rawValues_1 = seriesEntry
                             ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
                             : [];
@@ -812,34 +929,34 @@ var BasicChart = function (_a) {
                     if (!(surfaceToken === "SURFACE" || surfaceToken === "SURFACE_3D")) return [3 /*break*/, 17];
                     categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
                     surfaceSeriesInputs = [];
-                    _77.label = 7;
+                    _82.label = 7;
                 case 7:
-                    _77.trys.push([7, 14, 15, 16]);
-                    _c = tslib_1.__values((_18 = spec.series) !== null && _18 !== void 0 ? _18 : []), _d = _c.next();
-                    _77.label = 8;
+                    _82.trys.push([7, 14, 15, 16]);
+                    _c = tslib_1.__values((_20 = spec.series) !== null && _20 !== void 0 ? _20 : []), _d = _c.next();
+                    _82.label = 8;
                 case 8:
                     if (!!_d.done) return [3 /*break*/, 13];
                     seriesEntry = _d.value;
                     if (!(!(0, utils_1.isNil)(seriesEntry.dataLabel) && (0, utils_1.isAFormula)(seriesEntry.dataLabel))) return [3 /*break*/, 10];
                     _f = chart_spec_utils_1.coerceCalculatedLabel;
-                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_19 = position.sheetId) !== null && _19 !== void 0 ? _19 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_21 = position.sheetId) !== null && _21 !== void 0 ? _21 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                 case 9:
-                    _e = _f.apply(void 0, [_77.sent()]);
+                    _e = _f.apply(void 0, [_82.sent()]);
                     return [3 /*break*/, 11];
                 case 10:
-                    _e = (_20 = seriesEntry.dataLabel) !== null && _20 !== void 0 ? _20 : "";
-                    _77.label = 11;
+                    _e = (_22 = seriesEntry.dataLabel) !== null && _22 !== void 0 ? _22 : "";
+                    _82.label = 11;
                 case 11:
                     dataLabel = _e;
                     values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
                     surfaceSeriesInputs.push({ name: dataLabel, values: values });
-                    _77.label = 12;
+                    _82.label = 12;
                 case 12:
                     _d = _c.next();
                     return [3 /*break*/, 8];
                 case 13: return [3 /*break*/, 16];
                 case 14:
-                    e_2_1 = _77.sent();
+                    e_2_1 = _82.sent();
                     e_2 = { error: e_2_1 };
                     return [3 /*break*/, 16];
                 case 15:
@@ -867,21 +984,21 @@ var BasicChart = function (_a) {
                         }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: false, margin: { l: 60, r: 20, t: 50, b: 50 } }, (surfaceToken === "SURFACE"
                         ? {
                             xaxis: {
-                                title: { text: (_21 = spec.horizontalAxisTitle) !== null && _21 !== void 0 ? _21 : "" },
+                                title: { text: (_23 = spec.horizontalAxisTitle) !== null && _23 !== void 0 ? _23 : "" },
                                 automargin: true,
                                 color: textColor,
                             },
                             yaxis: {
-                                title: { text: (_22 = spec.verticalAxisTitle) !== null && _22 !== void 0 ? _22 : "" },
+                                title: { text: (_24 = spec.verticalAxisTitle) !== null && _24 !== void 0 ? _24 : "" },
                                 automargin: true,
                                 color: textColor,
                             },
                         }
                         : {
                             scene: {
-                                xaxis: { title: { text: (_23 = spec.horizontalAxisTitle) !== null && _23 !== void 0 ? _23 : "" } },
+                                xaxis: { title: { text: (_25 = spec.horizontalAxisTitle) !== null && _25 !== void 0 ? _25 : "" } },
                                 yaxis: { title: { text: "" } },
-                                zaxis: { title: { text: (_24 = spec.verticalAxisTitle) !== null && _24 !== void 0 ? _24 : "" } },
+                                zaxis: { title: { text: (_26 = spec.verticalAxisTitle) !== null && _26 !== void 0 ? _26 : "" } },
                             },
                         }));
                     setPlotData([surfaceTrace]);
@@ -893,11 +1010,11 @@ var BasicChart = function (_a) {
                     // theta = the category names (closed by appending the first point).
                     if (spec.chartType === "radar") {
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        radarStyle = (_25 = spec.radarStyle) !== null && _25 !== void 0 ? _25 : "standard";
+                        radarStyle = (_27 = spec.radarStyle) !== null && _27 !== void 0 ? _27 : "standard";
                         radarTraces = [];
                         radarInputs = [];
                         try {
-                            for (_g = tslib_1.__values((_26 = spec.series) !== null && _26 !== void 0 ? _26 : []), _h = _g.next(); !_h.done; _h = _g.next()) {
+                            for (_g = tslib_1.__values((_28 = spec.series) !== null && _28 !== void 0 ? _28 : []), _h = _g.next(); !_h.done; _h = _g.next()) {
                                 seriesEntry = _h.value;
                                 label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
                                     ? seriesEntry.dataLabel
@@ -917,7 +1034,7 @@ var BasicChart = function (_a) {
                         indicators = (0, radar_1.buildRadarIndicators)(categories, radarInputs, radarAxisOptions);
                         _loop_1 = function (i) {
                             var input = radarInputs[i];
-                            var seriesColor = (_29 = (_28 = (_27 = spec.series) === null || _27 === void 0 ? void 0 : _27[i]) === null || _28 === void 0 ? void 0 : _28.color) !== null && _29 !== void 0 ? _29 : undefined;
+                            var seriesColor = (_31 = (_30 = (_29 = spec.series) === null || _29 === void 0 ? void 0 : _29[i]) === null || _30 === void 0 ? void 0 : _30.color) !== null && _31 !== void 0 ? _31 : undefined;
                             var r = indicators.map(function (_, idx) { var _a; return (_a = input.values[idx]) !== null && _a !== void 0 ? _a : 0; });
                             var theta = indicators.map(function (ind) { return ind.name; });
                             radarTraces.push(tslib_1.__assign(tslib_1.__assign({ type: "scatterpolar", r: r.length ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(r), false), [r[0]], false) : r, theta: theta.length ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(theta), false), [theta[0]], false) : theta, name: input.name, mode: radarStyle === "standard" ? "lines" : "lines+markers" }, (radarStyle === "filled" ? { fill: "toself" } : {})), (seriesColor ? { line: { color: seriesColor } } : {})));
@@ -925,7 +1042,7 @@ var BasicChart = function (_a) {
                         for (i = 0; i < radarInputs.length; i++) {
                             _loop_1(i);
                         }
-                        radarScale = (_30 = indicators[0]) !== null && _30 !== void 0 ? _30 : { min: 0, max: 1 };
+                        radarScale = (_32 = indicators[0]) !== null && _32 !== void 0 ? _32 : { min: 0, max: 1 };
                         setPlotData(radarTraces);
                         setLayout({
                             title: { text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat) },
@@ -949,13 +1066,13 @@ var BasicChart = function (_a) {
                     // V-variants additionally get a volume column sub-pane below the
                     // price plot.
                     if (spec.chartType === "stock") {
-                        variant = ((_31 = spec.stockVariant) !== null && _31 !== void 0 ? _31 : "HLC");
+                        variant = ((_33 = spec.stockVariant) !== null && _33 !== void 0 ? _33 : "HLC");
                         categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
-                        seriesValues = ((_32 = spec.series) !== null && _32 !== void 0 ? _32 : []).map(function (seriesEntry) {
+                        seriesValues = ((_34 = spec.series) !== null && _34 !== void 0 ? _34 : []).map(function (seriesEntry) {
                             return flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
                         });
                         volumePoints_1 = (0, stock_1.toVolumeSeries)(seriesValues, variant);
-                        hasVolume = ((_33 = volumePoints_1 === null || volumePoints_1 === void 0 ? void 0 : volumePoints_1.length) !== null && _33 !== void 0 ? _33 : 0) > 0;
+                        hasVolume = ((_35 = volumePoints_1 === null || volumePoints_1 === void 0 ? void 0 : volumePoints_1.length) !== null && _35 !== void 0 ? _35 : 0) > 0;
                         buildVolumeTrace = function (xs) {
                             return ({
                                 type: "bar",
@@ -988,25 +1105,25 @@ var BasicChart = function (_a) {
                             roles = (0, stock_1.assignStockRoles)(seriesValues, variant);
                             xs_1 = categories.length > 0
                                 ? categories
-                                : ((_34 = roles.close) !== null && _34 !== void 0 ? _34 : []).map(function (_, i) { return i + 1; });
+                                : ((_36 = roles.close) !== null && _36 !== void 0 ? _36 : []).map(function (_, i) { return i + 1; });
                             candleTrace = {
                                 type: "candlestick",
                                 x: xs_1,
-                                open: ((_35 = roles.open) !== null && _35 !== void 0 ? _35 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                high: ((_36 = roles.high) !== null && _36 !== void 0 ? _36 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                low: ((_37 = roles.low) !== null && _37 !== void 0 ? _37 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
-                                close: ((_38 = roles.close) !== null && _38 !== void 0 ? _38 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                open: ((_37 = roles.open) !== null && _37 !== void 0 ? _37 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                high: ((_38 = roles.high) !== null && _38 !== void 0 ? _38 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                low: ((_39 = roles.low) !== null && _39 !== void 0 ? _39 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                close: ((_40 = roles.close) !== null && _40 !== void 0 ? _40 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
                                 increasing: { line: { color: theme.themeColors.accent1 } },
                                 decreasing: { line: { color: theme.themeColors.accent2 } },
                             };
                             setPlotData(hasVolume ? [candleTrace, buildVolumeTrace(xs_1)] : [candleTrace]);
                             setLayout(tslib_1.__assign(tslib_1.__assign({ title: { text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat) }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: false, xaxis: {
-                                    title: { text: (_39 = spec.horizontalAxisTitle) !== null && _39 !== void 0 ? _39 : "" },
+                                    title: { text: (_41 = spec.horizontalAxisTitle) !== null && _41 !== void 0 ? _41 : "" },
                                     automargin: true,
                                     showgrid: true,
                                     gridcolor: gridColor,
                                     rangeslider: { visible: false },
-                                }, yaxis: tslib_1.__assign({ title: { text: (_40 = spec.verticalAxisTitle) !== null && _40 !== void 0 ? _40 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
+                                }, yaxis: tslib_1.__assign({ title: { text: (_42 = spec.verticalAxisTitle) !== null && _42 !== void 0 ? _42 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
                             return [2 /*return*/];
                         }
                         lineSeries = (0, stock_1.toLineSeries)(seriesValues, variant);
@@ -1018,7 +1135,7 @@ var BasicChart = function (_a) {
                         ]);
                         xs_2 = categories.length > 0
                             ? categories
-                            : ((_42 = (_41 = lineSeries[0]) === null || _41 === void 0 ? void 0 : _41.values) !== null && _42 !== void 0 ? _42 : []).map(function (_, i) { return i + 1; });
+                            : ((_44 = (_43 = lineSeries[0]) === null || _43 === void 0 ? void 0 : _43.values) !== null && _44 !== void 0 ? _44 : []).map(function (_, i) { return i + 1; });
                         stockTraces = lineSeries.map(function (s, i) { return ({
                             type: "scatter",
                             mode: "lines",
@@ -1029,11 +1146,11 @@ var BasicChart = function (_a) {
                         }); });
                         setPlotData(hasVolume ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(stockTraces), false), [buildVolumeTrace(xs_2)], false) : stockTraces);
                         setLayout(tslib_1.__assign(tslib_1.__assign({ title: { text: (0, plotly_title_1.plotlyTitleText)(title, spec.titleTextFormat) }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: stockTraces.length > 1, xaxis: {
-                                title: { text: (_43 = spec.horizontalAxisTitle) !== null && _43 !== void 0 ? _43 : "" },
+                                title: { text: (_45 = spec.horizontalAxisTitle) !== null && _45 !== void 0 ? _45 : "" },
                                 automargin: true,
                                 showgrid: true,
                                 gridcolor: gridColor,
-                            }, yaxis: tslib_1.__assign({ title: { text: (_44 = spec.verticalAxisTitle) !== null && _44 !== void 0 ? _44 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
+                            }, yaxis: tslib_1.__assign({ title: { text: (_46 = spec.verticalAxisTitle) !== null && _46 !== void 0 ? _46 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
                         return [2 /*return*/];
                     }
                     isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
@@ -1080,12 +1197,12 @@ var BasicChart = function (_a) {
                         return extra;
                     };
                     shouldAggregate = (0, aggregation_1.shouldAggregateSeries)(spec.series);
-                    primaryDomainSource = (_47 = (_46 = (_45 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _45 === void 0 ? void 0 : _45[0]) === null || _46 === void 0 ? void 0 : _46.sources) === null || _47 === void 0 ? void 0 : _47[0];
+                    primaryDomainSource = (_49 = (_48 = (_47 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _47 === void 0 ? void 0 : _47[0]) === null || _48 === void 0 ? void 0 : _48.sources) === null || _49 === void 0 ? void 0 : _49[0];
                     rawPrimaryDomainValues = primaryDomainSource
-                        ? (0, aggregation_1.sanitizeDomainValues)((_48 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _48 !== void 0 ? _48 : [])
+                        ? (0, aggregation_1.sanitizeDomainValues)((_50 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _50 !== void 0 ? _50 : [])
                         : [];
                     domainData = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
-                    categoryLevels = (0, category_levels_1.resolveCategoryLevels)((_49 = spec.categoryLevels) === null || _49 === void 0 ? void 0 : _49.map(function (level) {
+                    categoryLevels = (0, category_levels_1.resolveCategoryLevels)((_51 = spec.categoryLevels) === null || _51 === void 0 ? void 0 : _51.map(function (level) {
                         return flattenChartDataValues([level], getDomainValuesFromRange, spec.hiddenDimensionStrategy, false);
                     }));
                     multicategoryX = categoryLevels
@@ -1095,7 +1212,7 @@ var BasicChart = function (_a) {
                         domainData = categoryLevels.leaf;
                     }
                     aggregateDomainValues = domainData;
-                    domainAxisData = (categoryLevels ? [] : (_50 = spec.domains) !== null && _50 !== void 0 ? _50 : []).map(function (domain, domainIndex) {
+                    domainAxisData = (categoryLevels ? [] : (_52 = spec.domains) !== null && _52 !== void 0 ? _52 : []).map(function (domain, domainIndex) {
                         return domain.sources.flatMap(function (sheetRange, sourceIndex) {
                             var _a;
                             if (domainIndex === 0 && sourceIndex === 0) {
@@ -1139,7 +1256,7 @@ var BasicChart = function (_a) {
                         theme.themeColors.accent6,
                     ]);
                     applyTraceColor = function (trace, seriesColor, options) {
-                        var e_5, _a;
+                        var e_7, _a;
                         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
                         var target = trace;
                         var chartTypeForStyling = (_b = options === null || options === void 0 ? void 0 : options.effectiveChartType) !== null && _b !== void 0 ? _b : spec.chartType;
@@ -1161,7 +1278,8 @@ var BasicChart = function (_a) {
                         // by category index, falling back to the series color for points
                         // without an override.
                         var isPie = chartTypeForStyling === "pie";
-                        if ((isBarOrColumn || isPie) &&
+                        var isFunnel = chartTypeForStyling === "funnel";
+                        if ((isBarOrColumn || isPie || isFunnel) &&
                             Array.isArray(options === null || options === void 0 ? void 0 : options.dataPointColors) &&
                             (options === null || options === void 0 ? void 0 : options.dataPointColors.length)) {
                             var overrides_2 = new Map();
@@ -1173,12 +1291,12 @@ var BasicChart = function (_a) {
                                     }
                                 }
                             }
-                            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                            catch (e_7_1) { e_7 = { error: e_7_1 }; }
                             finally {
                                 try {
                                     if (_v && !_v.done && (_a = _u.return)) _a.call(_u);
                                 }
-                                finally { if (e_5) throw e_5.error; }
+                                finally { if (e_7) throw e_7.error; }
                             }
                             if (isPie) {
                                 // Per-slice colours (`<c:dPt>`): an authored slice colour wins,
@@ -1264,7 +1382,7 @@ var BasicChart = function (_a) {
                     ofPieHandled = false;
                     ofPieExtras = null;
                     decorateCartesianTrace = function (trace, series, values, dataLabel) {
-                        var e_6, _a;
+                        var e_8, _a;
                         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                         var target = trace;
                         // Secondary value axis. Plotly overlays a second value axis ("y2",
@@ -1343,37 +1461,37 @@ var BasicChart = function (_a) {
                                 _loop_3(tl);
                             }
                         }
-                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
                         finally {
                             try {
                                 if (_o && !_o.done && (_a = _m.return)) _a.call(_m);
                             }
-                            finally { if (e_6) throw e_6.error; }
+                            finally { if (e_8) throw e_8.error; }
                         }
                     };
-                    domainSources = (_53 = (_52 = (_51 = spec.domains) === null || _51 === void 0 ? void 0 : _51[0]) === null || _52 === void 0 ? void 0 : _52.sources) !== null && _53 !== void 0 ? _53 : [];
+                    domainSources = (_55 = (_54 = (_53 = spec.domains) === null || _53 === void 0 ? void 0 : _53[0]) === null || _54 === void 0 ? void 0 : _54.sources) !== null && _55 !== void 0 ? _55 : [];
                     seriesIndex = 0;
                     _loop_2 = function (series) {
-                        var currentSeriesIndex, dataLabel, _78, _79, effectiveChartType, lineLike, pieDomainLabels, piePointOffset, seriesData, seriesPlotlyType, seriesTraceStyle, rawValues, binCount, _80, labels, counts, cumulativePercents, barTrace, trace, rawValues, quartileMethod, showOutliers, showMeanMarker, usePrecomputed, trace, summary, hideOutliers, rawValues, totalIndices_1, trace, rawValues, trace, pieData, _81, main_1, secondary, otherTotal, total, ofPieType, secondScale, halfAngle, paletteAt_1, MAIN_DOMAIN_X, CY, SECONDARY_CX, BAR_LEFT, BAR_RIGHT, plotW, plotH, hasGeometry, r, r2, clampFrac, rx2, ry2, barHalf, shapes, connectorColor, mainCx, px, pyTop, pyBottom, tx, half, line, pieData, trace, _82, x, y, orientation_1, trace, numericValues, _83, x, y, orientation_2, trace;
-                        return tslib_1.__generator(this, function (_84) {
-                            switch (_84.label) {
+                        var currentSeriesIndex, dataLabel, _83, _84, effectiveChartType, lineLike, pieDomainLabels, piePointOffset, seriesData, seriesPlotlyType, seriesTraceStyle, rawValues, binCount, _85, labels, counts, cumulativePercents, barTrace, trace, rawValues, quartileMethod, showOutliers, showMeanMarker, usePrecomputed, trace, summary, hideOutliers, rawValues, totalIndices_1, increaseColor, trace, rawValues, trace, pieData, _86, main_1, secondary, otherTotal, total, ofPieType, secondScale, halfAngle, paletteAt_1, MAIN_DOMAIN_X, CY, SECONDARY_CX, BAR_LEFT, BAR_RIGHT, plotW, plotH, hasGeometry, r, r2, clampFrac, rx2, ry2, barHalf, shapes, connectorColor, mainCx, px, pyTop, pyBottom, tx, half, line, pieData, trace, _87, x, y, orientation_1, trace, numericValues, _88, x, y, orientation_2, trace;
+                        return tslib_1.__generator(this, function (_89) {
+                            switch (_89.label) {
                                 case 0:
                                     currentSeriesIndex = seriesIndex++;
                                     if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 2];
-                                    _79 = chart_spec_utils_1.coerceCalculatedLabel;
-                                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_55 = position.sheetId) !== null && _55 !== void 0 ? _55 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                                    _84 = chart_spec_utils_1.coerceCalculatedLabel;
+                                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_57 = position.sheetId) !== null && _57 !== void 0 ? _57 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
                                 case 1:
-                                    _78 = _79.apply(void 0, [_84.sent()]);
+                                    _83 = _84.apply(void 0, [_89.sent()]);
                                     return [3 /*break*/, 3];
                                 case 2:
-                                    _78 = (_56 = series.dataLabel) !== null && _56 !== void 0 ? _56 : "";
-                                    _84.label = 3;
+                                    _83 = (_58 = series.dataLabel) !== null && _58 !== void 0 ? _58 : "";
+                                    _89.label = 3;
                                 case 3:
-                                    dataLabel = _78;
+                                    dataLabel = _83;
                                     // A series with no ranges draws nothing.
                                     if (series.sources.length === 0)
                                         return [2 /*return*/, "continue"];
-                                    effectiveChartType = (_57 = series.seriesChartType) !== null && _57 !== void 0 ? _57 : spec.chartType;
+                                    effectiveChartType = (_59 = series.seriesChartType) !== null && _59 !== void 0 ? _59 : spec.chartType;
                                     lineLike = (0, empty_cells_1.isLineLikeChartType)(effectiveChartType);
                                     pieDomainLabels = (spec.chartType === "pie" || spec.chartType === "doughnut") &&
                                         (domainSources.length > 1 || series.sources.length > 1)
@@ -1406,19 +1524,17 @@ var BasicChart = function (_a) {
                                         ? { connectgaps: true }
                                         : {}));
                                     if (effectiveChartType === "histogram") {
-                                        rawValues = "values" in seriesData
-                                            ? seriesData.values
-                                            : seriesData;
+                                        rawValues = seriesValuesOf(seriesData);
                                         binCount = spec.binCount;
                                         if (isPareto) {
-                                            _80 = (0, histogram_1.computePareto)((0, histogram_1.binHistogram)(rawValues, binCount)), labels = _80.labels, counts = _80.counts, cumulativePercents = _80.cumulativePercents;
+                                            _85 = (0, histogram_1.computePareto)((0, histogram_1.binHistogram)(rawValues, binCount)), labels = _85.labels, counts = _85.counts, cumulativePercents = _85.cumulativePercents;
                                             barTrace = {
                                                 type: "bar",
                                                 x: labels,
                                                 y: counts,
                                                 name: dataLabel,
                                             };
-                                            applyTraceColor(barTrace, (_58 = series.color) !== null && _58 !== void 0 ? _58 : undefined, {
+                                            applyTraceColor(barTrace, (_60 = series.color) !== null && _60 !== void 0 ? _60 : undefined, {
                                                 noFill: series.noFill,
                                                 dataPointColors: series.dataPointColors,
                                                 seriesIndex: currentSeriesIndex,
@@ -1439,7 +1555,7 @@ var BasicChart = function (_a) {
                                             trace = tslib_1.__assign({ type: "histogram", x: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }), name: dataLabel }, (typeof binCount === "number" && binCount > 0
                                                 ? { nbinsx: binCount }
                                                 : {}));
-                                            applyTraceColor(trace, (_59 = series.color) !== null && _59 !== void 0 ? _59 : undefined, {
+                                            applyTraceColor(trace, (_61 = series.color) !== null && _61 !== void 0 ? _61 : undefined, {
                                                 noFill: series.noFill,
                                                 dataPointColors: series.dataPointColors,
                                                 seriesIndex: currentSeriesIndex,
@@ -1449,9 +1565,7 @@ var BasicChart = function (_a) {
                                         }
                                     }
                                     else if (effectiveChartType === "boxplot") {
-                                        rawValues = "values" in seriesData
-                                            ? seriesData.values
-                                            : seriesData;
+                                        rawValues = seriesValuesOf(seriesData);
                                         quartileMethod = spec.quartileMethod;
                                         showOutliers = spec.showOutliers;
                                         showMeanMarker = spec.showMeanMarker === true;
@@ -1489,7 +1603,7 @@ var BasicChart = function (_a) {
                                                 // default and `showOutliers: true` alike).
                                                 boxpoints: "outliers" }, (showMeanMarker ? { boxmean: true } : {}));
                                         }
-                                        applyTraceColor(trace, (_60 = series.color) !== null && _60 !== void 0 ? _60 : undefined, {
+                                        applyTraceColor(trace, (_62 = series.color) !== null && _62 !== void 0 ? _62 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             seriesIndex: currentSeriesIndex,
@@ -1498,10 +1612,9 @@ var BasicChart = function (_a) {
                                         traces.push(trace);
                                     }
                                     else if (effectiveChartType === "waterfall") {
-                                        rawValues = "values" in seriesData
-                                            ? seriesData.values
-                                            : seriesData;
-                                        totalIndices_1 = new Set((_61 = spec.totalIndices) !== null && _61 !== void 0 ? _61 : []);
+                                        rawValues = seriesValuesOf(seriesData);
+                                        totalIndices_1 = new Set((_63 = spec.totalIndices) !== null && _63 !== void 0 ? _63 : []);
+                                        increaseColor = (_64 = series.color) !== null && _64 !== void 0 ? _64 : (0, utils_1.chartPaletteColorAt)(themeColorPalette, currentSeriesIndex);
                                         trace = {
                                             type: "waterfall",
                                             x: categoriesFor(series),
@@ -1510,26 +1623,33 @@ var BasicChart = function (_a) {
                                                 return totalIndices_1.has(i) ? "total" : "relative";
                                             }),
                                             name: dataLabel,
+                                            increasing: { marker: { color: increaseColor } },
+                                            decreasing: {
+                                                marker: {
+                                                    color: (_66 = (_65 = series.negativeColor) !== null && _65 !== void 0 ? _65 : theme.themeColors.accent2) !== null && _66 !== void 0 ? _66 : increaseColor,
+                                                },
+                                            },
+                                            totals: { marker: { color: (_67 = theme.themeColors.accent3) !== null && _67 !== void 0 ? _67 : increaseColor } },
+                                            connector: {
+                                                line: {
+                                                    color: isDarkMode ? "rgba(255,255,255,0.45)" : "#999999",
+                                                    width: 1,
+                                                },
+                                            },
                                         };
-                                        applyTraceColor(trace, (_62 = series.color) !== null && _62 !== void 0 ? _62 : undefined, {
-                                            noFill: series.noFill,
-                                            dataPointColors: series.dataPointColors,
-                                            seriesIndex: currentSeriesIndex,
-                                            effectiveChartType: effectiveChartType,
-                                        });
                                         traces.push(trace);
                                     }
                                     else if (effectiveChartType === "funnel") {
-                                        rawValues = "values" in seriesData
-                                            ? seriesData.values
-                                            : seriesData;
+                                        rawValues = seriesValuesOf(seriesData);
                                         trace = {
                                             type: "funnel",
+                                            orientation: "h",
                                             y: categoriesFor(series),
                                             x: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
                                             name: dataLabel,
+                                            textinfo: "none",
                                         };
-                                        applyTraceColor(trace, (_63 = series.color) !== null && _63 !== void 0 ? _63 : undefined, {
+                                        applyTraceColor(trace, (_68 = series.color) !== null && _68 !== void 0 ? _68 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             seriesIndex: currentSeriesIndex,
@@ -1547,10 +1667,10 @@ var BasicChart = function (_a) {
                                             return [2 /*return*/, "continue"];
                                         ofPieHandled = true;
                                         pieData = seriesData;
-                                        _81 = (0, of_pie_1.splitOfPie)(pieData.values, pieData.labels, {
+                                        _86 = (0, of_pie_1.splitOfPie)(pieData.values, pieData.labels, {
                                             splitType: spec.splitType,
                                             splitPos: spec.splitPos,
-                                        }), main_1 = _81.main, secondary = _81.secondary, otherTotal = _81.otherTotal, total = _81.total;
+                                        }), main_1 = _86.main, secondary = _86.secondary, otherTotal = _86.otherTotal, total = _86.total;
                                         ofPieType = (0, of_pie_1.resolveOfPieType)(spec.ofPieType);
                                         secondScale = (0, of_pie_1.clampSecondPieSize)(spec.secondPieSize) / 100;
                                         halfAngle = (0, of_pie_1.otherSliceHalfAngle)(otherTotal, total);
@@ -1683,7 +1803,7 @@ var BasicChart = function (_a) {
                                         trace.meta = {
                                             rncSeriesIndex: currentSeriesIndex,
                                         };
-                                        applyTraceColor(trace, (_64 = series.color) !== null && _64 !== void 0 ? _64 : undefined, {
+                                        applyTraceColor(trace, (_69 = series.color) !== null && _69 !== void 0 ? _69 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             seriesIndex: currentSeriesIndex,
@@ -1692,13 +1812,13 @@ var BasicChart = function (_a) {
                                         traces.push(trace);
                                     }
                                     else if ("values" in seriesData && "labels" in seriesData) {
-                                        _82 = assignCartesianData(categoriesFor(series), seriesData.values), x = _82.x, y = _82.y, orientation_1 = _82.orientation;
+                                        _87 = assignCartesianData(categoriesFor(series), seriesData.values), x = _87.x, y = _87.y, orientation_1 = _87.orientation;
                                         trace = tslib_1.__assign(tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_1, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle), lineTraceVariant(series, effectiveChartType, seriesData.values));
                                         // Ties the trace back to spec.series for click selection
                                         trace.meta = {
                                             rncSeriesIndex: currentSeriesIndex,
                                         };
-                                        applyTraceColor(trace, (_65 = series.color) !== null && _65 !== void 0 ? _65 : undefined, {
+                                        applyTraceColor(trace, (_70 = series.color) !== null && _70 !== void 0 ? _70 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             invertIfNegative: series.invertIfNegative,
@@ -1713,13 +1833,13 @@ var BasicChart = function (_a) {
                                     }
                                     else {
                                         numericValues = seriesData;
-                                        _83 = assignCartesianData(categoriesFor(series), numericValues), x = _83.x, y = _83.y, orientation_2 = _83.orientation;
+                                        _88 = assignCartesianData(categoriesFor(series), numericValues), x = _88.x, y = _88.y, orientation_2 = _88.orientation;
                                         trace = tslib_1.__assign(tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_2, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle), lineTraceVariant(series, effectiveChartType, numericValues));
                                         // Ties the trace back to spec.series for click selection
                                         trace.meta = {
                                             rncSeriesIndex: currentSeriesIndex,
                                         };
-                                        applyTraceColor(trace, (_66 = series.color) !== null && _66 !== void 0 ? _66 : undefined, {
+                                        applyTraceColor(trace, (_71 = series.color) !== null && _71 !== void 0 ? _71 : undefined, {
                                             noFill: series.noFill,
                                             dataPointColors: series.dataPointColors,
                                             invertIfNegative: series.invertIfNegative,
@@ -1736,24 +1856,24 @@ var BasicChart = function (_a) {
                             }
                         });
                     };
-                    _77.label = 18;
+                    _82.label = 18;
                 case 18:
-                    _77.trys.push([18, 23, 24, 25]);
-                    _j = tslib_1.__values((_54 = spec.series) !== null && _54 !== void 0 ? _54 : []), _k = _j.next();
-                    _77.label = 19;
+                    _82.trys.push([18, 23, 24, 25]);
+                    _j = tslib_1.__values((_56 = spec.series) !== null && _56 !== void 0 ? _56 : []), _k = _j.next();
+                    _82.label = 19;
                 case 19:
                     if (!!_k.done) return [3 /*break*/, 22];
                     series = _k.value;
                     return [5 /*yield**/, _loop_2(series)];
                 case 20:
-                    _77.sent();
-                    _77.label = 21;
+                    _82.sent();
+                    _82.label = 21;
                 case 21:
                     _k = _j.next();
                     return [3 /*break*/, 19];
                 case 22: return [3 /*break*/, 25];
                 case 23:
-                    e_3_1 = _77.sent();
+                    e_3_1 = _82.sent();
                     e_3 = { error: e_3_1 };
                     return [3 /*break*/, 25];
                 case 24:
@@ -1770,13 +1890,13 @@ var BasicChart = function (_a) {
                         ? undefined
                         : (0, axis_number_format_1.resolveValueAxisNumberFormat)({
                             axisOptions: spec.valueAxisOptions,
-                            series: ((_67 = spec.series) !== null && _67 !== void 0 ? _67 : []).filter(function (s) { return !s.useSecondaryAxis; }),
+                            series: ((_72 = spec.series) !== null && _72 !== void 0 ? _72 : []).filter(function (s) { return !s.useSecondaryAxis; }),
                             getFormattingFromRange: getFormattingFromRange,
                             hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                         });
                     secondaryAxisNumberFormat = (0, axis_number_format_1.resolveValueAxisNumberFormat)({
                         axisOptions: spec.secondaryValueAxisOptions,
-                        series: ((_68 = spec.series) !== null && _68 !== void 0 ? _68 : []).filter(function (s) { return s.useSecondaryAxis; }),
+                        series: ((_73 = spec.series) !== null && _73 !== void 0 ? _73 : []).filter(function (s) { return s.useSecondaryAxis; }),
                         getFormattingFromRange: getFormattingFromRange,
                         hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
                     });
@@ -1824,14 +1944,14 @@ var BasicChart = function (_a) {
                         ? VALUE_AXIS_TITLE_STANDOFF
                         : legend_layout_1.BAND_GAP;
                     legendBand = (0, legend_layout_1.reservePlotlyLegendBand)({
-                        position: (_69 = spec.legend) === null || _69 === void 0 ? void 0 : _69.position,
+                        position: (_74 = spec.legend) === null || _74 === void 0 ? void 0 : _74.position,
                         visible: showlegend !== false,
                         labels: (0, legend_layout_1.legendLabelsFrom)(undefined, traces.map(function (trace) { return trace === null || trace === void 0 ? void 0 : trace.name; })),
-                        legendFontSize: (_72 = (_71 = (_70 = spec.legend) === null || _70 === void 0 ? void 0 : _70.textFormat) === null || _71 === void 0 ? void 0 : _71.fontSize) !== null && _72 !== void 0 ? _72 : axisFontSize,
+                        legendFontSize: (_77 = (_76 = (_75 = spec.legend) === null || _75 === void 0 ? void 0 : _75.textFormat) === null || _76 === void 0 ? void 0 : _76.fontSize) !== null && _77 !== void 0 ? _77 : axisFontSize,
                         width: Math.max(0, (width !== null && width !== void 0 ? width : 0) - 2),
                         height: Math.max(0, (height !== null && height !== void 0 ? height : 0) - 2),
                         hasTitle: Boolean(title),
-                        titleFontSize: (_73 = authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.fontSize) !== null && _73 !== void 0 ? _73 : 16,
+                        titleFontSize: (_78 = authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.fontSize) !== null && _78 !== void 0 ? _78 : 16,
                         hasBottomAxisTitle: Boolean(spec.horizontalAxisTitle),
                         hasLeftAxisTitle: Boolean(spec.verticalAxisTitle),
                         leftAxisDepth: leftAxisDepth,
@@ -1843,7 +1963,7 @@ var BasicChart = function (_a) {
                                 family: "Untitled Sans, apple-system, sans-serif",
                                 size: 16,
                                 color: textColor,
-                            }, authoredTitleFmt), x: 0.02, xanchor: "left" }, legendBand.title), showlegend: showlegend === undefined ? true : showlegend, legend: tslib_1.__assign(tslib_1.__assign({}, legendOverrides), ((_74 = legendBand.legend) !== null && _74 !== void 0 ? _74 : {})), margin: legendBand.margin, autosize: true }, ((spec.chartType === "bar" || spec.chartType === "column") &&
+                            }, authoredTitleFmt), x: 0.02, xanchor: "left" }, legendBand.title), showlegend: showlegend === undefined ? true : showlegend, legend: tslib_1.__assign(tslib_1.__assign({}, legendOverrides), ((_79 = legendBand.legend) !== null && _79 !== void 0 ? _79 : {})), margin: legendBand.margin, autosize: true }, ((spec.chartType === "bar" || spec.chartType === "column") &&
                         spec.stackedType
                         ? tslib_1.__assign({ barmode: spec.stackedType === "STACKED" ||
                                 spec.stackedType === "PERCENT_STACKED"
@@ -1856,7 +1976,7 @@ var BasicChart = function (_a) {
                             color: textColor,
                         }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, xaxis: applyAxisOverridesPlotly({
                             title: {
-                                text: (_75 = spec.horizontalAxisTitle) !== null && _75 !== void 0 ? _75 : "",
+                                text: (_80 = spec.horizontalAxisTitle) !== null && _80 !== void 0 ? _80 : "",
                                 font: { color: textColor },
                                 standoff: bottomAxisTitleStandoff,
                             },
@@ -1874,7 +1994,7 @@ var BasicChart = function (_a) {
                         isHorizontalBarChart
                             ? spec.valueAxisOptions
                             : spec.categoryAxisOptions, isHorizontalBarChart ? primaryAxisNumberFormat : undefined), yaxis: applyAxisOverridesPlotly({
-                            title: tslib_1.__assign({ text: (_76 = spec.verticalAxisTitle) !== null && _76 !== void 0 ? _76 : "", font: { color: textColor } }, (isHorizontalBarChart
+                            title: tslib_1.__assign({ text: (_81 = spec.verticalAxisTitle) !== null && _81 !== void 0 ? _81 : "", font: { color: textColor } }, (isHorizontalBarChart
                                 ? {}
                                 : { standoff: VALUE_AXIS_TITLE_STANDOFF })),
                             showgrid: !isHorizontalBarChart,
@@ -1938,13 +2058,18 @@ var BasicChart = function (_a) {
                     };
                     piePull = isOfPie ? undefined : (0, pie_explosion_1.explosionToPlotlyPull)((0, pie_explosion_1.resolveExplosion)(spec));
                     formattedTraces = traces.map(function (trace) {
-                        var _a, _b, _c, _d;
+                        var _a, _b, _c, _d, _e;
                         var pattern = traceNumberFormat(trace);
                         var next = applyDataLabelsToTracePlotly(trace, traceDataLabels(trace), spec.chartType, pattern, locale);
+                        if (next.type === "funnel") {
+                            // The formatted values ride on `text`; a funnel prints its own
+                            // `value` unless told to draw the text (or nothing).
+                            next = tslib_1.__assign(tslib_1.__assign({}, next), { textinfo: ((_a = traceDataLabels(trace)) === null || _a === void 0 ? void 0 : _a.show) ? "text" : "none" });
+                        }
                         if (next.type === "pie") {
                             // Plotly's pie prints every slice's percentage by default; Excel
                             // draws nothing until data labels are on (#1062).
-                            if (!((_a = traceDataLabels(trace)) === null || _a === void 0 ? void 0 : _a.show)) {
+                            if (!((_b = traceDataLabels(trace)) === null || _b === void 0 ? void 0 : _b.show)) {
                                 next = tslib_1.__assign(tslib_1.__assign({}, next), { textinfo: "none" });
                             }
                             // Hover values format like the slice's source cell.
@@ -1963,7 +2088,7 @@ var BasicChart = function (_a) {
                         }
                         else if (!next.hovertemplate &&
                             (next.type === "bar" || next.type === "scatter") &&
-                            typeof ((_b = next.meta) === null || _b === void 0 ? void 0 : _b.rncSeriesIndex) === "number") {
+                            typeof ((_c = next.meta) === null || _c === void 0 ? void 0 : _c.rncSeriesIndex) === "number") {
                             // Hover values read like the series' own cells (Excel's data tip
                             // shows the cell text) — the series format alone, not the axis
                             // fallback the labels use, since that resolves to the first series
@@ -1985,8 +2110,8 @@ var BasicChart = function (_a) {
                         // (doughnutHoleSize); clamp like the echarts renderer and default
                         // to 0.5 when unset.
                         if (spec.chartType === "doughnut" && next.type === "pie") {
-                            var rank = doughnutSeriesOrder.indexOf((_c = next.meta) === null || _c === void 0 ? void 0 : _c.rncSeriesIndex);
-                            var ring = (_d = doughnutRingSet[rank]) !== null && _d !== void 0 ? _d : (0, doughnut_1.doughnutRings)((0, doughnut_1.clampDoughnutHole)(doughnutHole), 1)[0];
+                            var rank = doughnutSeriesOrder.indexOf((_d = next.meta) === null || _d === void 0 ? void 0 : _d.rncSeriesIndex);
+                            var ring = (_e = doughnutRingSet[rank]) !== null && _e !== void 0 ? _e : (0, doughnut_1.doughnutRings)((0, doughnut_1.clampDoughnutHole)(doughnutHole), 1)[0];
                             // Plotly's `hole` is a fraction of the trace's own radius.
                             next = tslib_1.__assign(tslib_1.__assign({}, next), { hole: ring.inner / ring.outer });
                             if (doughnutRingSet.length > 1) {
@@ -2125,7 +2250,13 @@ var BasicChart = function (_a) {
                         } }, "Delete chart")))))) : null,
         react_1.default.createElement("div", { className: "flex-1 rnc-plotly-chart-container", onPointerDownCapture: handlePointerDownCapture },
             react_1.default.createElement(plot_1.Plot, { data: plotData, layout: plotLayout, config: config, onClick: handlePlotClick, onInitialized: function (_figure, graphDiv) {
+                    var _a, _b;
                     graphDivRef.current = graphDiv;
+                    var plotDiv = graphDiv;
+                    // Returning false from these handlers keeps the clicked branch
+                    // from becoming the new root.
+                    (_a = plotDiv.on) === null || _a === void 0 ? void 0 : _a.call(plotDiv, "plotly_treemapclick", function () { return drillDownRef.current; });
+                    (_b = plotDiv.on) === null || _b === void 0 ? void 0 : _b.call(plotDiv, "plotly_sunburstclick", function () { return drillDownRef.current; });
                 }, style: { width: "100%", height: "100%" } }))));
 };
 exports.BasicChart = BasicChart;