@rowsncolumns/charts 28.1.8 → 28.1.10

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

@@ -18,9 +18,9 @@ import { coerceCalculatedLabel, getChartDataRanges, } from "../utils/chart-spec-
 import { canSwitchRowColumn, cellLabelGetterFromRangeReader, switchRowColumn, } from "../utils/chart-orientation";
 import { dataUrlToBlob } from "../utils/chart-image";
 import { getChartPalette } from "../utils/chart-styles";
+import { buildEchartsOverlaySeries } from "../utils/echarts-overlays";
 import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, isolatedPointIndexes, isLineLikeChartType, } from "../utils/empty-cells";
 import { getEchartsGlState, loadEchartsGl, } from "../utils/echarts-gl-loader";
-import { computeErrorBars, resolveCustomErrorBarValues, } from "../utils/error-bars";
 import { echartsGroupedCategoryAxes, resolveCategoryLevels, } from "../utils/category-levels";
 import { gradientToEcharts } from "../utils/gradient";
 import { buildHierarchyTree, extractHierarchyRows, getHierarchyHeaderTitle, } from "../utils/hierarchy";
@@ -36,7 +36,6 @@ import { STOCK_ROLES, toCandlestick, toLineSeries, toVolumeSeries, } from "../ut
 import { explosionOffsetPx, pieRadiusPx, resolveExplosion, } from "../utils/pie-explosion";
 import { chartSeriesId, chartSeriesSpecIndex, resolveClickedDataIndex, resolveClickedSeriesIndex, } from "../utils/series-click";
 import { buildBar3DData, buildContourData, buildLine3DSeries, buildSurfaceData, getCategoryCount, getValueExtent, isContourSpec, resolve3DRenderKind, SURFACE_COLOR_RAMP, } from "../utils/three-d";
-import { computeTrendline } from "../utils/trendline";
 import { computeWaterfall } from "../utils/waterfall";
 import { isWebGLAvailable } from "../utils/webgl";
 import { chartTypeToEchartsType, circularLegendEntries, getEchartsSeriesStyle, isCircularChartType, mapMarkerSymbolToEcharts, showXAxis, } from "./helpers";
@@ -103,29 +102,41 @@ const HIERARCHY_CHART_TYPES = new Set([
 const isBasicChartSpec = (spec) => BASIC_CHART_TYPES.has(spec.chartType);
 const isBubbleChartSpec = (spec) => BUBBLE_CHART_TYPES.has(spec.chartType);
 const isHierarchyChartSpec = (spec) => 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.
 const HIERARCHY_LEVEL_STYLES = [
     {
         itemStyle: {
-            gapWidth: 1,
-            borderColorSaturation: 0.6,
+            gapWidth: 2,
+            borderColor: "#ffffff",
+            borderWidth: 0,
         },
         upperLabel: { show: false },
     },
     {
-        colorSaturation: [0.35, 0.65],
         itemStyle: {
             gapWidth: 1,
-            borderColorSaturation: 0.6,
-        },
-    },
-    {
-        colorSaturation: [0.45, 0.75],
-        itemStyle: {
-            gapWidth: 1,
-            borderColorSaturation: 0.6,
+            borderColor: "#ffffff",
+            borderWidth: 1,
         },
     },
 ];
+/**
+ * Colour a hierarchy like Excel: each top-level node takes the next
+ * palette colour and every descendant inherits it (#1072).
+ */
+const colorHierarchyNodes = (nodes, palette) => nodes.map((node, index) => {
+    const color = chartPaletteColorAt(palette, index);
+    const paint = (n) => ({
+        ...n,
+        itemStyle: { 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). */
+const SUNBURST_RADIUS = ["15%", "80%"];
 const getHierarchyDepth = (nodes, depth = 1) => {
     let maxDepth = depth;
     nodes.forEach((node) => {
@@ -176,6 +187,16 @@ const buildHierarchyLevels = (maxDepth) => {
 };
 /** Series whose tooltip value is one number on a value axis. */
 const VALUE_TOOLTIP_SERIES_TYPES = new Set(["bar", "line", "scatter", "funnel"]);
+/** The transparent spacer bars a waterfall stacks its visible bars on. */
+const WATERFALL_PLACEHOLDER_ID = "rnc-waterfall-placeholder";
+/** The invisible funnel that carries the stage names beside the bars. */
+const 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).
+ */
+const DECORATION_SERIES_IDS = new Set([WATERFALL_PLACEHOLDER_ID, FUNNEL_NAMES_ID]);
 const defaultLegendConfig = {
     padding: 10,
     itemWidth: 10,
@@ -556,7 +577,38 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 sizeValues: sharedSizeValues,
                 series: seriesInputs,
             });
-            const sizeScale = createBubbleSizeScale(sizeValues);
+            // Bubble diameters scale from zero (area by default, width when
+            // `sizeRepresents` says so) and the largest bubble is a fraction of
+            // the plot area — the grid keeps ~85% of the width and ~75% of the
+            // height for the plot (#1068).
+            const sizeScale = createBubbleSizeScale(sizeValues, {
+                sizeRepresents: spec.sizeRepresents,
+                bubbleScale: spec.bubbleScale,
+                plotMinSide: Math.min((width ?? 0) * 0.85, (height ?? 0) * 0.75),
+            });
+            const bubblePalette = getChartPalette(spec, [
+                theme.themeColors.accent1,
+                theme.themeColors.accent2,
+                theme.themeColors.accent3,
+                theme.themeColors.accent4,
+                theme.themeColors.accent5,
+                theme.themeColors.accent6,
+            ]);
+            // Per-point colours (`<c:dPt>`) key on the point's source row, which
+            // `BubbleSeriesPoint.index` keeps (points without a Y are skipped).
+            const bubbleItemColor = (seriesEntry, index) => {
+                const base = seriesEntry?.color ?? chartPaletteColorAt(bubblePalette, index);
+                const overrides = new Map();
+                for (const dp of seriesEntry?.dataPointColors ?? []) {
+                    if (typeof dp?.idx === "number" && typeof dp?.color === "string") {
+                        overrides.set(dp.idx, dp.color);
+                    }
+                }
+                return overrides.size
+                    ? (params) => overrides.get(params?.data?.index) ?? base
+                    : base;
+            };
+            const hasBubbleSecondaryAxis = (spec.series ?? []).some((seriesEntry) => seriesEntry?.useSecondaryAxis);
             const xAxisConfig = categories.length > 0
                 ? {
                     type: "category",
@@ -585,6 +637,102 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // non-bubble layout below. A series' own `dataLabels` replace the
             // chart-level ones for it (#1059).
             const bubbleSeriesLabelFor = (index) => buildSeriesLabelOption(resolveSeriesDataLabels(spec.dataLabels, spec.series?.[index]), undefined, locale);
+            // 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.
+            const bubbleSeries = preparedSeries
+                .map((entry, index) => {
+                const isScatter = spec.chartType === "scatter";
+                const scatterStyle = spec.scatterStyle ?? (isScatter ? "lineMarker" : undefined);
+                const seriesEntry = spec.series?.[index];
+                const seriesColor = seriesEntry?.color;
+                const perMarker = seriesEntry?.marker;
+                const itemColor = bubbleItemColor(seriesEntry, index);
+                const onSecondary = seriesEntry?.useSecondaryAxis ? { yAxisIndex: 1 } : {};
+                if (isScatter) {
+                    const symbol = perMarker?.symbol;
+                    const noMarkers = symbol === "none";
+                    const wantsLine = scatterStyle === "line" ||
+                        scatterStyle === "lineMarker" ||
+                        scatterStyle === "smooth" ||
+                        scatterStyle === "smoothMarker";
+                    const wantsMarkers = !noMarkers &&
+                        (scatterStyle === "marker" ||
+                            scatterStyle === "lineMarker" ||
+                            scatterStyle === "smoothMarker" ||
+                            !scatterStyle);
+                    const 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).
+                    const labelsWithoutMarkers = !wantsMarkers &&
+                        Boolean(resolveSeriesDataLabels(spec.dataLabels, seriesEntry)
+                            ?.show);
+                    // The series colour paints the line; the markers take the
+                    // per-point overrides when the series has any.
+                    const markerStyle = seriesColor || typeof itemColor === "function"
+                        ? { itemStyle: { color: itemColor } }
+                        : {};
+                    return wantsLine
+                        ? {
+                            type: "line",
+                            name: entry.name,
+                            data: entry.points,
+                            showSymbol: wantsMarkers || labelsWithoutMarkers,
+                            smooth,
+                            symbol: mapMarkerSymbolToEcharts(symbol) ?? "circle",
+                            symbolSize: labelsWithoutMarkers ? 0 : perMarker?.size ?? 6,
+                            ...markerStyle,
+                            ...(seriesColor ? { lineStyle: { color: seriesColor } } : {}),
+                            ...onSecondary,
+                        }
+                        : {
+                            type: "scatter",
+                            name: entry.name,
+                            data: entry.points,
+                            symbol: mapMarkerSymbolToEcharts(symbol) ?? "circle",
+                            symbolSize: perMarker?.size ?? 6,
+                            ...markerStyle,
+                            ...onSecondary,
+                        };
+                }
+                return {
+                    type: chartType,
+                    name: entry.name,
+                    data: entry.points,
+                    symbolSize: (data) => sizeScale(data?.[2] ?? 0),
+                    label: {
+                        show: true,
+                        formatter: (params) => params.name ?? "",
+                    },
+                    ...(seriesColor || typeof itemColor === "function"
+                        ? { itemStyle: { color: itemColor } }
+                        : {}),
+                    ...onSecondary,
+                };
+            })
+                .map((s, index) => {
+                const bubbleSeriesLabel = bubbleSeriesLabelFor(index);
+                return bubbleSeriesLabel
+                    ? { ...s, label: { ...(s.label ?? {}), ...bubbleSeriesLabel } }
+                    : s;
+            });
+            // Trendlines and error bars on the real (x, y) points: the fit is a
+            // regression of Y on X, not on the point index (#1067).
+            const bubbleOverlays = preparedSeries.flatMap((entry, index) => {
+                const seriesEntry = spec.series?.[index];
+                if (!seriesEntry)
+                    return [];
+                return buildEchartsOverlaySeries({
+                    series: seriesEntry,
+                    values: entry.points.map((point) => point.value[1]),
+                    xValues: entry.points.map((point) => point.value[0]),
+                    dataLabel: entry.name,
+                    seriesColor: seriesEntry.color ?? chartPaletteColorAt(bubblePalette, index),
+                    resolveRange: (range) => getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy),
+                });
+            });
             chartRef.current?.setOption({
                 xAxis: [
                     applyAxisOverrides({ ...xAxisConfig }, spec.categoryAxisOptions),
@@ -596,6 +744,19 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         nameLocation: "middle",
                         nameGap: 45,
                     }, spec.valueAxisOptions, undefined, locale),
+                    // Secondary value axis on the right for the series that opt in
+                    // (`useSecondaryAxis`), as the category layout has (#1067).
+                    ...(hasBubbleSecondaryAxis
+                        ? [
+                            applyAxisOverrides({
+                                type: "value",
+                                position: "right",
+                                nameLocation: "middle",
+                                nameGap: 45,
+                                splitLine: { show: false },
+                            }, spec.secondaryValueAxisOptions, undefined, locale),
+                        ]
+                        : []),
                 ],
                 legend: applyLegendOverrides({
                     ...legend,
@@ -612,82 +773,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     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((entry, index) => {
-                    const isScatter = spec.chartType === "scatter";
-                    const scatterStyle = spec.scatterStyle ??
-                        (isScatter ? "lineMarker" : undefined);
-                    const seriesEntry = spec.series?.[index];
-                    const seriesColor = seriesEntry?.color;
-                    const perMarker = seriesEntry?.marker;
-                    if (isScatter) {
-                        const symbol = perMarker?.symbol;
-                        const noMarkers = symbol === "none";
-                        const wantsLine = scatterStyle === "line" ||
-                            scatterStyle === "lineMarker" ||
-                            scatterStyle === "smooth" ||
-                            scatterStyle === "smoothMarker";
-                        const wantsMarkers = !noMarkers &&
-                            (scatterStyle === "marker" ||
-                                scatterStyle === "lineMarker" ||
-                                scatterStyle === "smoothMarker" ||
-                                !scatterStyle);
-                        const 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).
-                        const labelsWithoutMarkers = !wantsMarkers &&
-                            Boolean(resolveSeriesDataLabels(spec.dataLabels, seriesEntry)
-                                ?.show);
-                        return wantsLine
-                            ? {
-                                type: "line",
-                                name: entry.name,
-                                data: entry.points,
-                                showSymbol: wantsMarkers || labelsWithoutMarkers,
-                                smooth,
-                                symbol: mapMarkerSymbolToEcharts(symbol) ?? "circle",
-                                symbolSize: labelsWithoutMarkers
-                                    ? 0
-                                    : perMarker?.size ?? 6,
-                                ...(seriesColor
-                                    ? {
-                                        itemStyle: { color: seriesColor },
-                                        lineStyle: { color: seriesColor },
-                                    }
-                                    : {}),
-                            }
-                            : {
-                                type: "scatter",
-                                name: entry.name,
-                                data: entry.points,
-                                symbol: mapMarkerSymbolToEcharts(symbol) ?? "circle",
-                                symbolSize: perMarker?.size ?? 6,
-                                ...(seriesColor
-                                    ? { itemStyle: { color: seriesColor } }
-                                    : {}),
-                            };
-                    }
-                    return {
-                        type: chartType,
-                        name: entry.name,
-                        data: entry.points,
-                        symbolSize: (data) => sizeScale(data?.[2] ?? 0),
-                        label: {
-                            show: true,
-                            formatter: (params) => params.name ?? "",
-                        },
-                        ...(seriesColor ? { itemStyle: { color: seriesColor } } : {}),
-                    };
-                }).map((s, index) => {
-                    const bubbleSeriesLabel = bubbleSeriesLabelFor(index);
-                    return bubbleSeriesLabel
-                        ? { ...s, label: { ...(s.label ?? {}), ...bubbleSeriesLabel } }
-                        : s;
-                }),
+                series: [...bubbleSeries, ...bubbleOverlays],
             }, {
                 replaceMerge: [
                     "series",
@@ -699,7 +785,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 ],
             });
             previousChartType.current = spec.chartType;
-            previousSeriesCount.current = preparedSeries.length;
+            previousSeriesCount.current = bubbleSeries.length + bubbleOverlays.length;
             return;
         }
         if (isHierarchy) {
@@ -714,8 +800,17 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
             });
             hierarchyTitleRef.current = explicitChartTitle ?? headerTitle;
-            const hierarchyData = buildHierarchyTree(hierarchyRows);
+            const hierarchyPalette = getChartPalette(spec, [
+                theme.themeColors.accent1,
+                theme.themeColors.accent2,
+                theme.themeColors.accent3,
+                theme.themeColors.accent4,
+                theme.themeColors.accent5,
+                theme.themeColors.accent6,
+            ]);
+            const hierarchyData = colorHierarchyNodes(buildHierarchyTree(hierarchyRows), hierarchyPalette);
             const rootName = hierarchyData.length === 1 ? hierarchyData[0]?.name ?? "" : "";
+            const drillDown = Boolean(spec.drillDown);
             const seriesDisplayName = explicitChartTitle ?? headerTitle ?? rootName ?? "";
             const hierarchyDepth = getHierarchyDepth(hierarchyData);
             const levels = buildHierarchyLevels(hierarchyDepth);
@@ -768,6 +863,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         label: {
                             show: true,
                             formatter: "{b}",
+                            ...(spec.chartType === "treemap"
+                                ? { position: "insideBottomLeft" }
+                                : {}),
                             ...(hierarchySeriesLabel ?? {}),
                         },
                         upperLabel: spec.chartType === "treemap"
@@ -777,7 +875,16 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             }
                             : undefined,
                         levels,
-                        colorMappingBy: "index",
+                        // 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,
+                        ...(spec.chartType === "treemap"
+                            ? { breadcrumb: { show: drillDown } }
+                            : { radius: [...SUNBURST_RADIUS] }),
                     },
                 ],
             }, {
@@ -1176,12 +1283,19 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             };
             chartRef.current?.setOption({
                 radar: {
-                    indicator: indicators.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.length
                         ? indicators
-                        : [{ 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((indicator, index) => ({
+                        ...indicator,
+                        axisLabel: {
+                            show: index === 0 && radarAxisOptions?.visible !== false,
+                        },
+                    })),
                     axisLabel: {
                         show: radarAxisOptions?.visible !== false,
                         formatter: (value) => formatAxisValue(radarFormats[0], value, locale),
@@ -1549,135 +1663,15 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 : [];
             if (numericValues.length === 0)
                 return;
-            const seriesColor = series.color ?? theme.themeColors.accent1;
-            const useSecondary = series.useSecondaryAxis ? { yAxisIndex: 1 } : {};
-            // Trendlines — one overlay line series per spec.
-            for (const tl of series.trendlines ?? []) {
-                const result = computeTrendline(numericValues, {
-                    type: tl.type,
-                    order: tl.order,
-                    period: tl.period,
-                    forecastForward: tl.forecastForward,
-                    forecastBackward: tl.forecastBackward,
-                });
-                if (!result || result.points.length < 2)
-                    continue;
-                const tlName = tl.name ??
-                    `${dataLabel ? dataLabel + " " : ""}${tl.type ?? "linear"} trend`;
-                chartSeries.push({
-                    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((p) => [p.x, p.y]),
-                    showSymbol: false,
-                    smooth: tl.type === "poly",
-                    lineStyle: {
-                        color: tl.color ?? seriesColor,
-                        type: "dashed",
-                        width: 2,
-                    },
-                    itemStyle: { color: tl.color ?? seriesColor },
-                    tooltip: { show: false },
-                    z: 5,
-                    ...useSecondary,
-                });
-            }
-            // 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.
-            const magnitudes = computeErrorBars(numericValues, resolveCustomErrorBarValues(series.errorBars, (range) => getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy)));
-            if (magnitudes) {
-                const direction = series.errorBars?.direction ?? "y";
-                const noEndCap = series.errorBars?.noEndCap ?? false;
-                const errorData = numericValues.map((v, i) => [
-                    i,
-                    typeof v === "number" ? v : 0,
-                    magnitudes.plus[i] ?? 0,
-                    magnitudes.minus[i] ?? 0,
-                ]);
-                chartSeries.push({
-                    type: "custom",
-                    name: `${dataLabel ? dataLabel + " " : ""}error`,
-                    data: errorData,
-                    z: 6,
-                    tooltip: { show: false },
-                    ...useSecondary,
-                    renderItem: (_params, api) => {
-                        const value = api.value(1);
-                        const plus = api.value(2);
-                        const minus = api.value(3);
-                        const capHalf = 5;
-                        if (direction === "x") {
-                            const center = api.coord([value, api.value(0)]);
-                            const hi = api.coord([value + plus, api.value(0)]);
-                            const lo = api.coord([value - minus, api.value(0)]);
-                            const children = [
-                                {
-                                    type: "line",
-                                    shape: { x1: lo[0], y1: center[1], x2: hi[0], y2: center[1] },
-                                    style: { stroke: seriesColor, lineWidth: 1 },
-                                },
-                            ];
-                            if (!noEndCap) {
-                                children.push({
-                                    type: "line",
-                                    shape: {
-                                        x1: hi[0],
-                                        y1: center[1] - capHalf,
-                                        x2: hi[0],
-                                        y2: center[1] + capHalf,
-                                    },
-                                    style: { stroke: seriesColor, lineWidth: 1 },
-                                }, {
-                                    type: "line",
-                                    shape: {
-                                        x1: lo[0],
-                                        y1: center[1] - capHalf,
-                                        x2: lo[0],
-                                        y2: center[1] + capHalf,
-                                    },
-                                    style: { stroke: seriesColor, lineWidth: 1 },
-                                });
-                            }
-                            return { type: "group", children };
-                        }
-                        const center = api.coord([api.value(0), value]);
-                        const hi = api.coord([api.value(0), value + plus]);
-                        const lo = api.coord([api.value(0), value - minus]);
-                        const children = [
-                            {
-                                type: "line",
-                                shape: { x1: center[0], y1: lo[1], x2: center[0], y2: hi[1] },
-                                style: { stroke: seriesColor, lineWidth: 1 },
-                            },
-                        ];
-                        if (!noEndCap) {
-                            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 };
-                    },
-                });
-            }
+            chartSeries.push(...buildEchartsOverlaySeries({
+                series,
+                values: numericValues,
+                // A horizontal bar keeps its categories on y (#1061).
+                horizontal: isHorizontalBarChart,
+                dataLabel,
+                seriesColor: series.color ?? theme.themeColors.accent1,
+                resolveRange: (range) => getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy),
+            }));
         };
         // Excel `<c:overlap>` / `<c:gapWidth>` → echarts barGap /
         // barCategoryGap (see utils/bar-layout.ts for the exact mapping).
@@ -2150,17 +2144,30 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 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((s) => s.placeholder),
                 silent: true,
+                label: { show: false },
+                tooltip: { show: false },
             });
             const accent = seriesEntry?.color ?? theme.themeColors.accent1;
             const decreaseColor = seriesEntry?.negativeColor ?? theme.themeColors.accent2 ?? accent;
             const totalColor = theme.themeColors.accent3 ?? accent;
+            // Per-bar colours (`<c:dPt>`) win over the increase / decrease /
+            // total colours — an importer gives totals the workbook's own
+            // colour and keeps bars recoloured in Excel.
+            const pointColors = new Map();
+            for (const dp of seriesEntry?.dataPointColors ?? []) {
+                if (typeof dp?.idx === "number" && typeof dp?.color === "string") {
+                    pointColors.set(dp.idx, dp.color);
+                }
+            }
             // Excel-style connector lines: a horizontal segment at the running
             // total after bar i, spanning across to bar i+1. Within the bars
             // the segment overlaps their top/bottom edges, so only the gap
@@ -2171,16 +2178,22 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             ]);
             chartSeries.push({
                 type: "bar",
+                id: chartSeriesId(0, 0),
                 stack: "waterfall",
                 name: seriesEntry?.dataLabel ?? "",
+                // 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((s, i) => ({
                     value: s.value,
+                    originalValue: rawValues[i],
                     itemStyle: {
-                        color: s.isTotal
-                            ? totalColor
-                            : rawValues[i] < 0
-                                ? decreaseColor
-                                : accent,
+                        color: pointColors.get(i) ??
+                            (s.isTotal
+                                ? totalColor
+                                : rawValues[i] < 0
+                                    ? decreaseColor
+                                    : accent),
                     },
                 })),
                 markLine: {
@@ -2210,14 +2223,64 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 : [];
             chartDomains.length = 0;
             chartSeries.length = 0;
+            // Excel draws every stage in the series colour (only `<c:dPt>`
+            // recolours a stage), keeps the rows' order top to bottom, and
+            // prints the values inside the bars (#1069).
+            const funnelPalette = getChartPalette(spec, [
+                theme.themeColors.accent1,
+                theme.themeColors.accent2,
+                theme.themeColors.accent3,
+                theme.themeColors.accent4,
+                theme.themeColors.accent5,
+                theme.themeColors.accent6,
+            ]);
+            const funnelColor = seriesEntry?.color ?? chartPaletteColorAt(funnelPalette, 0);
+            const stageColors = new Map();
+            for (const dp of seriesEntry?.dataPointColors ?? []) {
+                if (typeof dp?.idx === "number" && typeof dp?.color === "string") {
+                    stageColors.set(dp.idx, dp.color);
+                }
+            }
+            const funnelData = rawValues.map((value, i) => ({
+                name: labels[i] ?? String(i),
+                value,
+            }));
+            const funnelLayout = {
+                sort: "none",
+                left: "22%",
+                right: "10%",
+                top: 60,
+                bottom: 20,
+            };
             chartSeries.push({
                 type: "funnel",
+                id: chartSeriesId(0, 0),
                 name: seriesEntry?.dataLabel ?? "",
-                data: rawValues.map((value, i) => ({
-                    name: labels[i] ?? String(i),
-                    value,
-                })),
-                label: { show: true, position: "inside" },
+                data: funnelData,
+                ...funnelLayout,
+                itemStyle: {
+                    color: (params) => stageColors.get(params.dataIndex) ?? funnelColor,
+                },
+                label: {
+                    show: true,
+                    position: "inside",
+                    formatter: (params) => 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({
+                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 = [];
         }
@@ -2551,6 +2614,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         }
         const seriesWithLabels = chartSeries.map((s) => {
             const next = { ...s };
+            if (DECORATION_SERIES_IDS.has(s?.id)) {
+                return next;
+            }
             const seriesLabelOption = seriesLabelOptionFor(s);
             if (seriesLabelOption) {
                 next.label = { ...(s?.label ?? {}), ...seriesLabelOption };
@@ -2566,10 +2632,25 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const seriesTooltipValueFormatter = VALUE_TOOLTIP_SERIES_TYPES.has(s?.type)
                 ? valueAxisLabelFormatter(seriesNumberFormatFor(s), locale)
                 : undefined;
-            if (seriesTooltipValueFormatter && s?.tooltip?.show !== false) {
+            // 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.
+            const originalValueAt = (dataIndex) => {
+                const item = Array.isArray(s?.data) ? s.data[dataIndex] : undefined;
+                return item !== null && typeof item === "object"
+                    ? item.originalValue
+                    : undefined;
+            };
+            const carriesOriginalValues = VALUE_TOOLTIP_SERIES_TYPES.has(s?.type) &&
+                Array.isArray(s?.data) &&
+                s.data.some((item) => item !== null && typeof item === "object" && "originalValue" in item);
+            if ((seriesTooltipValueFormatter || carriesOriginalValues) &&
+                s?.tooltip?.show !== false) {
+                const formatValue = seriesTooltipValueFormatter ??
+                    ((value) => formatAxisValue(undefined, value, locale));
                 next.tooltip = {
                     ...(s?.tooltip ?? {}),
-                    valueFormatter: seriesTooltipValueFormatter,
+                    valueFormatter: (value, dataIndex) => formatValue(originalValueAt(dataIndex) ?? value),
                 };
             }
             if (next.type === "pie") {