@rowsncolumns/charts 28.0.0 → 28.1.0

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

@@ -1,16 +1,27 @@
 import { DotsVerticalIcon } from "@rowsncolumns/icons";
-import { getStringifiedColor, useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { getStringifiedColor, useFocusSheet, useRegisterChartActions, useSetSelectedChartSeries, } from "@rowsncolumns/spreadsheet";
 import { useSubscribeToSheet } from "@rowsncolumns/spreadsheet-state";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, useIsomorphicLayoutEffect, useOnVisibilityChange, } from "@rowsncolumns/ui";
 import { debug, isAFormula, isNil, ssfFormat } from "@rowsncolumns/utils";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import Plot from "react-plotly.js";
 import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../../utils/aggregation";
+import { formatAxisValue, numberFormatToPlotlyTicks, resolveSeriesNumberFormats, resolveValueAxisNumberFormat, } from "../../utils/axis-number-format";
 import { computeBoxplotSummary } from "../../utils/boxplot";
 import { createBubbleSizeScale, prepareBubbleSeriesData, toLabelString, } from "../../utils/bubble";
+import { canSwitchRowColumn, cellLabelGetterFromRangeReader, switchRowColumn, } from "../../utils/chart-orientation";
+import { dataUrlToBlob } from "../../utils/chart-image";
+import { getChartPalette } from "../../utils/chart-styles";
 import { coerceCalculatedLabel } from "../../utils/chart-spec-utils";
+import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, isLineLikeChartType, } from "../../utils/empty-cells";
 import { computeErrorBars, resolveCustomErrorBarValues, } from "../../utils/error-bars";
+import { plotlyMulticategoryX, resolveCategoryLevels, } from "../../utils/category-levels";
 import { gradientToPlotly } from "../../utils/gradient";
+import { plotlyTitleText } from "../../utils/plotly-title";
+import { explosionToPlotlyPull, resolveExplosion, } from "../../utils/pie-explosion";
+import { resolvePlotlyClickSelection, wasDragged, } from "../../utils/plotly-click";
+import { buildPlotlySurfaceTrace } from "../../utils/plotly-surface";
+import { normalize3DSourceType, } from "../../utils/three-d";
 import { extractHierarchyRows, getHierarchyHeaderTitle, toPlotlyHierarchy, } from "../../utils/hierarchy";
 import { binHistogram, computePareto, isParetoSpec, } from "../../utils/histogram";
 import { clampSecondPieSize, isOfPieChartSpec, otherSliceHalfAngle, resolveOfPieType, splitOfPie, } from "../../utils/of-pie";
@@ -104,10 +115,20 @@ const applyLegendOverridesPlotly = (legend, opts) => {
     next.font = applyTextFormatToFont(next.font, opts.textFormat);
     return { legend: next, showlegend: true };
 };
-const applyAxisOverridesPlotly = (axis, opts) => {
-    if (!opts)
+/**
+ * `numberFormatPattern` is the axis' RESOLVED format (explicit pattern or
+ * the linked source-cell format). Plotly formats ticks AND hover values
+ * through the axis `tickformat` / prefix / suffix, so converting the
+ * pattern once covers both; patterns outside the d3 subset keep plotly's
+ * default labels.
+ */
+const applyAxisOverridesPlotly = (axis, opts, numberFormatPattern) => {
+    const ticks = numberFormatToPlotlyTicks(numberFormatPattern);
+    if (!opts && !ticks)
         return axis;
-    const next = { ...(axis ?? {}) };
+    const next = { ...(axis ?? {}), ...(ticks ?? {}) };
+    if (!opts)
+        return next;
     if (opts.logarithmic)
         next.type = "log";
     if (opts.reverse)
@@ -148,7 +169,7 @@ const PLOTLY_DLBL_POS_BAR = {
     outsideEnd: "outside",
     bestFit: "outside",
 };
-const applyDataLabelsToTracePlotly = (trace, opts, chartType) => {
+const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat) => {
     if (!opts?.show)
         return trace;
     const next = { ...trace };
@@ -166,18 +187,33 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType) => {
             parts.push("percent");
         next.textinfo = parts.length ? parts.join("+") : "value";
         next.textposition = position;
+        // Values format like their source cells (or the authored `<c:numFmt>`):
+        // plotly's own `%{value}` is a raw number, so the formatted strings
+        // ride on `text` and a `texttemplate` mirrors the textinfo parts.
+        const pattern = opts.numberFormatPattern ?? sourceNumberFormat;
+        if (pattern) {
+            const values = Array.isArray(next.values) ? next.values : [];
+            next.text = values.map((v) => formatAxisValue(pattern, v));
+            next.texttemplate = next.textinfo
+                .split("+")
+                .map((part) => (part === "value" ? "%{text}" : `%{${part}}`))
+                .join("<br>");
+        }
     }
     else {
         // <c:dLbls><c:numFmt formatCode=…> — when authored, run each value
         // through the same numfmt grammar the spreadsheet uses (`"$"#,##0`
         // → `$1,831`). Plotly supports this natively via `texttemplate`
         // with the d3-format mini-language, but our patterns are
-        // SpreadsheetML — easier to pre-format the strings.
-        const pattern = opts.numberFormatPattern;
-        const yVals = Array.isArray(next.y) ? next.y : [];
+        // SpreadsheetML — easier to pre-format the strings. Without an
+        // authored pattern the labels link to the source-cell format.
+        const pattern = opts.numberFormatPattern ?? sourceNumberFormat;
+        // Horizontal bars carry their values on `x`.
+        const values = next.orientation === "h" ? next.x : next.y;
+        const vals = Array.isArray(values) ? values : [];
         next.text = pattern
-            ? yVals.map((v) => (v === null || v === undefined ? "" : ssfFormat(pattern, v)))
-            : next.y;
+            ? vals.map((v) => (v === null || v === undefined ? "" : ssfFormat(pattern, v)))
+            : values;
         next.textposition = position;
     }
     return next;
@@ -251,6 +287,30 @@ const sanitizeChartValue = (value) => {
     }
     return undefined;
 };
+/**
+ * A series drawn from several ranges is ONE series over their union
+ * (Excel): every range's points in sequence. A single range passes through
+ * untouched so the common path renders exactly as before.
+ */
+const mergeSeriesData = (parts) => {
+    if (parts.length === 1)
+        return parts[0];
+    if (parts.some((part) => !Array.isArray(part))) {
+        const values = [];
+        const labels = [];
+        for (const part of parts) {
+            if (Array.isArray(part)) {
+                values.push(...part);
+            }
+            else {
+                values.push(...part.values);
+                labels.push(...part.labels);
+            }
+        }
+        return { values, labels };
+    }
+    return parts.flatMap((part) => part);
+};
 /**
  * Add alpha transparency to a color (hex or rgb)
  */
@@ -274,13 +334,36 @@ const addAlphaToColor = (color, alpha) => {
     }
     return color;
 };
-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 hierarchyTitleRef = useRef(undefined);
     const explicitChartTitle = chart.spec.title ?? undefined;
     const title = explicitChartTitle ?? hierarchyTitleRef.current;
     const plotRef = useRef(null);
+    // The plotted `<div>` plotly hands back on init — what `Plotly.toImage`
+    // rasterises for Copy as Picture and the print preview.
+    const graphDivRef = useRef(null);
     const focusSheet = useFocusSheet();
+    // Excel selects a data series (or one data point) when it is clicked
+    // inside the chart and the grid highlights its source cells. The plot
+    // is interactive with `dragmode: false`, so plotly reports the click but
+    // never starts its own drag — a body drag still moves the frame. plotly
+    // does not see that drag either, so its mouseup still counts as a click:
+    // the pointer-down position tells the two apart.
+    const setSelectedChartSeries = useSetSelectedChartSeries();
+    const pointerDownRef = useRef(undefined);
+    const handlePointerDownCapture = useCallback((event) => {
+        pointerDownRef.current = { x: event.clientX, y: event.clientY };
+    }, []);
+    const handlePlotClick = useCallback((event) => {
+        if (wasDragged(pointerDownRef.current, event.event)) {
+            return;
+        }
+        const selection = resolvePlotlyClickSelection(event.points, chart.spec.series?.length ?? 0);
+        if (!selection)
+            return;
+        setSelectedChartSeries({ chartId: chart.chartId, ...selection });
+    }, [chart, setSelectedChartSeries]);
     const shouldFocusSheetRef = useRef(false);
     const [plotData, setPlotData] = useState([]);
     const [layout, setLayout] = useState({});
@@ -307,6 +390,15 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         // Use sanitized values - errors like #N/A become undefined
         const seriesValues = sanitizedValues;
         if ((spec.chartType === "pie" || spec.chartType === "doughnut")) {
+            if (options.pieLabels) {
+                const { domainLabels, offset } = options.pieLabels;
+                return {
+                    values: seriesValues,
+                    labels: offset === undefined
+                        ? domainLabels
+                        : domainLabels.slice(offset, offset + seriesValues.length),
+                };
+            }
             const domainSheetRange = spec.domains[0]?.sources[0];
             if (!domainSheetRange) {
                 return { values: [], labels: [] };
@@ -317,7 +409,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 labels: domainValues,
             };
         }
-        return seriesValues;
+        // Excel's "Hidden and Empty Cells": gaps / zero / connect, and
+        // whether #N/A counts as empty.
+        return applyEmptyCellsPolicy(seriesValues, rawSeriesValues, spec, options.lineLike);
     }, [getSeriesValuesFromRange, getDomainValuesFromRange]);
     /**
      * Triggers a chart update
@@ -333,7 +427,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             theme: 1,
             tint: isDarkMode ? 1 : 0,
         }, theme);
-        const bgColor = getStringifiedColor({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
+        // Excel's Format Chart Area fill wins over the theme paper colour.
+        const bgColor = spec.backgroundColor ??
+            getStringifiedColor({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
         const gridColor = isDarkMode ? "rgba(255,255,255,0.3)" : "#CCCCCC";
         if (isBubble) {
             const skipHeaders = spec.useFirstRowAsHeaders !== false;
@@ -376,14 +472,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             });
             const sizeScale = createBubbleSizeScale(sizeValues);
             const hasStringX = categories.length > 0;
-            const palette = [
+            const palette = getChartPalette(spec, [
                 theme.themeColors.accent1,
                 theme.themeColors.accent2,
                 theme.themeColors.accent3,
                 theme.themeColors.accent4,
                 theme.themeColors.accent5,
                 theme.themeColors.accent6,
-            ];
+            ]);
             // Scatter and bubble share the same "BubbleChartSpec" shape but
             // render very differently. Scatter is small fixed-size markers
             // (optionally connected by a line per `scatterStyle`); bubble
@@ -485,7 +581,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const legendFmt = spec.legend?.textFormat;
             const bubbleLayout = {
                 title: {
-                    text: title ?? undefined,
+                    text: plotlyTitleText(title, spec.titleTextFormat),
                     font: {
                         family: titleFmt?.fontFamily ?? "Untitled Sans, apple-system, sans-serif",
                         size: titleFmt?.fontSize ?? 16,
@@ -562,7 +658,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             };
             const layoutForHierarchy = {
                 title: {
-                    text: title ?? undefined,
+                    text: plotlyTitleText(title, spec.titleTextFormat),
                     font: {
                         family: "Untitled Sans, apple-system, sans-serif",
                         size: 16,
@@ -638,7 +734,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             };
             setPlotData([regionTrace]);
             setLayout({
-                title: { text: title ?? undefined },
+                title: { text: plotlyTitleText(title, spec.titleTextFormat) },
                 font: { color: textColor },
                 paper_bgcolor: bgColor,
                 plot_bgcolor: bgColor,
@@ -662,6 +758,69 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             });
             return;
         }
+        // ------------------------ Surface / Contour ------------------------
+        // Excel's Surface family: `surface3DChart` is a 3-D height field over
+        // categories × series (plotly `surface`, WebGL), `surfaceChart` is
+        // its top-down Contour view (plotly `contour`, SVG). Both take the
+        // same z grid: one row per series, one column per category.
+        const surfaceToken = normalize3DSourceType(spec.sourceChartType);
+        if (surfaceToken === "SURFACE" || surfaceToken === "SURFACE_3D") {
+            const categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map((v) => String(v ?? ""));
+            const surfaceSeriesInputs = [];
+            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((v) => (typeof v === "number" ? v : Number(v)));
+                surfaceSeriesInputs.push({ name: dataLabel, values });
+            }
+            const seriesNames = surfaceSeriesInputs.map((entry, index) => entry.name || `Series ${index + 1}`);
+            const surfaceTrace = buildPlotlySurfaceTrace(surfaceToken, surfaceSeriesInputs, categories, seriesNames, resolveSeriesNumberFormats(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy));
+            const surfaceLayout = {
+                title: {
+                    text: plotlyTitleText(title, spec.titleTextFormat),
+                    font: {
+                        family: "Untitled Sans, apple-system, sans-serif",
+                        size: 16,
+                        color: textColor,
+                    },
+                    x: 0.02,
+                    xanchor: "left",
+                },
+                font: {
+                    family: "Untitled Sans, apple-system, sans-serif",
+                    size: 12,
+                    color: textColor,
+                },
+                paper_bgcolor: bgColor,
+                plot_bgcolor: bgColor,
+                showlegend: false,
+                margin: { l: 60, r: 20, t: 50, b: 50 },
+                ...(surfaceToken === "SURFACE"
+                    ? {
+                        xaxis: {
+                            title: { text: spec.horizontalAxisTitle ?? "" },
+                            automargin: true,
+                            color: textColor,
+                        },
+                        yaxis: {
+                            title: { text: spec.verticalAxisTitle ?? "" },
+                            automargin: true,
+                            color: textColor,
+                        },
+                    }
+                    : {
+                        scene: {
+                            xaxis: { title: { text: spec.horizontalAxisTitle ?? "" } },
+                            yaxis: { title: { text: "" } },
+                            zaxis: { title: { text: spec.verticalAxisTitle ?? "" } },
+                        },
+                    }),
+            };
+            setPlotData([surfaceTrace]);
+            setLayout(surfaceLayout);
+            return;
+        }
         // ---------------------------- Radar ----------------------------
         // Plotly renders radar via `scatterpolar` traces: r = the values,
         // theta = the category names (closed by appending the first point).
@@ -698,7 +857,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const maxR = indicators.reduce((m, ind) => Math.max(m, ind.max), 0);
             setPlotData(radarTraces);
             setLayout({
-                title: { text: title ?? undefined },
+                title: { text: plotlyTitleText(title, spec.titleTextFormat) },
                 font: { color: textColor },
                 paper_bgcolor: bgColor,
                 plot_bgcolor: bgColor,
@@ -772,7 +931,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 };
                 setPlotData(hasVolume ? [candleTrace, buildVolumeTrace(xs)] : [candleTrace]);
                 setLayout({
-                    title: { text: title ?? undefined },
+                    title: { text: plotlyTitleText(title, spec.titleTextFormat) },
                     font: { color: textColor },
                     paper_bgcolor: bgColor,
                     plot_bgcolor: bgColor,
@@ -798,12 +957,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 return;
             }
             const lineSeries = toLineSeries(seriesValues, variant);
-            const stockPalette = [
+            const stockPalette = getChartPalette(spec, [
                 theme.themeColors.accent1,
                 theme.themeColors.accent2,
                 theme.themeColors.accent3,
                 theme.themeColors.accent4,
-            ];
+            ]);
             const xs = categories.length > 0
                 ? categories
                 : (lineSeries[0]?.values ?? []).map((_, i) => i + 1);
@@ -817,7 +976,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             }));
             setPlotData(hasVolume ? [...stockTraces, buildVolumeTrace(xs)] : stockTraces);
             setLayout({
-                title: { text: title ?? undefined },
+                title: { text: plotlyTitleText(title, spec.titleTextFormat) },
                 font: { color: textColor },
                 paper_bgcolor: bgColor,
                 plot_bgcolor: bgColor,
@@ -843,6 +1002,34 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         }
         const isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
         const isHorizontalBarChart = spec.chartType === "bar";
+        // Line / area gallery variants: 100% stacked normalises each category
+        // to 100 (plotly `groupnorm`); Excel's "Line with Markers"
+        // (spec.showMarkers) or a series' own marker switches the line trace
+        // to lines+markers, and a series marker of "none" hides them.
+        const lineTraceVariant = (series, effectiveChartType) => {
+            if (effectiveChartType !== "line" && effectiveChartType !== "area") {
+                return {};
+            }
+            const extra = {};
+            if (isStacked && spec.stackedType === "PERCENT_STACKED") {
+                extra.groupnorm = "percent";
+            }
+            if (effectiveChartType === "line") {
+                const marker = series.marker;
+                const symbol = marker?.symbol;
+                const wantsMarkers = symbol === "none"
+                    ? false
+                    : Boolean(spec.showMarkers) || !isNil(symbol);
+                if (wantsMarkers) {
+                    extra.mode = "lines+markers";
+                    extra.marker = {
+                        symbol: mapMarkerSymbolToPlotly(symbol) ?? "circle",
+                        size: marker?.size ?? 6,
+                    };
+                }
+            }
+            return extra;
+        };
         // Get domain data (x-axis)
         const shouldAggregate = shouldAggregateSeries(spec.series);
         const primaryDomainSource = spec?.domains?.[0]?.sources?.[0];
@@ -850,25 +1037,45 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             ? sanitizeDomainValues(getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy) ?? [])
             : [];
         let domainData = getDomainValuesForAxis(rawPrimaryDomainValues, shouldAggregate);
-        spec.domains?.forEach((domain, domainIndex) => {
-            domain.sources.forEach((sheetRange, sourceIndex) => {
-                if (domainIndex === 0 && sourceIndex === 0) {
-                    domainData = getDomainValuesForAxis(rawPrimaryDomainValues, shouldAggregate);
-                }
-                else {
-                    const rawValues = sanitizeDomainValues(getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? []);
-                    domainData = getDomainValuesForAxis(rawValues, shouldAggregate);
-                }
-            });
-        });
+        // A hierarchical category axis (PivotChart over nested row fields):
+        // plotly's `multicategory` axis takes every level, outermost first.
+        const categoryLevels = resolveCategoryLevels(spec.categoryLevels?.map((level) => flattenChartDataValues([level], getDomainValuesFromRange, spec.hiddenDimensionStrategy, false)));
+        const multicategoryX = categoryLevels
+            ? plotlyMulticategoryX(categoryLevels)
+            : undefined;
+        if (categoryLevels) {
+            domainData = categoryLevels.leaf;
+        }
+        // Aggregation keys series values by the primary domain range alone.
+        const aggregateDomainValues = domainData;
+        // One category axis per domain (Excel): a domain drawn from several
+        // ranges lists their categories in sequence on that single axis.
+        // `domains[0]` is the primary category axis; `domains[1]` is the
+        // secondary one, which Excel shows only for the secondary axis group —
+        // the series with `useSecondaryAxis` plot against it.
+        const domainAxisData = (categoryLevels ? [] : spec.domains ?? []).map((domain, domainIndex) => domain.sources.flatMap((sheetRange, sourceIndex) => {
+            if (domainIndex === 0 && sourceIndex === 0) {
+                return aggregateDomainValues;
+            }
+            const rawValues = sanitizeDomainValues(getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? []);
+            return getDomainValuesForAxis(rawValues, shouldAggregate);
+        }));
+        if (domainAxisData[0])
+            domainData = domainAxisData[0];
+        const secondaryDomainData = domainAxisData[1];
+        /** The category list a series plots against. */
+        const categoriesFor = (series) => series.useSecondaryAxis && secondaryDomainData
+            ? secondaryDomainData
+            : domainData;
         const assignCartesianData = (categories, values) => {
             // Convert undefined to null for Plotly (Datum type accepts null but not undefined)
             const plotlyValues = values.map((v) => v ?? null);
             // When categories is empty but we have values, generate index-based x values
             // so Plotly can render the chart
-            const effectiveCategories = categories.length === 0 && plotlyValues.length > 0
-                ? Array.from({ length: plotlyValues.length }, (_, i) => i + 1)
-                : categories;
+            const effectiveCategories = multicategoryX ??
+                (categories.length === 0 && plotlyValues.length > 0
+                    ? Array.from({ length: plotlyValues.length }, (_, i) => i + 1)
+                    : categories);
             if (isHorizontalBarChart) {
                 return {
                     x: plotlyValues,
@@ -879,14 +1086,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             return { x: effectiveCategories, y: plotlyValues, orientation: undefined };
         };
         // Theme color palette for fallback
-        const themeColorPalette = [
+        const themeColorPalette = getChartPalette(spec, [
             theme.themeColors.accent1,
             theme.themeColors.accent2,
             theme.themeColors.accent3,
             theme.themeColors.accent4,
             theme.themeColors.accent5,
             theme.themeColors.accent6,
-        ];
+        ]);
         const applyTraceColor = (trace, seriesColor, options) => {
             const target = trace;
             const chartTypeForStyling = options?.effectiveChartType ?? spec.chartType;
@@ -917,7 +1124,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // give every task its own color. Build a per-point color array
             // by category index, falling back to the series color for points
             // without an override.
-            if (isBarOrColumn &&
+            const isPie = chartTypeForStyling === "pie";
+            if ((isBarOrColumn || isPie) &&
                 Array.isArray(options?.dataPointColors) &&
                 options?.dataPointColors.length) {
                 const overrides = new Map();
@@ -926,6 +1134,24 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         overrides.set(dp.idx, dp.color);
                     }
                 }
+                if (isPie) {
+                    // Per-slice colours (`<c:dPt>`): an authored slice colour wins,
+                    // the other slices keep the palette cycle the trace was built
+                    // with (or the series' own colour when one was authored).
+                    const existing = Array.isArray(target.marker?.colors)
+                        ? target.marker.colors
+                        : themeColorPalette;
+                    const labelCount = Array.isArray(target.labels)
+                        ? target.labels.length
+                        : 0;
+                    target.marker = {
+                        ...(target.marker ?? {}),
+                        colors: Array.from({ length: labelCount }, (_, i) => overrides.get(i) ??
+                            seriesColor ??
+                            existing[i % Math.max(1, existing.length)]),
+                    };
+                    return trace;
+                }
                 const fallback = effectiveColor ?? "#4285F4";
                 const yArray = Array.isArray(target.y)
                     ? target.y
@@ -988,6 +1214,18 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         // Track whether any series opts into the secondary value axis; the
         // yaxis2 layout block is added below when true.
         let hasSecondaryAxis = false;
+        // Secondary category axis — added to the layout when a secondary-axis
+        // series plots against a second chart domain.
+        let hasSecondaryCategoryAxis = false;
+        // Plotly axis references for the secondary axis group (Excel: a
+        // secondary value axis opposite the primary one, plus a secondary
+        // category axis when the group has its own categories). The value
+        // axis is y on a vertical chart and x on a horizontal bar; the
+        // category axis is the other one.
+        const valueAxisKey = isHorizontalBarChart ? "xaxis" : "yaxis";
+        const categoryAxisKey = isHorizontalBarChart ? "yaxis" : "xaxis";
+        const secondaryValueAxisRef = isHorizontalBarChart ? "x2" : "y2";
+        const secondaryCategoryAxisRef = isHorizontalBarChart ? "y2" : "x2";
         // Pareto — a histogram whose bins are sorted descending with a
         // cumulative-% line overlaid on a secondary 0-100% axis. Arrives
         // as a plain histogram spec carrying `sourceChartType: "PARETO"`.
@@ -1005,11 +1243,16 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
          */
         const decorateCartesianTrace = (trace, series, values, dataLabel) => {
             const target = trace;
-            // Secondary value axis. Plotly overlays a second y-axis named
-            // "y2" and the trace points at it via `yaxis: "y2"`.
+            // Secondary value axis. Plotly overlays a second value axis ("y2",
+            // or "x2" for a horizontal bar) and the trace points at it.
             if (series.useSecondaryAxis) {
-                target.yaxis = "y2";
+                target[valueAxisKey] = secondaryValueAxisRef;
                 hasSecondaryAxis = true;
+                // Secondary category axis for a second chart domain.
+                if (secondaryDomainData) {
+                    target[categoryAxisKey] = secondaryCategoryAxisRef;
+                    hasSecondaryCategoryAxis = true;
+                }
             }
             // Error bars — native plotly `error_y` / `error_x`. valueType
             // "custom" reads per-point magnitudes from the spec's plus/minus
@@ -1052,7 +1295,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     `${dataLabel ? dataLabel + " " : ""}${tl.type ?? "linear"} trend`;
                 // Map the fitted x (category index) back onto the category
                 // labels where possible so the line aligns with the data.
-                const xs = result.points.map((p) => p.x >= 0 && p.x < domainData.length ? domainData[p.x] : p.x);
+                const categories = categoriesFor(series);
+                const xs = result.points.map((p) => p.x >= 0 && p.x < categories.length ? categories[p.x] : p.x);
                 const ys = result.points.map((p) => p.y);
                 const overlay = {
                     type: "scatter",
@@ -1064,7 +1308,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         width: 2,
                     },
                     hoverinfo: "skip",
-                    ...(series.useSecondaryAxis ? { yaxis: "y2" } : {}),
+                    ...(series.useSecondaryAxis
+                        ? { [valueAxisKey]: secondaryValueAxisRef }
+                        : {}),
+                    ...(series.useSecondaryAxis && secondaryDomainData
+                        ? { [categoryAxisKey]: secondaryCategoryAxisRef }
+                        : {}),
                 };
                 if (isHorizontalBarChart) {
                     overlay.x = ys;
@@ -1078,6 +1327,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 traces.push(overlay);
             }
         };
+        const domainSources = spec.domains?.[0]?.sources ?? [];
         // Create traces for each series
         let seriesIndex = 0;
         for (const series of spec.series ?? []) {
@@ -1085,170 +1335,92 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             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 ?? "";
-            for (const sheetRange of series.sources) {
-                const seriesData = getSeriesData(spec, sheetRange, {
+            // A series with no ranges draws nothing.
+            if (series.sources.length === 0)
+                continue;
+            // 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-76) — not one plotly trace (and legend entry) per range.
+            // Pie / doughnut 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 pieDomainLabels = (spec.chartType === "pie" || spec.chartType === "doughnut") &&
+                (domainSources.length > 1 || series.sources.length > 1)
+                ? domainSources.flatMap((sheetRange) => getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? [])
+                : undefined;
+            let piePointOffset = 0;
+            const seriesData = mergeSeriesData(series.sources.map((sheetRange) => {
+                const part = getSeriesData(spec, sheetRange, {
                     aggregateEnabled: shouldAggregate,
                     aggregateType: series.aggregateType,
                     rawDomainValues: rawPrimaryDomainValues,
-                    orderedDomainValues: domainData,
+                    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 seriesPlotlyType = chartTypeToPlotlyType(effectiveChartType);
-                const seriesTraceStyle = getPlotlyTraceStyle(effectiveChartType);
-                if (effectiveChartType === "histogram") {
-                    const rawValues = "values" in seriesData
-                        ? seriesData.values
-                        : seriesData;
-                    const binCount = spec.binCount;
-                    if (isPareto) {
-                        // Plotly's native histogram trace bins in axis order and
-                        // can't reorder bins, so Pareto pre-bins with the shared
-                        // util, sorts descending, and renders a bar trace plus the
-                        // cumulative-% line pointed at the y2 overlay axis.
-                        const { labels, counts, cumulativePercents } = computePareto(binHistogram(rawValues, binCount));
-                        const barTrace = {
-                            type: "bar",
-                            x: labels,
-                            y: counts,
-                            name: dataLabel,
-                        };
-                        applyTraceColor(barTrace, series.color ?? undefined, {
-                            noFill: series.noFill,
-                            dataPointColors: series.dataPointColors,
-                            seriesIndex: currentSeriesIndex,
-                            effectiveChartType,
-                        });
-                        traces.push(barTrace);
-                        traces.push({
-                            type: "scatter",
-                            mode: "lines+markers",
-                            x: labels,
-                            y: cumulativePercents,
-                            name: "Cumulative %",
-                            yaxis: "y2",
-                        });
-                        hasSecondaryAxis = true;
-                    }
-                    else {
-                        const trace = {
-                            type: "histogram",
-                            x: rawValues.map((v) => (v ?? null)),
-                            name: dataLabel,
-                            ...(typeof binCount === "number" && binCount > 0
-                                ? { nbinsx: binCount }
-                                : {}),
-                        };
-                        applyTraceColor(trace, series.color ?? undefined, {
-                            noFill: series.noFill,
-                            dataPointColors: series.dataPointColors,
-                            seriesIndex: currentSeriesIndex,
-                            effectiveChartType,
-                        });
-                        traces.push(trace);
-                    }
-                }
-                else if (effectiveChartType === "boxplot") {
-                    const rawValues = "values" in seriesData
-                        ? seriesData.values
-                        : seriesData;
-                    const quartileMethod = spec.quartileMethod;
-                    const showOutliers = spec.showOutliers;
-                    const showMeanMarker = spec.showMeanMarker === true;
-                    // Plotly's box trace computes quartiles/fences itself from
-                    // raw values, so a spec-pinned quartile method (or Excel's
-                    // "no outliers → whiskers span min/max" semantics) requires
-                    // switching to plotly's precomputed-statistics signature
-                    // (q1/median/q3/lowerfence/upperfence arrays). When neither
-                    // option is set the raw-values trace is kept unchanged.
-                    const usePrecomputed = quartileMethod != null || showOutliers === false;
-                    let trace;
-                    if (usePrecomputed) {
-                        const summary = computeBoxplotSummary(rawValues, {
-                            quartileMethod,
-                        });
-                        if (!summary)
-                            continue;
-                        const hideOutliers = showOutliers === false;
-                        trace = {
-                            type: "box",
-                            name: dataLabel,
-                            // Precomputed boxes need an explicit category so each
-                            // series lands on its own slot (raw mode derives it from
-                            // the trace name).
-                            x: [dataLabel || `trace ${currentSeriesIndex}`],
-                            q1: [summary.q1],
-                            median: [summary.median],
-                            q3: [summary.q3],
-                            // Excel: hiding outlier points extends the whiskers to
-                            // the full min/max; with outliers shown they stop at the
-                            // most extreme points inside the 1.5×IQR fences.
-                            lowerfence: [hideOutliers ? summary.min : summary.lowerWhisker],
-                            upperfence: [hideOutliers ? summary.max : summary.upperWhisker],
-                            ...(hideOutliers
-                                ? { boxpoints: false }
-                                : {
-                                    // Sample points ride along so plotly can still draw
-                                    // the outlier dots against the precomputed fences.
-                                    y: [rawValues.filter((v) => v != null)],
-                                    boxpoints: "outliers",
-                                }),
-                            ...(showMeanMarker
-                                ? { mean: [summary.mean], boxmean: true }
-                                : {}),
-                        };
-                    }
-                    else {
-                        trace = {
-                            type: "box",
-                            y: rawValues.map((v) => (v ?? null)),
-                            name: dataLabel,
-                            // Raw mode is used when outliers are visible (today's
-                            // default and `showOutliers: true` alike).
-                            boxpoints: "outliers",
-                            ...(showMeanMarker ? { boxmean: true } : {}),
-                        };
-                    }
-                    applyTraceColor(trace, series.color ?? undefined, {
-                        noFill: series.noFill,
-                        dataPointColors: series.dataPointColors,
-                        seriesIndex: currentSeriesIndex,
-                        effectiveChartType,
-                    });
-                    traces.push(trace);
-                }
-                else if (effectiveChartType === "waterfall") {
-                    const rawValues = "values" in seriesData
-                        ? seriesData.values
-                        : seriesData;
-                    // Plotly's native waterfall draws connector lines itself and
-                    // renders "total" measures from the zero baseline with its
-                    // own distinct fill.
-                    const totalIndices = new Set(spec.totalIndices ?? []);
-                    const trace = {
-                        type: "waterfall",
-                        x: domainData,
-                        y: rawValues.map((v) => (v ?? null)),
-                        measure: rawValues.map((_, i) => totalIndices.has(i) ? "total" : "relative"),
+                if (!Array.isArray(part))
+                    piePointOffset += part.values.length;
+                return part;
+            }));
+            const seriesPlotlyType = chartTypeToPlotlyType(effectiveChartType);
+            const seriesTraceStyle = {
+                ...getPlotlyTraceStyle(effectiveChartType),
+                // "Connect data points with line" bridges the empty cells.
+                ...(connectsAcrossEmptyCells(spec, lineLike)
+                    ? { connectgaps: true }
+                    : {}),
+            };
+            if (effectiveChartType === "histogram") {
+                const rawValues = "values" in seriesData
+                    ? seriesData.values
+                    : seriesData;
+                const binCount = spec.binCount;
+                if (isPareto) {
+                    // Plotly's native histogram trace bins in axis order and
+                    // can't reorder bins, so Pareto pre-bins with the shared
+                    // util, sorts descending, and renders a bar trace plus the
+                    // cumulative-% line pointed at the y2 overlay axis.
+                    const { labels, counts, cumulativePercents } = computePareto(binHistogram(rawValues, binCount));
+                    const barTrace = {
+                        type: "bar",
+                        x: labels,
+                        y: counts,
                         name: dataLabel,
                     };
-                    applyTraceColor(trace, series.color ?? undefined, {
+                    applyTraceColor(barTrace, series.color ?? undefined, {
                         noFill: series.noFill,
                         dataPointColors: series.dataPointColors,
                         seriesIndex: currentSeriesIndex,
                         effectiveChartType,
                     });
-                    traces.push(trace);
+                    traces.push(barTrace);
+                    traces.push({
+                        type: "scatter",
+                        mode: "lines+markers",
+                        x: labels,
+                        y: cumulativePercents,
+                        name: "Cumulative %",
+                        yaxis: "y2",
+                    });
+                    hasSecondaryAxis = true;
                 }
-                else if (effectiveChartType === "funnel") {
-                    const rawValues = "values" in seriesData
-                        ? seriesData.values
-                        : seriesData;
+                else {
                     const trace = {
-                        type: "funnel",
-                        y: domainData,
+                        type: "histogram",
                         x: rawValues.map((v) => (v ?? null)),
                         name: dataLabel,
+                        ...(typeof binCount === "number" && binCount > 0
+                            ? { nbinsx: binCount }
+                            : {}),
                     };
                     applyTraceColor(trace, series.color ?? undefined, {
                         noFill: series.noFill,
@@ -1258,227 +1430,365 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     });
                     traces.push(trace);
                 }
-                else if (effectiveChartType === "pie" && isOfPie) {
-                    // Pie-of-pie / bar-of-pie — split the minor slices into a
-                    // secondary pie or stacked bar beside the main pie, replace
-                    // them with an aggregated "Other" slice, and join the two
-                    // plots with connector-line shapes. Only the first pie series
-                    // participates (of-pie is a single-series chart in Excel).
-                    if (ofPieHandled)
-                        continue;
-                    ofPieHandled = true;
-                    const pieData = seriesData;
-                    const { main, secondary, otherTotal, total } = splitOfPie(pieData.values, pieData.labels, {
-                        splitType: spec.splitType,
-                        splitPos: spec.splitPos,
-                    });
-                    const ofPieType = resolveOfPieType(spec.ofPieType);
-                    const secondScale = clampSecondPieSize(spec.secondPieSize) / 100;
-                    const halfAngle = otherSliceHalfAngle(otherTotal, total);
-                    const paletteAt = (index) => themeColorPalette[index % themeColorPalette.length];
-                    // Layout in paper coordinates (0-1 across the plot area
-                    // inside the margins). Main pie on the left, secondary plot
-                    // on the right.
-                    const MAIN_DOMAIN_X = [0, 0.55];
-                    const CY = 0.5;
-                    const SECONDARY_CX = 0.78;
-                    const BAR_LEFT = 0.68;
-                    const BAR_RIGHT = 0.88;
-                    traces.push({
-                        type: "pie",
-                        values: main.map((s) => s.value),
-                        labels: main.map((s) => s.label),
-                        name: dataLabel,
-                        domain: { x: MAIN_DOMAIN_X, y: [0, 1] },
-                        sort: false,
-                        direction: "clockwise",
-                        // Rotate so the "Other" slice's angular midpoint faces the
-                        // secondary plot (Excel's layout). Other is the last slice
-                        // of a clockwise sweep starting at `rotation`° from 12
-                        // o'clock, so its midpoint lands at 3 o'clock when the
-                        // sweep starts 90° + halfAngle past the top.
-                        rotation: (90 + (halfAngle * 180) / Math.PI) % 360,
-                        marker: { colors: main.map((_, i) => paletteAt(i)) },
+            }
+            else if (effectiveChartType === "boxplot") {
+                const rawValues = "values" in seriesData
+                    ? seriesData.values
+                    : seriesData;
+                const quartileMethod = spec.quartileMethod;
+                const showOutliers = spec.showOutliers;
+                const showMeanMarker = spec.showMeanMarker === true;
+                // Plotly's box trace computes quartiles/fences itself from
+                // raw values, so a spec-pinned quartile method (or Excel's
+                // "no outliers → whiskers span min/max" semantics) requires
+                // switching to plotly's precomputed-statistics signature
+                // (q1/median/q3/lowerfence/upperfence arrays). When neither
+                // option is set the raw-values trace is kept unchanged.
+                const usePrecomputed = quartileMethod != null || showOutliers === false;
+                let trace;
+                if (usePrecomputed) {
+                    const summary = computeBoxplotSummary(rawValues, {
+                        quartileMethod,
                     });
-                    if (secondary.length > 0) {
-                        // Paper coords are relative while the pie is circular in
-                        // pixels — convert the main pie's pixel radius into
-                        // separate x/y paper fractions to compensate for the
-                        // aspect ratio. Falls back to fixed fractions when the
-                        // container size isn't known yet.
-                        const plotW = typeof width === "number" ? Math.max(1, width - 102) : 0;
-                        const plotH = typeof height === "number" ? Math.max(1, height - 102) : 0;
-                        const hasGeometry = plotW > 1 && plotH > 1;
-                        const r = hasGeometry
-                            ? Math.min((MAIN_DOMAIN_X[1] - MAIN_DOMAIN_X[0]) * plotW, plotH) / 2
-                            : 0;
-                        const r2 = r * secondScale;
-                        const clampFrac = (v, min, max) => Math.min(max, Math.max(min, v));
-                        const rx2 = clampFrac(hasGeometry ? r2 / plotW : 0.14 * secondScale, 0.03, 0.19);
-                        const ry2 = clampFrac(hasGeometry ? r2 / plotH : 0.28 * secondScale, 0.05, 0.45);
-                        const barHalf = ry2;
-                        if (ofPieType === "pie") {
-                            traces.push({
-                                type: "pie",
-                                values: secondary.map((s) => s.value),
-                                labels: secondary.map((s) => s.label),
-                                name: dataLabel,
-                                domain: {
-                                    x: [SECONDARY_CX - rx2, SECONDARY_CX + rx2],
-                                    y: [CY - ry2, CY + ry2],
-                                },
-                                sort: false,
-                                direction: "clockwise",
-                                marker: {
-                                    colors: secondary.map((_, i) => paletteAt(main.length + i)),
-                                },
-                            });
-                        }
-                        else {
-                            // Bar-of-pie — a single-category stacked bar on hidden
-                            // secondary axes; one trace per point so each segment
-                            // keeps its own color and legend entry.
-                            secondary.forEach((s, i) => {
-                                traces.push({
-                                    type: "bar",
-                                    x: [""],
-                                    y: [s.value],
-                                    name: s.label,
-                                    xaxis: "x2",
-                                    yaxis: "y2",
-                                    marker: { color: paletteAt(main.length + i) },
-                                });
-                            });
-                        }
-                        // Connector lines from the Other slice's edges to the top
-                        // and bottom of the secondary plot. Skipped (gracefully)
-                        // when the container size isn't known — pure paper-coord
-                        // geometry can't compensate for the pixel aspect ratio.
-                        const shapes = [];
-                        if (hasGeometry) {
-                            const connectorColor = isDarkMode
-                                ? "rgba(255,255,255,0.45)"
-                                : "#999999";
-                            const mainCx = (MAIN_DOMAIN_X[0] + MAIN_DOMAIN_X[1]) / 2;
-                            const px = mainCx + (r * Math.cos(halfAngle)) / plotW;
-                            const pyTop = CY + (r * Math.sin(halfAngle)) / plotH;
-                            const pyBottom = CY - (r * Math.sin(halfAngle)) / plotH;
-                            const tx = ofPieType === "pie" ? SECONDARY_CX : BAR_LEFT;
-                            const half = ofPieType === "pie" ? ry2 : barHalf;
-                            const line = {
-                                type: "line",
-                                xref: "paper",
-                                yref: "paper",
-                                layer: "below",
-                                line: { color: connectorColor, width: 1 },
-                            };
-                            shapes.push({ ...line, x0: px, y0: pyTop, x1: tx, y1: CY + half }, { ...line, x0: px, y0: pyBottom, x1: tx, y1: CY - half });
-                        }
-                        ofPieExtras = {
-                            shapes,
-                            ...(ofPieType === "bar"
-                                ? {
-                                    barmode: "stack",
-                                    xaxis2: {
-                                        domain: [BAR_LEFT, BAR_RIGHT],
-                                        anchor: "y2",
-                                        visible: false,
-                                        fixedrange: true,
-                                    },
-                                    yaxis2: {
-                                        domain: [CY - barHalf, CY + barHalf],
-                                        anchor: "x2",
-                                        visible: false,
-                                        fixedrange: true,
-                                    },
-                                }
-                                : {}),
-                        };
-                    }
-                }
-                else if (effectiveChartType === "pie") {
-                    const pieData = seriesData;
-                    const trace = {
-                        type: seriesPlotlyType,
-                        values: pieData.values,
-                        labels: pieData.labels,
+                    if (!summary)
+                        continue;
+                    const hideOutliers = showOutliers === false;
+                    trace = {
+                        type: "box",
                         name: dataLabel,
-                        marker: {
-                            colors: [
-                                theme.themeColors.accent1,
-                                theme.themeColors.accent2,
-                                theme.themeColors.accent3,
-                                theme.themeColors.accent4,
-                                theme.themeColors.accent5,
-                                theme.themeColors.accent6,
-                            ],
-                        },
+                        // Precomputed boxes need an explicit category so each
+                        // series lands on its own slot (raw mode derives it from
+                        // the trace name).
+                        x: [dataLabel || `trace ${currentSeriesIndex}`],
+                        q1: [summary.q1],
+                        median: [summary.median],
+                        q3: [summary.q3],
+                        // Excel: hiding outlier points extends the whiskers to
+                        // the full min/max; with outliers shown they stop at the
+                        // most extreme points inside the 1.5×IQR fences.
+                        lowerfence: [hideOutliers ? summary.min : summary.lowerWhisker],
+                        upperfence: [hideOutliers ? summary.max : summary.upperWhisker],
+                        ...(hideOutliers
+                            ? { boxpoints: false }
+                            : {
+                                // Sample points ride along so plotly can still draw
+                                // the outlier dots against the precomputed fences.
+                                y: [rawValues.filter((v) => v != null)],
+                                boxpoints: "outliers",
+                            }),
+                        ...(showMeanMarker
+                            ? { mean: [summary.mean], boxmean: true }
+                            : {}),
                     };
-                    applyTraceColor(trace, series.color ?? undefined, {
-                        noFill: series.noFill,
-                        dataPointColors: series.dataPointColors,
-                        seriesIndex: currentSeriesIndex,
-                        effectiveChartType,
-                    });
-                    traces.push(trace);
                 }
-                else if ("values" in seriesData && "labels" in seriesData) {
-                    const { x, y, orientation } = assignCartesianData(domainData, seriesData.values);
-                    const trace = {
-                        type: seriesPlotlyType,
-                        x,
-                        y,
-                        orientation,
+                else {
+                    trace = {
+                        type: "box",
+                        y: rawValues.map((v) => (v ?? null)),
                         name: dataLabel,
-                        stackgroup: isStacked ? "one" : undefined,
-                        ...seriesTraceStyle,
+                        // Raw mode is used when outliers are visible (today's
+                        // default and `showOutliers: true` alike).
+                        boxpoints: "outliers",
+                        ...(showMeanMarker ? { boxmean: true } : {}),
                     };
-                    applyTraceColor(trace, series.color ?? undefined, {
-                        noFill: series.noFill,
-                        dataPointColors: series.dataPointColors,
-                        invertIfNegative: series.invertIfNegative,
-                        negativeColor: series.negativeColor,
-                        values: seriesData.values,
-                        seriesIndex: currentSeriesIndex,
-                        effectiveChartType,
-                        gradientColor: gradientToPlotly(series.gradient),
-                    });
-                    decorateCartesianTrace(trace, series, seriesData.values, dataLabel);
-                    traces.push(trace);
                 }
-                else {
-                    const numericValues = seriesData;
-                    const { x, y, orientation } = assignCartesianData(domainData, numericValues);
-                    const trace = {
-                        type: seriesPlotlyType,
-                        x,
-                        y,
-                        orientation,
-                        name: dataLabel,
-                        stackgroup: isStacked ? "one" : undefined,
-                        ...seriesTraceStyle,
+                applyTraceColor(trace, series.color ?? undefined, {
+                    noFill: series.noFill,
+                    dataPointColors: series.dataPointColors,
+                    seriesIndex: currentSeriesIndex,
+                    effectiveChartType,
+                });
+                traces.push(trace);
+            }
+            else if (effectiveChartType === "waterfall") {
+                const rawValues = "values" in seriesData
+                    ? seriesData.values
+                    : seriesData;
+                // Plotly's native waterfall draws connector lines itself and
+                // renders "total" measures from the zero baseline with its
+                // own distinct fill.
+                const totalIndices = new Set(spec.totalIndices ?? []);
+                const trace = {
+                    type: "waterfall",
+                    x: categoriesFor(series),
+                    y: rawValues.map((v) => (v ?? null)),
+                    measure: rawValues.map((_, i) => totalIndices.has(i) ? "total" : "relative"),
+                    name: dataLabel,
+                };
+                applyTraceColor(trace, series.color ?? undefined, {
+                    noFill: series.noFill,
+                    dataPointColors: series.dataPointColors,
+                    seriesIndex: currentSeriesIndex,
+                    effectiveChartType,
+                });
+                traces.push(trace);
+            }
+            else if (effectiveChartType === "funnel") {
+                const rawValues = "values" in seriesData
+                    ? seriesData.values
+                    : seriesData;
+                const trace = {
+                    type: "funnel",
+                    y: categoriesFor(series),
+                    x: rawValues.map((v) => (v ?? null)),
+                    name: dataLabel,
+                };
+                applyTraceColor(trace, series.color ?? undefined, {
+                    noFill: series.noFill,
+                    dataPointColors: series.dataPointColors,
+                    seriesIndex: currentSeriesIndex,
+                    effectiveChartType,
+                });
+                traces.push(trace);
+            }
+            else if (effectiveChartType === "pie" && isOfPie) {
+                // Pie-of-pie / bar-of-pie — split the minor slices into a
+                // secondary pie or stacked bar beside the main pie, replace
+                // them with an aggregated "Other" slice, and join the two
+                // plots with connector-line shapes. Only the first pie series
+                // participates (of-pie is a single-series chart in Excel).
+                if (ofPieHandled)
+                    continue;
+                ofPieHandled = true;
+                const pieData = seriesData;
+                const { main, secondary, otherTotal, total } = splitOfPie(pieData.values, pieData.labels, {
+                    splitType: spec.splitType,
+                    splitPos: spec.splitPos,
+                });
+                const ofPieType = resolveOfPieType(spec.ofPieType);
+                const secondScale = clampSecondPieSize(spec.secondPieSize) / 100;
+                const halfAngle = otherSliceHalfAngle(otherTotal, total);
+                const paletteAt = (index) => themeColorPalette[index % themeColorPalette.length];
+                // Layout in paper coordinates (0-1 across the plot area
+                // inside the margins). Main pie on the left, secondary plot
+                // on the right.
+                const MAIN_DOMAIN_X = [0, 0.55];
+                const CY = 0.5;
+                const SECONDARY_CX = 0.78;
+                const BAR_LEFT = 0.68;
+                const BAR_RIGHT = 0.88;
+                traces.push({
+                    type: "pie",
+                    values: main.map((s) => s.value),
+                    labels: main.map((s) => s.label),
+                    name: dataLabel,
+                    domain: { x: MAIN_DOMAIN_X, y: [0, 1] },
+                    sort: false,
+                    direction: "clockwise",
+                    // Rotate so the "Other" slice's angular midpoint faces the
+                    // secondary plot (Excel's layout). Other is the last slice
+                    // of a clockwise sweep starting at `rotation`° from 12
+                    // o'clock, so its midpoint lands at 3 o'clock when the
+                    // sweep starts 90° + halfAngle past the top.
+                    rotation: (90 + (halfAngle * 180) / Math.PI) % 360,
+                    marker: { colors: main.map((_, i) => paletteAt(i)) },
+                });
+                if (secondary.length > 0) {
+                    // Paper coords are relative while the pie is circular in
+                    // pixels — convert the main pie's pixel radius into
+                    // separate x/y paper fractions to compensate for the
+                    // aspect ratio. Falls back to fixed fractions when the
+                    // container size isn't known yet.
+                    const plotW = typeof width === "number" ? Math.max(1, width - 102) : 0;
+                    const plotH = typeof height === "number" ? Math.max(1, height - 102) : 0;
+                    const hasGeometry = plotW > 1 && plotH > 1;
+                    const r = hasGeometry
+                        ? Math.min((MAIN_DOMAIN_X[1] - MAIN_DOMAIN_X[0]) * plotW, plotH) / 2
+                        : 0;
+                    const r2 = r * secondScale;
+                    const clampFrac = (v, min, max) => Math.min(max, Math.max(min, v));
+                    const rx2 = clampFrac(hasGeometry ? r2 / plotW : 0.14 * secondScale, 0.03, 0.19);
+                    const ry2 = clampFrac(hasGeometry ? r2 / plotH : 0.28 * secondScale, 0.05, 0.45);
+                    const barHalf = ry2;
+                    if (ofPieType === "pie") {
+                        traces.push({
+                            type: "pie",
+                            values: secondary.map((s) => s.value),
+                            labels: secondary.map((s) => s.label),
+                            name: dataLabel,
+                            domain: {
+                                x: [SECONDARY_CX - rx2, SECONDARY_CX + rx2],
+                                y: [CY - ry2, CY + ry2],
+                            },
+                            sort: false,
+                            direction: "clockwise",
+                            marker: {
+                                colors: secondary.map((_, i) => paletteAt(main.length + i)),
+                            },
+                        });
+                    }
+                    else {
+                        // Bar-of-pie — a single-category stacked bar on hidden
+                        // secondary axes; one trace per point so each segment
+                        // keeps its own color and legend entry.
+                        secondary.forEach((s, i) => {
+                            traces.push({
+                                type: "bar",
+                                x: [""],
+                                y: [s.value],
+                                name: s.label,
+                                xaxis: "x2",
+                                yaxis: "y2",
+                                marker: { color: paletteAt(main.length + i) },
+                            });
+                        });
+                    }
+                    // Connector lines from the Other slice's edges to the top
+                    // and bottom of the secondary plot. Skipped (gracefully)
+                    // when the container size isn't known — pure paper-coord
+                    // geometry can't compensate for the pixel aspect ratio.
+                    const shapes = [];
+                    if (hasGeometry) {
+                        const connectorColor = isDarkMode
+                            ? "rgba(255,255,255,0.45)"
+                            : "#999999";
+                        const mainCx = (MAIN_DOMAIN_X[0] + MAIN_DOMAIN_X[1]) / 2;
+                        const px = mainCx + (r * Math.cos(halfAngle)) / plotW;
+                        const pyTop = CY + (r * Math.sin(halfAngle)) / plotH;
+                        const pyBottom = CY - (r * Math.sin(halfAngle)) / plotH;
+                        const tx = ofPieType === "pie" ? SECONDARY_CX : BAR_LEFT;
+                        const half = ofPieType === "pie" ? ry2 : barHalf;
+                        const line = {
+                            type: "line",
+                            xref: "paper",
+                            yref: "paper",
+                            layer: "below",
+                            line: { color: connectorColor, width: 1 },
+                        };
+                        shapes.push({ ...line, x0: px, y0: pyTop, x1: tx, y1: CY + half }, { ...line, x0: px, y0: pyBottom, x1: tx, y1: CY - half });
+                    }
+                    ofPieExtras = {
+                        shapes,
+                        ...(ofPieType === "bar"
+                            ? {
+                                barmode: "stack",
+                                xaxis2: {
+                                    domain: [BAR_LEFT, BAR_RIGHT],
+                                    anchor: "y2",
+                                    visible: false,
+                                    fixedrange: true,
+                                },
+                                yaxis2: {
+                                    domain: [CY - barHalf, CY + barHalf],
+                                    anchor: "x2",
+                                    visible: false,
+                                    fixedrange: true,
+                                },
+                            }
+                            : {}),
                     };
-                    applyTraceColor(trace, series.color ?? undefined, {
-                        noFill: series.noFill,
-                        dataPointColors: series.dataPointColors,
-                        invertIfNegative: series.invertIfNegative,
-                        negativeColor: series.negativeColor,
-                        values: numericValues,
-                        seriesIndex: currentSeriesIndex,
-                        effectiveChartType,
-                        gradientColor: gradientToPlotly(series.gradient),
-                    });
-                    decorateCartesianTrace(trace, series, numericValues, dataLabel);
-                    traces.push(trace);
                 }
             }
+            else if (effectiveChartType === "pie" ||
+                effectiveChartType === "doughnut") {
+                const pieData = seriesData;
+                const trace = {
+                    type: seriesPlotlyType,
+                    values: pieData.values,
+                    labels: pieData.labels,
+                    name: dataLabel,
+                    marker: {
+                        colors: themeColorPalette,
+                    },
+                };
+                // Ties the trace back to spec.series for click selection and
+                // the series' own number format
+                trace.meta = {
+                    rncSeriesIndex: currentSeriesIndex,
+                };
+                applyTraceColor(trace, series.color ?? undefined, {
+                    noFill: series.noFill,
+                    dataPointColors: series.dataPointColors,
+                    seriesIndex: currentSeriesIndex,
+                    effectiveChartType,
+                });
+                traces.push(trace);
+            }
+            else if ("values" in seriesData && "labels" in seriesData) {
+                const { x, y, orientation } = assignCartesianData(categoriesFor(series), seriesData.values);
+                const trace = {
+                    type: seriesPlotlyType,
+                    x,
+                    y,
+                    orientation,
+                    name: dataLabel,
+                    stackgroup: isStacked ? "one" : undefined,
+                    ...seriesTraceStyle,
+                    ...lineTraceVariant(series, effectiveChartType),
+                };
+                // Ties the trace back to spec.series for click selection
+                trace.meta = {
+                    rncSeriesIndex: currentSeriesIndex,
+                };
+                applyTraceColor(trace, series.color ?? undefined, {
+                    noFill: series.noFill,
+                    dataPointColors: series.dataPointColors,
+                    invertIfNegative: series.invertIfNegative,
+                    negativeColor: series.negativeColor,
+                    values: seriesData.values,
+                    seriesIndex: currentSeriesIndex,
+                    effectiveChartType,
+                    gradientColor: gradientToPlotly(series.gradient),
+                });
+                decorateCartesianTrace(trace, series, seriesData.values, dataLabel);
+                traces.push(trace);
+            }
+            else {
+                const numericValues = seriesData;
+                const { x, y, orientation } = assignCartesianData(categoriesFor(series), numericValues);
+                const trace = {
+                    type: seriesPlotlyType,
+                    x,
+                    y,
+                    orientation,
+                    name: dataLabel,
+                    stackgroup: isStacked ? "one" : undefined,
+                    ...seriesTraceStyle,
+                    ...lineTraceVariant(series, effectiveChartType),
+                };
+                // Ties the trace back to spec.series for click selection
+                trace.meta = {
+                    rncSeriesIndex: currentSeriesIndex,
+                };
+                applyTraceColor(trace, series.color ?? undefined, {
+                    noFill: series.noFill,
+                    dataPointColors: series.dataPointColors,
+                    invertIfNegative: series.invertIfNegative,
+                    negativeColor: series.negativeColor,
+                    values: numericValues,
+                    seriesIndex: currentSeriesIndex,
+                    effectiveChartType,
+                    gradientColor: gradientToPlotly(series.gradient),
+                });
+                decorateCartesianTrace(trace, series, numericValues, dataLabel);
+                traces.push(trace);
+            }
         }
         // Authored title formatting (parsed from <c:title><c:txPr> or
         // <c:title><c:tx><c:rich>) overrides the theme-derived default.
         const authoredTitleFmt = spec.titleTextFormat;
+        // "Linked to source" number formats per value axis. Plotly's
+        // `barnorm: "percent"` axis plots percentages, so it never links to
+        // the source cells.
+        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 newLayout = {
             title: {
-                text: title ?? undefined,
+                text: plotlyTitleText(title, spec.titleTextFormat),
                 font: applyTextFormatToFont({
                     family: "Untitled Sans, apple-system, sans-serif",
                     size: 16,
@@ -1503,12 +1813,16 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 showgrid: true,
                 gridcolor: gridColor,
                 visible: showXAxis(spec?.chartType),
-                type: isHorizontalBarChart ? "linear" : undefined,
+                type: isHorizontalBarChart
+                    ? "linear"
+                    : multicategoryX
+                        ? "multicategory"
+                        : undefined,
             }, 
             // For horizontal bar, OOXML's value axis is the X axis.
             isHorizontalBarChart
                 ? spec.valueAxisOptions
-                : spec.categoryAxisOptions),
+                : spec.categoryAxisOptions, isHorizontalBarChart ? primaryAxisNumberFormat : undefined),
             yaxis: applyAxisOverridesPlotly({
                 title: {
                     text: spec.verticalAxisTitle ?? "",
@@ -1517,70 +1831,48 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 showgrid: !isHorizontalBarChart,
                 gridcolor: gridColor,
                 automargin: true,
-                type: isHorizontalBarChart ? "category" : undefined,
+                type: isHorizontalBarChart
+                    ? multicategoryX
+                        ? "multicategory"
+                        : "category"
+                    : undefined,
             }, isHorizontalBarChart
                 ? spec.categoryAxisOptions
-                : spec.valueAxisOptions),
-            // Secondary value axis — a second y-axis overlaying the first on
-            // the right. Series with `useSecondaryAxis` were pointed at "y2".
+                : spec.valueAxisOptions, isHorizontalBarChart ? undefined : primaryAxisNumberFormat),
+            // Secondary value axis — overlaying the primary value axis on the
+            // opposite side (right of a vertical chart; top of a horizontal
+            // bar). Series with `useSecondaryAxis` were pointed at it.
             ...(hasSecondaryAxis
                 ? {
-                    yaxis2: applyAxisOverridesPlotly({
+                    [isHorizontalBarChart ? "xaxis2" : "yaxis2"]: applyAxisOverridesPlotly({
                         title: { font: { color: textColor } },
-                        overlaying: "y",
-                        side: "right",
+                        overlaying: isHorizontalBarChart ? "x" : "y",
+                        side: isHorizontalBarChart ? "top" : "right",
                         showgrid: false,
                         automargin: true,
                         // Pareto — the cumulative-% axis is clamped 0-100%.
                         ...(isPareto
                             ? { range: [0, 100], ticksuffix: "%" }
                             : {}),
-                    }, spec.secondaryValueAxisOptions),
-                }
-                : {}),
-            ...(() => {
-                const { legend: legendCfg, showlegend } = applyLegendOverridesPlotly({ font: { color: textColor } }, spec.legend);
-                return {
-                    showlegend: showlegend === undefined ? true : showlegend,
-                    legend: legendCfg,
-                };
-            })(),
-            margin: {
-                l: 50,
-                r: 50,
-                t: 50,
-                b: 50,
-            },
-            autosize: true,
-            // Bar/column stacking. Plotly's `barmode: "stack"` stacks bars
-            // at the same X (or Y for horizontal). `barnorm: "percent"`
-            // normalises each category's stack to 100% — Excel's
-            // `percentStacked` grouping. Default is grouped (clustered).
-            ...((spec.chartType === "bar" || spec.chartType === "column") && spec.stackedType
-                ? {
-                    barmode: spec.stackedType === "STACKED" ||
-                        spec.stackedType === "PERCENT_STACKED"
-                        ? "stack"
-                        : "group",
-                    ...(spec.stackedType === "PERCENT_STACKED"
-                        ? { barnorm: "percent" }
-                        : {}),
+                    }, spec.secondaryValueAxisOptions, secondaryAxisNumberFormat),
                 }
                 : {}),
-            // gapWidth — Excel stores 0..500 as a percentage of bar width.
-            // Plotly's `bargap` is a fraction of the slot (0..1). Approx:
-            // gapWidth=150 (default) → ~0.4 bargap.
-            ...(typeof spec.gapWidth === "number"
-                ? { bargap: Math.max(0, Math.min(0.95, spec.gapWidth / 400)) }
-                : {}),
-            // Of-pie composite — connector-line shapes plus (bar-of-pie) the
-            // hidden secondary axes and stacked bar mode.
-            ...(ofPieExtras
+            // Secondary category axis — the second chart domain, overlaying the
+            // primary category axis on the opposite side (Excel draws the
+            // secondary group's category axis opposite the primary one). Series
+            // with `useSecondaryAxis` were pointed at it.
+            ...(hasSecondaryCategoryAxis && secondaryDomainData
                 ? {
-                    shapes: ofPieExtras.shapes,
-                    ...(ofPieExtras.barmode ? { barmode: ofPieExtras.barmode } : {}),
-                    ...(ofPieExtras.xaxis2 ? { xaxis2: ofPieExtras.xaxis2 } : {}),
-                    ...(ofPieExtras.yaxis2 ? { yaxis2: ofPieExtras.yaxis2 } : {}),
+                    [isHorizontalBarChart ? "yaxis2" : "xaxis2"]: {
+                        overlaying: isHorizontalBarChart ? "y" : "x",
+                        side: isHorizontalBarChart ? "right" : "top",
+                        type: "category",
+                        categoryorder: "array",
+                        categoryarray: secondaryDomainData,
+                        showgrid: false,
+                        automargin: true,
+                        visible: showXAxis(spec?.chartType),
+                    },
                 }
                 : {}),
         };
@@ -1588,13 +1880,72 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         // when chartType === "doughnut".
         const dlOpts = spec.dataLabels;
         const doughnutHole = spec.doughnutHoleSize;
+        // Data labels 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 traceNumberFormat = (trace) => {
+            const specIndex = trace?.meta?.rncSeriesIndex;
+            return ((typeof specIndex === "number"
+                ? seriesNumberFormats[specIndex]
+                : undefined) ??
+                (trace?.[valueAxisKey] === secondaryValueAxisRef
+                    ? secondaryAxisNumberFormat
+                    : primaryAxisNumberFormat));
+        };
+        // Exploded pie / doughnut — plotly's `pull` is a fraction of the radius.
+        const piePull = isOfPie ? undefined : explosionToPlotlyPull(resolveExplosion(spec));
         const formattedTraces = traces.map((trace) => {
-            let next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType);
-            // Doughnut is a pie trace with `hole` set.
+            const pattern = traceNumberFormat(trace);
+            let next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType, pattern);
+            if (next.type === "pie") {
+                // Hover values format like the slice's source cell.
+                if (pattern && !next.text) {
+                    const values = Array.isArray(next.values) ? next.values : [];
+                    next = {
+                        ...next,
+                        text: values.map((v) => formatAxisValue(pattern, v)),
+                        hoverinfo: "label+text+percent+name",
+                    };
+                }
+                else if (pattern) {
+                    next = { ...next, hoverinfo: "label+text+percent+name" };
+                }
+                if (piePull !== undefined) {
+                    next = { ...next, pull: piePull };
+                }
+            }
+            else if (!next.hovertemplate &&
+                (next.type === "bar" || next.type === "scatter") &&
+                typeof next.meta?.rncSeriesIndex === "number") {
+                // Hover values read like the series' own cells (Excel's data tip
+                // shows the cell text) — the series format alone, not the axis
+                // fallback the labels use, since that resolves to the first series
+                // and would stamp its format on every other series. Plotly's `%{y}`
+                // is a raw number and its d3 formats cannot express SpreadsheetML,
+                // so the formatted strings ride on `customdata`; `text` stays free
+                // for the data labels.
+                const seriesPattern = seriesNumberFormats[next.meta.rncSeriesIndex];
+                const horizontal = next.orientation === "h";
+                const values = horizontal ? next.x : next.y;
+                if (seriesPattern && Array.isArray(values)) {
+                    next = {
+                        ...next,
+                        customdata: values.map((v) => formatAxisValue(seriesPattern, v)),
+                        hovertemplate: `${horizontal ? "%{y}" : "%{x}"}<br>%{customdata}<extra>%{fullData.name}</extra>`,
+                    };
+                }
+            }
+            // Doughnut is a pie trace with `hole` set. Excel persists
+            // `holeSize` as a 0-90 percentage, normalized to a 0-1 fraction
+            // (doughnutHoleSize); clamp like the echarts renderer and default
+            // to 0.5 when unset.
             if (spec.chartType === "doughnut" && next.type === "pie") {
                 next = {
                     ...next,
-                    hole: typeof doughnutHole === "number" ? doughnutHole : 0.5,
+                    hole: typeof doughnutHole === "number"
+                        ? Math.max(0, Math.min(0.9, doughnutHole))
+                        : 0.5,
                 };
             }
             return next;
@@ -1617,7 +1968,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     // Update chart on spec changes
     useIsomorphicLayoutEffect(() => {
         updateChart();
-    }, [chart.spec, getDomainValuesFromRange, getSeriesValuesFromRange]);
+    }, [
+        chart.spec,
+        getDomainValuesFromRange,
+        getSeriesValuesFromRange,
+        getFormattingFromRange,
+    ]);
     // Update theme
     useIsomorphicLayoutEffect(() => {
         updateChart();
@@ -1644,21 +2000,58 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     });
     const config = {
         responsive: true,
-        // Static so a body drag falls through to the EmbedDraggable move handler
-        // (Excel/Sheets behavior) instead of triggering Plotly's zoom-box.
-        // staticPlot also drops the modebar and the `.plot-container .draglayer`
-        // element the move's cancel selector keys off of.
+        // Interactive so plotly reports clicks (series / point selection) and
+        // hover; `dragmode: false` on the layout keeps plotly from starting a
+        // zoom-box or pan on mousedown, so a body drag falls through to the
+        // EmbedDraggable move handler (Excel/Sheets behavior).
         displayModeBar: false,
         displaylogo: false,
-        staticPlot: true,
+        staticPlot: false,
+        scrollZoom: false,
+        doubleClick: false,
     };
+    const plotLayout = useMemo(() => ({ ...layout, dragmode: false }), [layout]);
     // Excel's "Rounded Corners" chart frame (`<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.
     const roundedCornersStyle = spec.roundedCorners
         ? { borderRadius: 8, overflow: "hidden" }
         : undefined;
+    // 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;
+    // Copy as Picture / print preview. `plotly.js/dist/plotly` is the module
+    // `react-plotly.js` itself is built on, loaded on demand so the render
+    // path stays as it was.
+    const exportChartPng = async () => {
+        const graphDiv = graphDivRef.current;
+        if (!graphDiv)
+            return undefined;
+        const { default: Plotly } = await import("plotly.js/dist/plotly");
+        const url = await Plotly.toImage(graphDiv, {
+            format: "png",
+            width: graphDiv.clientWidth || width || 600,
+            height: graphDiv.clientHeight || height || 400,
+            scale: 2,
+        });
+        return dataUrlToBlob(url);
+    };
+    // The grid's right-click menu offers these without knowing the renderer.
+    useRegisterChartActions(chart.chartId, {
+        requestEdit: onRequestEdit ? () => onRequestEdit(chart) : undefined,
+        exportPng: exportChartPng,
+        switchRowColumn: switchRowColumnAction,
+    });
     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" },
@@ -1677,6 +2070,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             shouldFocusSheetRef.current = true;
                             onDeleteChart?.(chart.chartId);
                         } }, "Delete chart")))))) : null,
-        React.createElement("div", { className: "flex-1 rnc-plotly-chart-container" },
-            React.createElement(Plot, { ref: plotRef, data: plotData, layout: layout, config: config, style: { width: "100%", height: "100%" } }))));
+        React.createElement("div", { className: "flex-1 rnc-plotly-chart-container", onPointerDownCapture: handlePointerDownCapture },
+            React.createElement(Plot, { ref: plotRef, data: plotData, layout: plotLayout, config: config, onClick: handlePlotClick, onInitialized: (_figure, graphDiv) => {
+                    graphDivRef.current = graphDiv;
+                }, style: { width: "100%", height: "100%" } }))));
 };