@rowsncolumns/charts 27.0.34 → 28.1.0

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

@@ -1,21 +1,27 @@
 import { ChevronRightIcon, DotsVerticalIcon } from "@rowsncolumns/icons";
-import { getStringifiedColor, useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { getStringifiedColor, useFocusSheet, useRegisterChartActions, useSetSelectedChartSeries, } from "@rowsncolumns/spreadsheet";
 import { useSubscribeToMultipleRanges } from "@rowsncolumns/spreadsheet-state";
 import { createDownloadableFile } from "@rowsncolumns/toolkit";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, useIsomorphicLayoutEffect, useOnVisibilityChange, } from "@rowsncolumns/ui";
 import { debug, isAFormula, isNil } from "@rowsncolumns/utils";
-import { BarChart, BoxplotChart, CandlestickChart, CustomChart, FunnelChart, LineChart, PieChart, RadarChart as EchartsRadarChart, ScatterChart, SunburstChart, TreemapChart as EchartsTreemapChart, } from "echarts/charts";
-import { DatasetComponent, GridComponent, LegendComponent, RadarComponent, TitleComponent, TooltipComponent, } from "echarts/components";
+import { BarChart, BoxplotChart, CandlestickChart, CustomChart, FunnelChart, HeatmapChart, LineChart, PieChart, RadarChart as EchartsRadarChart, ScatterChart, SunburstChart, TreemapChart as EchartsTreemapChart, } from "echarts/charts";
+import { DatasetComponent, GridComponent, LegendComponent, RadarComponent, TitleComponent, TooltipComponent, VisualMapComponent, } from "echarts/components";
 import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../utils/aggregation";
+import { circularTooltipFormatter, formatAxisValue, resolveSeriesNumberFormats, resolveSourceNumberFormat, resolveValueAxisNumberFormat, tooltipValueFormatter, valueAxisLabelFormatter, } from "../utils/axis-number-format";
 import { gapWidthToBarCategoryGap, overlapToBarGap, } from "../utils/bar-layout";
 import { computeBoxplotSummary } from "../utils/boxplot";
 import { createBubbleSizeScale, prepareBubbleSeriesData, } from "../utils/bubble";
 import { coerceCalculatedLabel, getChartDataRanges, } from "../utils/chart-spec-utils";
+import { canSwitchRowColumn, cellLabelGetterFromRangeReader, switchRowColumn, } from "../utils/chart-orientation";
+import { dataUrlToBlob } from "../utils/chart-image";
+import { getChartPalette } from "../utils/chart-styles";
+import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, 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";
 import { binHistogram, computePareto, isParetoSpec, } from "../utils/histogram";
@@ -24,8 +30,10 @@ import { applyAxisOverrides, applyLegendOverrides, buildSeriesLabelOption, } fro
 import { buildRadarIndicators, buildRadarSeriesData } from "../utils/radar";
 import { buildRegionMapData, buildSequentialColorRamp, isRegionMapSpec, resolveGeoScope, warnOnceForUnmatchedRegions, } from "../utils/region-map";
 import { loadRegionMapGeo } from "../utils/region-map-loader";
-import { toCandlestick, toLineSeries, toVolumeSeries, } from "../utils/stock";
-import { buildBar3DData, buildLine3DSeries, buildSurfaceData, getValueExtent, resolve3DRenderKind, SURFACE_COLOR_RAMP, } from "../utils/three-d";
+import { STOCK_ROLES, toCandlestick, toLineSeries, toVolumeSeries, } from "../utils/stock";
+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";
@@ -164,13 +172,15 @@ const buildHierarchyLevels = (maxDepth) => {
     }
     return levels;
 };
+/** Series whose tooltip value is one number on a value axis. */
+const VALUE_TOOLTIP_SERIES_TYPES = new Set(["bar", "line", "scatter", "funnel"]);
 const defaultLegendConfig = {
     padding: 10,
     itemWidth: 10,
     itemHeight: 4,
     top: 20,
 };
-export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, onDeleteChart, onRequestEdit, onRequestCalculate, isSelected, }) => {
+export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, }) => {
     const spec = chart.spec;
     const explicitChartTitle = chart.spec.title ?? undefined;
     const hierarchyTitleRef = useRef(explicitChartTitle);
@@ -178,6 +188,47 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     const el = useRef(null);
     const chartRef = useRef(undefined);
     const focusSheet = useFocusSheet();
+    // Excel selects a data series when it is clicked inside the chart and
+    // the grid highlights that series' source range; clicking empty chart
+    // area steps back to the whole chart. Published for the grid to draw.
+    const setSelectedChartSeries = useSetSelectedChartSeries();
+    const chartForClickRef = useRef(chart);
+    chartForClickRef.current = chart;
+    // An exploded pie draws every slice in echarts' `select` state (the only
+    // per-slice offset it has); echarts unselects a slice on click, so that
+    // click is folded back into a select to keep the slice out.
+    const explodedRef = useRef(false);
+    const bindSeriesSelection = (instance) => {
+        instance.on("click", (params) => {
+            const current = chartForClickRef.current;
+            const clickParams = params;
+            const seriesIndex = resolveClickedSeriesIndex(clickParams, current.spec.series?.length ?? 0);
+            if (seriesIndex === undefined)
+                return;
+            const dataIndex = resolveClickedDataIndex(clickParams);
+            setSelectedChartSeries({
+                chartId: current.chartId,
+                seriesIndex,
+                ...(dataIndex === undefined ? {} : { dataIndex }),
+            });
+        });
+        instance.on("selectchanged", (event) => {
+            const { fromAction, isFromClick, fromActionPayload } = event;
+            if (!explodedRef.current || !isFromClick || fromAction !== "unselect") {
+                return;
+            }
+            instance.dispatchAction({
+                type: "select",
+                seriesIndex: fromActionPayload?.seriesIndex,
+                dataIndex: fromActionPayload?.dataIndexInside ?? fromActionPayload?.dataIndex,
+            });
+        });
+        instance.getZr().on("click", (event) => {
+            if (!event.target) {
+                setSelectedChartSeries(undefined);
+            }
+        });
+    };
     const shouldFocusSheetRef = useRef(false);
     const previousChartType = useRef(undefined);
     const previousSeriesCount = useRef(undefined);
@@ -191,10 +242,15 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     // visualMap) doesn't merge back into a cartesian one, so the instance
     // is re-initialized when entering/leaving the region-map rendering.
     const renderedAsRegionMap = useRef(false);
+    // Contour (Excel's flat Surface view) renders as a heatmap with a
+    // visualMap; that component doesn't merge back into a plain cartesian
+    // option, so the instance is re-initialized when entering/leaving it.
+    const renderedAsContour = useRef(false);
     // Initialize line chart
     const initializeChart = () => {
         if (el.current && !chartRef.current) {
             chartRef.current = echarts.init(el.current);
+            bindSeriesSelection(chartRef.current);
             chartRef.current.setOption({
                 title: {
                     left: "top",
@@ -260,6 +316,16 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         }
         const numericValues = seriesValues;
         if (spec.chartType === "pie") {
+            if (options.pieLabels) {
+                const { domainLabels, offset } = options.pieLabels;
+                const labels = offset === undefined
+                    ? domainLabels
+                    : domainLabels.slice(offset, offset + numericValues.length);
+                return labels.map((name, idx) => ({
+                    value: numericValues[idx],
+                    name,
+                }));
+            }
             const domainSheetRange = spec.domains[0]?.sources[0];
             if (!domainSheetRange) {
                 return [];
@@ -270,7 +336,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 name,
             }));
         }
-        return numericValues;
+        // Excel's "Hidden and Empty Cells": gaps / zero / connect, and
+        // whether #N/A counts as empty.
+        return applyEmptyCellsPolicy(numericValues, rawSeriesValues, spec, options.lineLike);
     }, [getSeriesValuesFromRange, getDomainValuesFromRange]);
     // Resize a chart
     const resizeChart = () => {
@@ -353,6 +421,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             }
             if (el.current && !chartRef.current) {
                 chartRef.current = echarts.init(el.current);
+                bindSeriesSelection(chartRef.current);
             }
             if (!geo) {
                 // Map asset failed to load (or unknown scope) — the loader
@@ -633,15 +702,22 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const seriesDisplayName = explicitChartTitle ?? headerTitle ?? rootName ?? "";
             const hierarchyDepth = getHierarchyDepth(hierarchyData);
             const levels = buildHierarchyLevels(hierarchyDepth);
+            // Sizes format like the cells they were read from (Excel's "Linked
+            // to source"), unless the data labels carry their own pattern.
+            const sizeNumberFormat = resolveSourceNumberFormat(spec.sizeData?.[0]
+                ?.sources, getFormattingFromRange, spec.hiddenDimensionStrategy);
             const tooltipFormatter = (params) => {
                 const value = Array.isArray(params.value)
                     ? params.value[params.value.length - 1]
                     : params.value ?? "";
-                return `${params.name}: ${value}`;
+                return `${params.name}: ${formatAxisValue(sizeNumberFormat, value)}`;
             };
             // Spec-level overrides — treemap/sunburst default to no legend,
             // but an authored legend (visibility/position) still wins.
-            const hierarchySeriesLabel = buildSeriesLabelOption(spec.dataLabels);
+            const hierarchyDataLabels = spec.dataLabels;
+            const hierarchySeriesLabel = buildSeriesLabelOption(hierarchyDataLabels && !hierarchyDataLabels.numberFormatPattern
+                ? { ...hierarchyDataLabels, numberFormatPattern: sizeNumberFormat }
+                : hierarchyDataLabels);
             chartRef.current?.setOption({
                 xAxis: [
                     {
@@ -708,6 +784,129 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             debug("Unsupported chart type", spec.chartType);
             return;
         }
+        // --------------------------- Contour ---------------------------
+        // Excel's Contour (`surfaceChart`) is the 3-D Surface seen from above:
+        // a categories × series grid colored by value. Drawn as a cartesian
+        // heatmap (no WebGL), distinct from the SURFACE_3D branch below.
+        const isContour = isContourSpec(spec);
+        if (renderedAsContour.current && !isContour) {
+            chartRef.current?.dispose();
+            chartRef.current = undefined;
+            renderedAsContour.current = false;
+            previousChartType.current = undefined;
+            previousSeriesCount.current = undefined;
+            initializeChart();
+            applyThemeOptions();
+        }
+        if (isContour) {
+            const categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map((v) => String(v ?? ""));
+            const contourSeriesInputs = [];
+            for (const seriesEntry of spec.series ?? []) {
+                const dataLabel = !isNil(seriesEntry.dataLabel) && isAFormula(seriesEntry.dataLabel)
+                    ? coerceCalculatedLabel(await onRequestCalculate(seriesEntry.dataLabel, position.sheetId ?? sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex))
+                    : seriesEntry.dataLabel ?? "";
+                const values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(sanitizeChartValue);
+                contourSeriesInputs.push({ name: dataLabel, values });
+            }
+            const seriesNames = contourSeriesInputs.map((entry, index) => entry.name || `Series ${index + 1}`);
+            const contourPoints = buildContourData(contourSeriesInputs);
+            const [zMin, zMax] = getValueExtent(contourPoints.filter((point) => typeof point[2] === "number"));
+            // Values format like the cells of the series (row) they came from.
+            const contourFormats = resolveSeriesNumberFormats(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+            const contourLabel = buildSeriesLabelOption(spec.dataLabels);
+            if (!renderedAsContour.current && chartRef.current) {
+                chartRef.current.dispose();
+                chartRef.current = undefined;
+            }
+            if (el.current && !chartRef.current) {
+                chartRef.current = echarts.init(el.current);
+                bindSeriesSelection(chartRef.current);
+            }
+            chartRef.current?.setOption({
+                tooltip: {
+                    textStyle: { fontSize: 12 },
+                    trigger: "item",
+                    formatter: (params) => {
+                        const [x, y, z] = (params?.value ?? []);
+                        const value = z === "-" || z === undefined
+                            ? ""
+                            : formatAxisValue(contourFormats[y], z);
+                        return `${seriesNames[y] ?? ""}<br/>${categories[x] ?? ""}: ${value}`;
+                    },
+                },
+                legend: applyLegendOverrides({ ...defaultLegendConfig, show: false }, spec.legend),
+                grid: { left: "3%", right: "12%", bottom: "3%", containLabel: true },
+                xAxis: [
+                    applyAxisOverrides({
+                        type: "category",
+                        data: categories,
+                        splitArea: { show: true },
+                        name: spec.horizontalAxisTitle ?? "",
+                        nameLocation: "middle",
+                        nameGap: 30,
+                    }, spec.categoryAxisOptions),
+                ],
+                yAxis: [
+                    {
+                        type: "category",
+                        data: seriesNames,
+                        splitArea: { show: true },
+                        name: spec.verticalAxisTitle ?? "",
+                        nameLocation: "middle",
+                        nameGap: 50,
+                    },
+                ],
+                visualMap: [
+                    {
+                        type: "continuous",
+                        min: zMin,
+                        max: zMax,
+                        calculable: false,
+                        orient: "vertical",
+                        right: 0,
+                        top: "center",
+                        inRange: { color: [...SURFACE_COLOR_RAMP] },
+                        formatter: (value) => formatAxisValue(contourFormats[0], value),
+                    },
+                ],
+                series: [
+                    {
+                        type: "heatmap",
+                        id: chartSeriesId(0, 0),
+                        data: contourPoints,
+                        ...(contourLabel
+                            ? {
+                                label: {
+                                    ...contourLabel,
+                                    position: "inside",
+                                    formatter: (params) => {
+                                        const [, y, z] = (params?.value ?? []);
+                                        return z === "-" || z === undefined
+                                            ? ""
+                                            : formatAxisValue(contourFormats[y], z);
+                                    },
+                                },
+                            }
+                            : {}),
+                    },
+                ],
+            }, {
+                replaceMerge: [
+                    "series",
+                    "xAxis",
+                    "yAxis",
+                    "visualMap",
+                    "legend",
+                    "grid",
+                    "tooltip",
+                ],
+            });
+            renderedAsContour.current = true;
+            applyThemeOptions();
+            previousChartType.current = spec.chartType;
+            previousSeriesCount.current = 1;
+            return;
+        }
         // ----------------------------- 3-D -----------------------------
         // True 3-D rendering for degraded Excel 3-D / surface payloads,
         // keyed off `sourceChartType` (see the gating block above):
@@ -729,14 +928,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 threeDSeriesInputs.push({ name: dataLabel, values });
             }
             const seriesNames = threeDSeriesInputs.map((entry, index) => entry.name || `Series ${index + 1}`);
-            const threeDPalette = [
+            const threeDPalette = getChartPalette(spec, [
                 theme.themeColors.accent1,
                 theme.themeColors.accent2,
                 theme.themeColors.accent3,
                 theme.themeColors.accent4,
                 theme.themeColors.accent5,
                 theme.themeColors.accent6,
-            ];
+            ]);
             const seriesColorAt = (index) => spec.series?.[index]?.color ??
                 threeDPalette[index % threeDPalette.length];
             // Entering 3-D from a 2-D render: the cartesian option doesn't
@@ -748,22 +947,71 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             }
             if (el.current && !chartRef.current) {
                 chartRef.current = echarts.init(el.current);
+                bindSeriesSelection(chartRef.current);
             }
             // Value axes label integer positions with the category / series
             // name they map to; fractional ticks stay blank.
             const categoryAxisLabel = (value) => Number.isInteger(value) ? categories[value] ?? "" : "";
             const seriesAxisLabel = (value) => Number.isInteger(value) ? seriesNames[value] ?? "" : "";
+            // Excel's 3-D Stacked / 3-D 100% Stacked column and bar: the series
+            // share one depth row and stack on the value axis (echarts-gl bar3D
+            // stacks through echarts' data stacking) instead of fanning out one
+            // depth row per series like 3-D Column.
+            const stackedBar3D = threeDRenderKind === "bar3D" &&
+                (spec.stackedType === "STACKED" ||
+                    spec.stackedType === "PERCENT_STACKED");
+            // Tooltip values are "Linked to source": each series' own cells.
+            const threeDFormats = resolveSeriesNumberFormats(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
             const threeDTooltipFormatter = (params) => {
                 const value = (params?.value ?? []);
                 const categoryLabel = categories[Math.round(value[0] ?? 0)] ?? String(value[0] ?? "");
-                const seriesLabel = seriesNames[Math.round(value[1] ?? 0)] ?? params?.seriesName ?? "";
-                return `${seriesLabel ? `${seriesLabel}<br/>` : ""}${categoryLabel}: ${value[2] ?? ""}`;
+                // Stacked bars and line3D are one echarts series per spec series;
+                // a single bar3D / surface series carries the spec index on y.
+                const seriesIndex = stackedBar3D || threeDRenderKind === "line3D"
+                    ? params?.seriesIndex
+                    : Math.round(value[1] ?? 0);
+                const seriesLabel = stackedBar3D
+                    ? params?.seriesName ?? ""
+                    : seriesNames[Math.round(value[1] ?? 0)] ?? params?.seriesName ?? "";
+                const valueLabel = spec.stackedType === "PERCENT_STACKED" && stackedBar3D
+                    ? `${Math.round((value[2] ?? 0) * 10) / 10}%`
+                    : formatAxisValue(threeDFormats[seriesIndex], value[2]);
+                return `${seriesLabel ? `${seriesLabel}<br/>` : ""}${categoryLabel}: ${valueLabel}`;
             };
             let threeDSeries;
             let visualMap;
             let xAxis3D;
             let yAxis3D;
-            if (threeDRenderKind === "bar3D") {
+            if (stackedBar3D) {
+                xAxis3D = { type: "category", data: categories };
+                yAxis3D = { type: "category", data: [""] };
+                const categoryCount = getCategoryCount(threeDSeriesInputs);
+                const categoryTotals = new Array(categoryCount).fill(0);
+                for (const entry of threeDSeriesInputs) {
+                    entry.values.forEach((value, categoryIndex) => {
+                        if (typeof value === "number" && Number.isFinite(value)) {
+                            categoryTotals[categoryIndex] += value;
+                        }
+                    });
+                }
+                const isPercent = spec.stackedType === "PERCENT_STACKED";
+                threeDSeries = threeDSeriesInputs.map((entry, index) => ({
+                    type: "bar3D",
+                    name: seriesNames[index],
+                    stack: "total",
+                    shading: "lambert",
+                    itemStyle: { color: seriesColorAt(index) },
+                    data: entry.values.flatMap((value, categoryIndex) => {
+                        if (typeof value !== "number" || !Number.isFinite(value)) {
+                            return [];
+                        }
+                        const total = categoryTotals[categoryIndex];
+                        const z = isPercent ? (total === 0 ? 0 : (value / total) * 100) : value;
+                        return [{ value: [categoryIndex, 0, z] }];
+                    }),
+                }));
+            }
+            else if (threeDRenderKind === "bar3D") {
                 xAxis3D = { type: "category", data: categories };
                 yAxis3D = { type: "category", data: seriesNames };
                 threeDSeries = [
@@ -834,7 +1082,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     textStyle: { fontSize: 12 },
                     formatter: threeDTooltipFormatter,
                 },
-                legend: threeDRenderKind === "line3D"
+                legend: threeDRenderKind === "line3D" || stackedBar3D
                     ? applyLegendOverrides({
                         ...defaultLegendConfig,
                         show: seriesNames.length > 1,
@@ -889,8 +1137,23 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const radarStyle = spec.radarStyle ?? "standard";
             const radarColors = radarSeriesInputs.map((_, i) => spec.series?.[i]?.color);
             // Spec-level overrides — radar is polar (no cartesian axes), so
-            // only legend + dataLabel overrides apply here.
-            const radarSeriesLabel = buildSeriesLabelOption(spec.dataLabels);
+            // only legend + dataLabel overrides apply here. Each data item is
+            // one spec series, so labels and tooltip values format with that
+            // series' own source cells.
+            const radarFormats = resolveSeriesNumberFormats(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+            const radarDataLabels = spec.dataLabels;
+            const radarSeriesLabelFor = (seriesIndex) => buildSeriesLabelOption(radarDataLabels && !radarDataLabels.numberFormatPattern
+                ? {
+                    ...radarDataLabels,
+                    numberFormatPattern: radarFormats[seriesIndex],
+                }
+                : radarDataLabels);
+            const radarTooltipFormatter = (params) => {
+                const values = Array.isArray(params?.value) ? params.value : [];
+                const pattern = radarFormats[params?.dataIndex ?? 0];
+                const lines = indicators.map((indicator, i) => `${indicator.name}: ${formatAxisValue(pattern, values[i])}`);
+                return [params?.name ?? "", ...lines].filter(Boolean).join("<br/>");
+            };
             chartRef.current?.setOption({
                 radar: {
                     indicator: indicators.length
@@ -902,15 +1165,17 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     show: radarData.length > 1,
                     data: radarData.map((d) => d.name),
                 }, spec.legend),
-                tooltip: { trigger: "item" },
+                tooltip: { trigger: "item", formatter: radarTooltipFormatter },
                 series: [
                     {
                         type: "radar",
                         symbol: radarStyle === "standard" ? "none" : "circle",
-                        ...(radarSeriesLabel ? { label: radarSeriesLabel } : {}),
                         data: radarData.map((d, i) => ({
                             value: d.value,
                             name: d.name,
+                            ...(radarSeriesLabelFor(i)
+                                ? { label: radarSeriesLabelFor(i) }
+                                : {}),
                             ...(radarStyle === "filled" ? { areaStyle: {} } : {}),
                             ...(radarColors[i]
                                 ? {
@@ -952,7 +1217,15 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // volume pane exists), the value-axis overrides on the price
             // pane's y-axis only — the volume pane keeps its own hidden-label
             // value axis.
-            const stockSeriesLabel = buildSeriesLabelOption(spec.dataLabels);
+            // Each price line / the volume column maps back to one spec series
+            // (`STOCK_ROLES` order), whose cells give its number format.
+            const stockFormats = resolveSeriesNumberFormats(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+            const stockRoleIndex = (role) => STOCK_ROLES[variant].indexOf(role);
+            const stockFormatFor = (role) => stockFormats[stockRoleIndex(role)];
+            const stockDataLabels = spec.dataLabels;
+            const stockSeriesLabelFor = (role) => buildSeriesLabelOption(stockDataLabels && !stockDataLabels.numberFormatPattern
+                ? { ...stockDataLabels, numberFormatPattern: stockFormatFor(role) }
+                : stockDataLabels);
             // V-variants (VHLC / VOHLC) carry a volume series that renders as
             // a column sub-pane under the price plot: two grids stacked
             // vertically (price ~70% of the plot, volume below on its own
@@ -1017,6 +1290,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             value: p.value,
                             itemStyle: { color: p.up ? upColor : downColor },
                         })),
+                        ...(tooltipValueFormatter(stockFormatFor("volume"))
+                            ? {
+                                tooltip: {
+                                    valueFormatter: tooltipValueFormatter(stockFormatFor("volume")),
+                                },
+                            }
+                            : {}),
                     },
                 ]
                 : [];
@@ -1059,6 +1339,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 borderColor: upColor,
                                 borderColor0: downColor,
                             },
+                            ...(tooltipValueFormatter(stockFormatFor("close"))
+                                ? {
+                                    tooltip: {
+                                        valueFormatter: tooltipValueFormatter(stockFormatFor("close")),
+                                    },
+                                }
+                                : {}),
                         },
                         ...volumeSeries,
                     ],
@@ -1077,12 +1364,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 return;
             }
             const lineSeries = toLineSeries(seriesValues, variant);
-            const stockColors = [
+            const stockColors = getChartPalette(spec, [
                 theme.themeColors.accent1,
                 theme.themeColors.accent2,
                 theme.themeColors.accent3,
                 theme.themeColors.accent4,
-            ];
+            ]);
             chartRef.current?.setOption({
                 xAxis: stockXAxis,
                 yAxis: [
@@ -1112,7 +1399,16 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         showSymbol: false,
                         itemStyle: { color: stockColors[i % stockColors.length] },
                         lineStyle: { color: stockColors[i % stockColors.length] },
-                        ...(stockSeriesLabel ? { label: stockSeriesLabel } : {}),
+                        ...(stockSeriesLabelFor(s.role)
+                            ? { label: stockSeriesLabelFor(s.role) }
+                            : {}),
+                        ...(tooltipValueFormatter(stockFormatFor(s.role))
+                            ? {
+                                tooltip: {
+                                    valueFormatter: tooltipValueFormatter(stockFormatFor(s.role)),
+                                },
+                            }
+                            : {}),
                     })),
                     ...volumeSeries,
                 ],
@@ -1145,32 +1441,51 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             ? sanitizeDomainValues(getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy) ?? [])
             : [];
         const aggregateDomainValues = getDomainValuesForAxis(rawPrimaryDomainValues, shouldAggregate);
-        spec.domains?.forEach((domain, domainIndex) => {
-            domain.sources.forEach((sheetRange, sourceIndex) => {
-                let axisData = [];
+        // A hierarchical category axis (PivotChart over nested row fields): the
+        // innermost level is the category axis, the outer levels label-only axes
+        // grouped beneath it — the domain cells are not read.
+        const categoryLevels = isCircularChart
+            ? undefined
+            : resolveCategoryLevels(spec.categoryLevels?.map((level) => flattenChartDataValues([level], getDomainValuesFromRange, spec.hiddenDimensionStrategy, false)));
+        if (categoryLevels) {
+            chartDomains.push(...echartsGroupedCategoryAxes(categoryLevels, {
+                type: "category",
+                show: showAxis,
+                axisLine: { show: true },
+                axisTick: { show: true },
+                splitLine: { show: true },
+                name: isHorizontalBarChart
+                    ? spec.verticalAxisTitle ?? ""
+                    : spec.horizontalAxisTitle ?? "",
+                nameLocation: "middle",
+                nameGap: 30 + 24 * categoryLevels.outer.length,
+            }));
+        }
+        // One category axis per domain (Excel): a domain drawn from several
+        // ranges lists their categories in sequence on that single axis.
+        (categoryLevels ? [] : spec.domains ?? []).forEach((domain, domainIndex) => {
+            const axisData = domain.sources.flatMap((sheetRange, sourceIndex) => {
                 if (domainIndex === 0 && sourceIndex === 0) {
-                    axisData = aggregateDomainValues;
+                    return aggregateDomainValues;
                 }
-                else {
-                    const rawValues = sanitizeDomainValues(getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? []);
-                    axisData = getDomainValuesForAxis(rawValues, shouldAggregate);
-                }
-                const axisTitle = domainIndex === 0 && sourceIndex === 0 && !isCircularChart
-                    ? isHorizontalBarChart
-                        ? spec.verticalAxisTitle ?? ""
-                        : spec.horizontalAxisTitle ?? ""
-                    : undefined;
-                chartDomains.push({
-                    type: "category",
-                    data: axisData,
-                    show: showAxis && !isCircularChart,
-                    axisLine: { show: !isCircularChart },
-                    axisTick: { show: !isCircularChart },
-                    splitLine: { show: !isCircularChart },
-                    name: axisTitle,
-                    nameLocation: "middle",
-                    nameGap: 30,
-                });
+                const rawValues = sanitizeDomainValues(getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? []);
+                return getDomainValuesForAxis(rawValues, shouldAggregate);
+            });
+            const axisTitle = domainIndex === 0 && !isCircularChart
+                ? isHorizontalBarChart
+                    ? spec.verticalAxisTitle ?? ""
+                    : spec.horizontalAxisTitle ?? ""
+                : undefined;
+            chartDomains.push({
+                type: "category",
+                data: axisData,
+                show: showAxis && !isCircularChart,
+                axisLine: { show: !isCircularChart },
+                axisTick: { show: !isCircularChart },
+                splitLine: { show: !isCircularChart },
+                name: axisTitle,
+                nameLocation: "middle",
+                nameGap: 30,
             });
         });
         if (chartDomains.length === 0 && !isCircularChart) {
@@ -1347,7 +1662,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             : (spec.series ?? []).reduce((count, s) => {
                 const seriesType = s.seriesChartType ?? spec.chartType;
                 return seriesType === "bar" || seriesType === "column"
-                    ? count + Math.max(1, s.sources?.length ?? 0)
+                    ? count + 1
                     : count;
             }, 0);
         const specBarGap = overlapToBarGap(spec.overlap);
@@ -1355,7 +1670,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             seriesCount: sideBySideBarCount,
             overlap: isStacked ? 0 : spec.overlap,
         });
-        for (const series of spec.series ?? []) {
+        for (const [specSeriesIndex, series] of (spec.series ?? []).entries()) {
             const dataLabel = !isNil(series.dataLabel) && isAFormula(series.dataLabel)
                 ? coerceCalculatedLabel(await onRequestCalculate(series.dataLabel, position.sheetId ?? sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex))
                 : series.dataLabel ?? "";
@@ -1363,133 +1678,203 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             if (dataLabel) {
                 legend.data?.push(dataLabel);
             }
-            for (const sheetRange of series.sources) {
-                const data = getSeriesData(spec, sheetRange, {
+            // Support per-series chart type for combo charts
+            const effectiveChartType = series.seriesChartType ?? spec.chartType;
+            const lineLike = isLineLikeChartType(effectiveChartType);
+            // Excel plots a series drawn from several ranges as ONE series over
+            // their union — every source's points in sequence, in step with the
+            // single category axis that lists every domain source's categories
+            // (C-68) — not one echarts series (and legend entry) per range.
+            // Pie slices over several ranges label from the domain UNION — every
+            // domain range's labels in sequence, each series range taking its own
+            // window — not the primary domain range alone (C-78).
+            const domainSources = spec.domains?.[0]?.sources ?? [];
+            const pieDomainLabels = spec.chartType === "pie" &&
+                (domainSources.length > 1 || series.sources.length > 1)
+                ? domainSources.flatMap((sheetRange) => getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? [])
+                : undefined;
+            let piePointOffset = 0;
+            const data = series.sources.flatMap((sheetRange) => {
+                const part = getSeriesData(spec, sheetRange, {
                     aggregateEnabled: shouldAggregate,
                     aggregateType: series.aggregateType,
                     rawDomainValues: rawPrimaryDomainValues,
                     orderedDomainValues: aggregateDomainValues,
+                    lineLike,
+                    pieLabels: pieDomainLabels
+                        ? {
+                            domainLabels: pieDomainLabels,
+                            offset: series.sources.length > 1 ? piePointOffset : undefined,
+                        }
+                        : undefined,
                 });
-                // Support per-series chart type for combo charts
-                const effectiveChartType = series.seriesChartType ?? spec.chartType;
-                const seriesEchartsType = chartTypeToEchartsType(effectiveChartType);
-                const seriesStyleAttrs = getEchartsSeriesStyle(effectiveChartType);
-                const seriesEntry = {
-                    type: seriesEchartsType,
-                    name: dataLabel,
-                    data,
-                    stack: isStacked ? "dataLabel" : undefined,
-                    smooth: spec.smooth ?? undefined,
-                    radius: spec.radius ?? (isCircularChart ? [0, "75%"] : undefined),
-                    ...seriesStyleAttrs,
-                };
-                // Plot this series against a secondary value axis. The 2nd
-                // yAxis element is appended below (when any series opts in);
-                // here we point the series at index 1.
-                if (series.useSecondaryAxis) {
-                    seriesEntry.yAxisIndex = 1;
+                if (pieDomainLabels)
+                    piePointOffset += part.length;
+                return part;
+            });
+            const seriesEchartsType = chartTypeToEchartsType(effectiveChartType);
+            const seriesStyleAttrs = getEchartsSeriesStyle(effectiveChartType);
+            const seriesEntry = {
+                type: seriesEchartsType,
+                // Ties the rendered series back to spec.series for click selection
+                // One rendered series per spec series (source index 0).
+                id: chartSeriesId(specSeriesIndex, 0),
+                name: dataLabel,
+                data,
+                stack: isStacked ? "dataLabel" : undefined,
+                smooth: spec.smooth ?? undefined,
+                radius: spec.radius ?? (isCircularChart ? [0, "75%"] : undefined),
+                // "Connect data points with line" bridges the empty cells.
+                ...(connectsAcrossEmptyCells(spec, lineLike)
+                    ? { connectNulls: true }
+                    : {}),
+                ...seriesStyleAttrs,
+            };
+            // Plot this series against a secondary value axis. The 2nd
+            // yAxis element is appended below (when any series opts in);
+            // here we point the series at index 1.
+            if (series.useSecondaryAxis) {
+                seriesEntry.yAxisIndex = 1;
+            }
+            // Handle invertIfNegative for bar/column charts
+            const isBarOrColumn = effectiveChartType === "bar" || effectiveChartType === "column";
+            // Bar layout (overlap/gapWidth) — echarts reads barGap /
+            // barCategoryGap from bar series (the last bar series wins for
+            // the whole coordinate system), so apply them to every
+            // bar/column series. Set before the gradient/noFill branches so
+            // every push path carries them.
+            if (isBarOrColumn) {
+                if (specBarGap !== undefined) {
+                    seriesEntry.barGap = specBarGap;
                 }
-                // Handle invertIfNegative for bar/column charts
-                const isBarOrColumn = effectiveChartType === "bar" || effectiveChartType === "column";
-                // Bar layout (overlap/gapWidth) — echarts reads barGap /
-                // barCategoryGap from bar series (the last bar series wins for
-                // the whole coordinate system), so apply them to every
-                // bar/column series. Set before the gradient/noFill branches so
-                // every push path carries them.
-                if (isBarOrColumn) {
-                    if (specBarGap !== undefined) {
-                        seriesEntry.barGap = specBarGap;
-                    }
-                    if (specBarCategoryGap !== undefined) {
-                        seriesEntry.barCategoryGap = specBarCategoryGap;
-                    }
+                if (specBarCategoryGap !== undefined) {
+                    seriesEntry.barCategoryGap = specBarCategoryGap;
                 }
-                const seriesAny = series;
-                // Gradient fill — overrides solid color when present. echarts
-                // paints it natively via a LinearGradient on itemStyle.color
-                // (and areaStyle for area series / lineStyle for lines).
-                const gradientArgs = gradientToEcharts(series.gradient);
-                if (gradientArgs && !seriesAny.noFill) {
-                    const gradient = new echarts.graphic.LinearGradient(gradientArgs.x, gradientArgs.y, gradientArgs.x2, gradientArgs.y2, gradientArgs.colorStops);
-                    seriesEntry.itemStyle = {
-                        ...(seriesEntry.itemStyle ?? {}),
-                        color: gradient,
-                    };
-                    if (effectiveChartType === "area") {
-                        seriesEntry.areaStyle = {
-                            ...(seriesEntry.areaStyle ?? {}),
-                            color: gradient,
-                        };
-                    }
-                    chartSeries.push(seriesEntry);
-                    pushSeriesOverlays(series, data, dataLabel);
-                    continue;
+            }
+            const seriesAny = series;
+            if (effectiveChartType === "line") {
+                // Excel's "Line" draws no markers; "Line with Markers"
+                // (spec.showMarkers) draws one per point. A series' own marker
+                // wins either way: an authored symbol shows, "none" hides.
+                const markerSymbol = seriesAny.marker?.symbol;
+                const wantsMarkers = markerSymbol === "none"
+                    ? false
+                    : Boolean(spec.showMarkers) || !isNil(markerSymbol);
+                seriesEntry.showSymbol = wantsMarkers;
+                if (wantsMarkers) {
+                    seriesEntry.symbol =
+                        mapMarkerSymbolToEcharts(markerSymbol) ?? "circle";
+                    seriesEntry.symbolSize = seriesAny.marker?.size ?? 6;
                 }
-                if (seriesAny.noFill) {
-                    // Transparent series (Gantt lag offset, etc.) — fill it
-                    // with `transparent` so layout is preserved but nothing
-                    // paints. Legend entries are also suppressed via `name: ""`
-                    // since the series carries no semantic information.
-                    seriesEntry.itemStyle = {
-                        ...(seriesEntry.itemStyle ?? {}),
-                        color: "transparent",
-                        borderColor: "transparent",
+            }
+            // Gradient fill — overrides solid color when present. echarts
+            // paints it natively via a LinearGradient on itemStyle.color
+            // (and areaStyle for area series / lineStyle for lines).
+            const gradientArgs = gradientToEcharts(series.gradient);
+            if (gradientArgs && !seriesAny.noFill) {
+                const gradient = new echarts.graphic.LinearGradient(gradientArgs.x, gradientArgs.y, gradientArgs.x2, gradientArgs.y2, gradientArgs.colorStops);
+                seriesEntry.itemStyle = {
+                    ...(seriesEntry.itemStyle ?? {}),
+                    color: gradient,
+                };
+                if (effectiveChartType === "area") {
+                    seriesEntry.areaStyle = {
+                        ...(seriesEntry.areaStyle ?? {}),
+                        color: gradient,
                     };
                 }
-                else if (isBarOrColumn &&
-                    Array.isArray(seriesAny.dataPointColors) &&
-                    seriesAny.dataPointColors.length) {
-                    // Per-data-point color overrides — Gantt-style charts colour
-                    // each task differently via `<c:dPt>`. Echarts accepts an
-                    // `itemStyle.color` function that receives the data index;
-                    // we look up the override or fall back to the series color.
-                    const overrides = new Map();
-                    for (const dp of seriesAny.dataPointColors) {
-                        if (typeof dp.idx === "number" && typeof dp.color === "string") {
-                            overrides.set(dp.idx, dp.color);
-                        }
+            }
+            else if (seriesAny.noFill) {
+                // Transparent series (Gantt lag offset, etc.) — fill it
+                // with `transparent` so layout is preserved but nothing
+                // paints. Legend entries are also suppressed via `name: ""`
+                // since the series carries no semantic information.
+                seriesEntry.itemStyle = {
+                    ...(seriesEntry.itemStyle ?? {}),
+                    color: "transparent",
+                    borderColor: "transparent",
+                };
+            }
+            else if (isBarOrColumn &&
+                Array.isArray(seriesAny.dataPointColors) &&
+                seriesAny.dataPointColors.length) {
+                // Per-data-point color overrides — Gantt-style charts colour
+                // each task differently via `<c:dPt>`. Echarts accepts an
+                // `itemStyle.color` function that receives the data index;
+                // we look up the override or fall back to the series color.
+                const overrides = new Map();
+                for (const dp of seriesAny.dataPointColors) {
+                    if (typeof dp.idx === "number" && typeof dp.color === "string") {
+                        overrides.set(dp.idx, dp.color);
                     }
-                    const fallback = series.color ?? theme.themeColors.accent1;
-                    seriesEntry.itemStyle = {
-                        ...(seriesEntry.itemStyle ?? {}),
-                        color: (params) => overrides.get(params.dataIndex) ?? fallback,
-                    };
                 }
-                else if (isBarOrColumn && series.invertIfNegative) {
-                    const positiveColor = series.color ?? theme.themeColors.accent1;
-                    const negativeColor = series.negativeColor ?? "#FF0000";
-                    // Use a color function that returns different colors based on value
-                    seriesEntry.itemStyle = {
-                        ...(seriesEntry.itemStyle ?? {}),
-                        color: (params) => {
-                            const value = Array.isArray(params.data)
-                                ? params.data[1]
-                                : params.data?.value ?? params.data;
-                            return typeof value === "number" && value < 0
-                                ? negativeColor
-                                : positiveColor;
-                        },
-                    };
+                const fallback = series.color ?? theme.themeColors.accent1;
+                seriesEntry.itemStyle = {
+                    ...(seriesEntry.itemStyle ?? {}),
+                    color: (params) => overrides.get(params.dataIndex) ?? fallback,
+                };
+            }
+            else if (isCircularChart &&
+                Array.isArray(seriesAny.dataPointColors) &&
+                seriesAny.dataPointColors.length) {
+                // Per-slice colours (`<c:dPt>` on a pie / doughnut series): an
+                // authored slice colour wins, the other slices keep the palette
+                // cycle the chart-level `color` option would give them.
+                const overrides = new Map();
+                for (const dp of seriesAny.dataPointColors) {
+                    if (typeof dp.idx === "number" && typeof dp.color === "string") {
+                        overrides.set(dp.idx, dp.color);
+                    }
                 }
-                else if (series.color) {
-                    seriesEntry.itemStyle = {
-                        ...(seriesEntry.itemStyle ?? {}),
-                        color: series.color,
-                    };
-                    seriesEntry.lineStyle = {
-                        ...(seriesEntry.lineStyle ?? {}),
+                const slicePalette = getChartPalette(spec, [
+                    theme.themeColors.accent1,
+                    theme.themeColors.accent2,
+                    theme.themeColors.accent3,
+                    theme.themeColors.accent4,
+                    theme.themeColors.accent5,
+                    theme.themeColors.accent6,
+                ]);
+                seriesEntry.itemStyle = {
+                    ...(seriesEntry.itemStyle ?? {}),
+                    color: (params) => overrides.get(params.dataIndex) ??
+                        series.color ??
+                        slicePalette[params.dataIndex % slicePalette.length],
+                };
+            }
+            else if (isBarOrColumn && series.invertIfNegative) {
+                const positiveColor = series.color ?? theme.themeColors.accent1;
+                const negativeColor = series.negativeColor ?? "#FF0000";
+                // Use a color function that returns different colors based on value
+                seriesEntry.itemStyle = {
+                    ...(seriesEntry.itemStyle ?? {}),
+                    color: (params) => {
+                        const value = Array.isArray(params.data)
+                            ? params.data[1]
+                            : params.data?.value ?? params.data;
+                        return typeof value === "number" && value < 0
+                            ? negativeColor
+                            : positiveColor;
+                    },
+                };
+            }
+            else if (series.color) {
+                seriesEntry.itemStyle = {
+                    ...(seriesEntry.itemStyle ?? {}),
+                    color: series.color,
+                };
+                seriesEntry.lineStyle = {
+                    ...(seriesEntry.lineStyle ?? {}),
+                    color: series.color,
+                };
+                if (effectiveChartType === "area") {
+                    seriesEntry.areaStyle = {
+                        ...(seriesEntry.areaStyle ?? {}),
                         color: series.color,
                     };
-                    if (effectiveChartType === "area") {
-                        seriesEntry.areaStyle = {
-                            ...(seriesEntry.areaStyle ?? {}),
-                            color: series.color,
-                        };
-                    }
                 }
-                chartSeries.push(seriesEntry);
-                pushSeriesOverlays(series, data, dataLabel);
             }
+            chartSeries.push(seriesEntry);
+            pushSeriesOverlays(series, data, dataLabel);
         }
         if (isOfPie) {
             // Pie-of-pie / bar-of-pie — Excel splits the minor slices into a
@@ -1540,14 +1925,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             chartSeries.length = 0;
             // Palette continues from the main plot into the secondary one so
             // slices keep distinct colors across both plots (Excel behavior).
-            const ofPiePalette = [
+            const ofPiePalette = getChartPalette(spec, [
                 theme.themeColors.accent1,
                 theme.themeColors.accent2,
                 theme.themeColors.accent3,
                 theme.themeColors.accent4,
                 theme.themeColors.accent5,
                 theme.themeColors.accent6,
-            ];
+            ]);
             const paletteAt = (index) => ofPiePalette[index % ofPiePalette.length];
             chartSeries.push({
                 type: "pie",
@@ -1951,30 +2336,82 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         const hasSecondaryAxis = !isCircularChart &&
             !isHorizontalBarChart &&
             ((spec.series ?? []).some((s) => s.useSecondaryAxis) || isPareto);
+        // "Linked to source" number formats. A percent-stacked value axis
+        // plots normalized 0-100 percentages, so it never links to the
+        // source cells; its data labels still format `originalValue` below.
+        const isPercentStackedBars = spec.stackedType === "PERCENT_STACKED" &&
+            (spec.chartType === "bar" || spec.chartType === "column");
+        const primaryAxisNumberFormat = isPercentStackedBars
+            ? undefined
+            : resolveValueAxisNumberFormat({
+                axisOptions: spec.valueAxisOptions,
+                series: (spec.series ?? []).filter((s) => !s.useSecondaryAxis),
+                getFormattingFromRange,
+                hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+            });
+        const secondaryAxisNumberFormat = resolveValueAxisNumberFormat({
+            axisOptions: spec.secondaryValueAxisOptions,
+            series: (spec.series ?? []).filter((s) => s.useSecondaryAxis),
+            getFormattingFromRange,
+            hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+        });
+        const axisNumberFormatFor = (s) => s?.yAxisIndex === 1
+            ? secondaryAxisNumberFormat
+            : primaryAxisNumberFormat;
+        // Data labels and tooltips are linked to each series' OWN source
+        // cells (Excel's `<c:dLbls><c:numFmt sourceLinked="1">`); the axis
+        // format only steps in for a series whose cells are General.
+        const seriesNumberFormats = resolveSeriesNumberFormats(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
+        const seriesNumberFormatFor = (s) => {
+            const specIndex = chartSeriesSpecIndex(s?.id);
+            return ((specIndex === undefined ? undefined : seriesNumberFormats[specIndex]) ??
+                axisNumberFormatFor(s));
+        };
         const tooltipConfig = {
             textStyle: {
                 fontSize: 12,
             },
             trigger: isCircularChart ? "item" : "axis",
-            formatter: isCircularChart ? "{b}: {c} ({d}%)" : undefined,
+            formatter: isCircularChart
+                ? primaryAxisNumberFormat
+                    ? circularTooltipFormatter(primaryAxisNumberFormat)
+                    : "{b}: {c} ({d}%)"
+                : undefined,
         };
         // Phase 5.1: apply legend / axis / dataLabels / doughnut overrides.
         const finalLegend = applyLegendOverrides(legend, spec.legend);
-        const seriesLabelOption = buildSeriesLabelOption(spec.dataLabels);
+        // Data labels fall back to the series' axis format when the spec has
+        // no explicit `<c:dLbls><c:numFmt>` — Excel's "Linked to source".
+        const dataLabelOptions = spec.dataLabels;
+        const seriesLabelOptionFor = (s) => buildSeriesLabelOption(dataLabelOptions && !dataLabelOptions.numberFormatPattern
+            ? {
+                ...dataLabelOptions,
+                numberFormatPattern: seriesNumberFormatFor(s),
+            }
+            : dataLabelOptions);
         // For doughnut, surface the inner-radius hole on each pie series.
         // Excel persists `holeSize` as a 0-90 percentage; we normalize to a
         // 0-1 fraction (doughnutHoleSize). Default to 0.5 when unset.
         const isDoughnut = spec.chartType === "doughnut";
         const doughnutHoleSize = spec.doughnutHoleSize;
+        // Exploded pie / doughnut: every slice sits in the `select` state,
+        // offset outward by the spec's percentage of the pie radius.
+        const explosion = isCircularChart && !isOfPie ? resolveExplosion(spec) : 0;
+        explodedRef.current = explosion > 0;
+        const explosionOffset = explosionOffsetPx(explosion, pieRadiusPx(isDoughnut ? [0, "75%"] : spec.radius, width ?? 0, height ?? 0));
         // PERCENT_STACKED — echarts has no built-in `barnorm: 'percent'`,
         // so we normalize per category here: each cell becomes
         // (value / category_total) * 100, while the original value is
         // tucked into a sibling field so the label formatter can still
-        // surface the dollar amount. Touches only bar/column series in
-        // the percent-stacked spec; other charts pass through unchanged.
+        // surface the dollar amount. Touches only the stacked base series
+        // (bar/column, and the line series of 100% stacked line / area
+        // charts); overlays and other charts pass through unchanged.
         if (spec.stackedType === "PERCENT_STACKED" &&
-            (spec.chartType === "bar" || spec.chartType === "column")) {
-            const barSeries = chartSeries.filter((s) => s?.type === "bar");
+            (spec.chartType === "bar" ||
+                spec.chartType === "column" ||
+                spec.chartType === "line" ||
+                spec.chartType === "area")) {
+            const barSeries = chartSeries.filter((s) => s?.stack !== undefined && (s?.type === "bar" || s?.type === "line"));
             // Length of the value axis = max length across stacked series.
             const len = barSeries.reduce((m, s) => Math.max(m, Array.isArray(s.data) ? s.data.length : 0), 0);
             const categoryTotals = new Array(len).fill(0);
@@ -2003,9 +2440,37 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         }
         const seriesWithLabels = chartSeries.map((s) => {
             const next = { ...s };
+            const seriesLabelOption = seriesLabelOptionFor(s);
             if (seriesLabelOption) {
                 next.label = { ...(s?.label ?? {}), ...seriesLabelOption };
             }
+            // Tooltip values of the value-axis series (a boxplot / candlestick
+            // tooltip lists its own statistics and keeps echarts' default).
+            const seriesTooltipValueFormatter = VALUE_TOOLTIP_SERIES_TYPES.has(s?.type)
+                ? valueAxisLabelFormatter(seriesNumberFormatFor(s))
+                : undefined;
+            if (seriesTooltipValueFormatter && s?.tooltip?.show !== false) {
+                next.tooltip = {
+                    ...(s?.tooltip ?? {}),
+                    valueFormatter: seriesTooltipValueFormatter,
+                };
+            }
+            if (next.type === "pie") {
+                const pieNumberFormat = seriesNumberFormatFor(s);
+                if (pieNumberFormat && s?.tooltip?.show !== false) {
+                    next.tooltip = {
+                        ...(s?.tooltip ?? {}),
+                        formatter: circularTooltipFormatter(pieNumberFormat),
+                    };
+                }
+                if (explosionOffset > 0 && Array.isArray(next.data)) {
+                    next.selectedMode = "multiple";
+                    next.selectedOffset = explosionOffset;
+                    next.data = next.data.map((item) => item !== null && typeof item === "object"
+                        ? { ...item, selected: true }
+                        : { value: item, selected: true });
+                }
+            }
             if (isDoughnut && next.type === "pie") {
                 const inner = typeof doughnutHoleSize === "number"
                     ? Math.round(Math.max(0, Math.min(0.9, doughnutHoleSize)) * 100)
@@ -2061,7 +2526,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         applyAxisOverrides({
                             ...valueAxisBase,
                             name: spec.horizontalAxisTitle ?? "",
-                        }, spec.valueAxisOptions),
+                        }, spec.valueAxisOptions, primaryAxisNumberFormat),
                     ];
                 }
                 const base = chartDomains.length > 0
@@ -2136,7 +2601,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     return base.map((axis) => applyAxisOverrides(axis, spec.categoryAxisOptions));
                 }
                 const axes = [
-                    applyAxisOverrides({ ...valueAxisBase, name: spec.verticalAxisTitle ?? "" }, spec.valueAxisOptions),
+                    applyAxisOverrides({ ...valueAxisBase, name: spec.verticalAxisTitle ?? "" }, spec.valueAxisOptions, primaryAxisNumberFormat),
                 ];
                 if (hasSecondaryAxis) {
                     axes.push(applyAxisOverrides({
@@ -2151,7 +2616,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 axisLabel: { formatter: "{value}%" },
                             }
                             : {}),
-                    }, spec.secondaryValueAxisOptions));
+                    }, spec.secondaryValueAxisOptions, secondaryAxisNumberFormat));
                 }
                 return axes;
             })(),
@@ -2175,6 +2640,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             CandlestickChart,
             CustomChart,
             FunnelChart,
+            HeatmapChart,
             LineChart,
             PieChart,
             EchartsRadarChart,
@@ -2183,6 +2649,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             SunburstChart,
             CanvasRenderer,
             DatasetComponent,
+            VisualMapComponent,
         ]);
         initializeChart();
     }, []);
@@ -2244,14 +2711,17 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         color: textColor,
                     },
                 },
-                color: [
+                color: getChartPalette(chart.spec, [
                     theme.themeColors.accent1,
                     theme.themeColors.accent2,
                     theme.themeColors.accent3,
                     theme.themeColors.accent4,
                     theme.themeColors.accent5,
                     theme.themeColors.accent6,
-                ],
+                ]),
+                // Excel's Format Chart Area fill; `transparent` (echarts' own
+                // default) so clearing the fill undoes an earlier setOption.
+                backgroundColor: chart.spec.backgroundColor ?? "transparent",
             };
             // Skip when rendering 3-D or a region map: merging a cartesian
             // yAxis into a grid3D / map option would create a stray empty
@@ -2273,7 +2743,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     // Update chart properties
     useIsomorphicLayoutEffect(() => {
         applyThemeOptions();
-    }, [theme, title, isDarkMode, chart.spec.chartType]);
+    }, [
+        theme,
+        title,
+        isDarkMode,
+        chart.spec.chartType,
+        chart.spec.palette,
+        chart.spec.backgroundColor,
+    ]);
     // Draw chart. `glUpgradeTick` re-runs the draw when the lazily loaded
     // echarts-gl module resolves, upgrading a 3-D spec's immediate 2-D
     // fallback to the true 3-D rendering.
@@ -2283,6 +2760,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         chart.spec,
         getDomainValuesFromRange,
         getSeriesValuesFromRange,
+        getFormattingFromRange,
         glUpgradeTick,
     ]);
     // Resize chart
@@ -2297,15 +2775,38 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     useIsomorphicLayoutEffect(() => {
         chartRef.current?.resize({ silent: true });
     }, [width, height]);
+    const chartPngDataUrl = () => chartRef.current?.getDataURL({
+        type: "png",
+        pixelRatio: 2,
+        backgroundColor: chart.spec.backgroundColor ??
+            getStringifiedColor({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme),
+    });
     const onDownloadChart = () => {
-        if (chartRef.current) {
-            const url = chartRef.current.getDataURL({
-                type: "png",
-                backgroundColor: getStringifiedColor({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme),
-            });
+        const url = chartPngDataUrl();
+        if (url) {
             createDownloadableFile(chart.spec.title ?? "Chart", url);
         }
     };
+    // Copy as Picture / print preview — the same raster as the download.
+    const exportChartPng = async () => dataUrlToBlob(chartPngDataUrl());
+    // Excel's "Switch Row/Column" — offered to the grid's right-click menu
+    // when the host can persist the chart and the sources transpose.
+    const switchRowColumnAction = onUpdateChart && !readonly && canSwitchRowColumn(spec)
+        ? () => {
+            const next = switchRowColumn(spec, {
+                getFormattedValue: cellLabelGetterFromRangeReader(getDomainValuesFromRange),
+            });
+            if (next)
+                onUpdateChart({ ...chart, spec: next });
+        }
+        : undefined;
+    // The grid's right-click menu offers these without knowing the renderer.
+    useRegisterChartActions(chart.chartId, {
+        requestEdit: onRequestEdit ? () => onRequestEdit(chart) : undefined,
+        downloadPng: onDownloadChart,
+        exportPng: exportChartPng,
+        switchRowColumn: switchRowColumnAction,
+    });
     // Excel's "Rounded Corners" chart style (`<c:roundedCorners val="1"/>`
     // at the chartSpace root). Default per OOXML §21.2.2.183 is square,
     // so only opt in when the workbook explicitly set the flag — otherwise
@@ -2314,6 +2815,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         ? { borderRadius: 8, overflow: "hidden" }
         : undefined;
     return (React.createElement("div", { className: "flex flex-1", style: roundedCornersStyle },
+        fieldButtons,
         isSelected ? (React.createElement(DropdownMenu, null,
             React.createElement(DropdownMenuTrigger, { asChild: true },
                 React.createElement(IconButton, { className: "absolute right-1 top-1 z-10" },