@rowsncolumns/charts 28.1.18 → 28.1.19

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

@@ -16,20 +16,23 @@ import { computeBoxplotSummary } from "../utils/boxplot";
 import { createBubbleSizeScale, prepareBubbleSeriesData, } from "../utils/bubble";
 import { echartsGroupedCategoryAxes, resolveCategoryLevels, } from "../utils/category-levels";
 import { dataUrlToBlob } from "../utils/chart-image";
+import { buildChartLineSeries, CHART_LINE_SERIES_PREFIX, } from "../utils/chart-lines";
 import { canSwitchRowColumn, cellLabelGetterFromRangeReader, switchRowColumn, } from "../utils/chart-orientation";
 import { coerceCalculatedLabel, getChartDataRanges, } from "../utils/chart-spec-utils";
 import { getChartPalette } from "../utils/chart-styles";
+import { dataTableAxes, } from "../utils/data-table";
 import { clampDoughnutHole, doughnutRings } from "../utils/doughnut";
 import { getEchartsGlState, loadEchartsGl, markEchartsGlFailed, } from "../utils/echarts-gl-loader";
 import { buildEchartsOverlaySeries } from "../utils/echarts-overlays";
 import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, isLineLikeChartType, isolatedPointIndexes, } from "../utils/empty-cells";
+import { excelAutoAxisScale, valueAxisExtentValues } from "../utils/excel-axis-scale";
 import { gradientToEcharts } from "../utils/gradient";
 import { buildHierarchyTree, contrastTextColor, extractHierarchyRows, getHierarchyHeaderTitle, } from "../utils/hierarchy";
 import { aggregateByCategory, binHistogram, computePareto, isParetoSpec, } from "../utils/histogram";
 import { categoryAxisNameGap, legendLabelsFrom, reserveEchartsLegendBand, } from "../utils/legend-layout";
 import { clampSecondPieSize, isOfPieChartSpec, otherSliceHalfAngle, resolveOfPieType, splitOfPie, } from "../utils/of-pie";
 import { applyAxisOverrides, applyLegendOverrides, buildSeriesLabelOption, dataLabelFormatter, resolveSeriesDataLabels, } from "../utils/overrides";
-import { themedTextStyle } from "../utils/overrides";
+import { CHART_TEXT_PX, CHART_TITLE_PX, fontSizePx, pointsToPixels, themedTextStyle, } from "../utils/overrides";
 import { explosionOffsetPx, pieRadiusPx, resolveExplosion, } from "../utils/pie-explosion";
 import { buildRadarIndicators, buildRadarSeriesData } from "../utils/radar";
 import { buildRegionMapData, buildSequentialColorRamp, isRegionMapSpec, resolveGeoScope, warnOnceForUnmatchedRegions, } from "../utils/region-map";
@@ -40,7 +43,7 @@ import { STOCK_ROLES, toCandlestick, toLineSeries, toVolumeSeries, } from "../ut
 import { buildBar3DData, buildContourData, buildLine3DSeries, buildSurfaceData, getCategoryCount, getValueExtent, isContourSpec, resolve3DRenderKind, SURFACE_COLOR_RAMP, } from "../utils/three-d";
 import { computeWaterfall } from "../utils/waterfall";
 import { isWebGLAvailable } from "../utils/webgl";
-import { chartTypeToEchartsType, circularLegendEntries, getEchartsSeriesStyle, isCircularChartType, mapMarkerSymbolToEcharts, showXAxis, } from "./helpers";
+import { automaticMarkerSymbol, chartTypeToEchartsType, circularLegendEntries, getEchartsSeriesStyle, isCircularChartType, mapMarkerSymbolToEcharts, showXAxis, } from "./helpers";
 // Excel error values that should be treated as null in charts
 const EXCEL_ERROR_VALUES = new Set([
     "#N/A",
@@ -248,9 +251,33 @@ const defaultLegendConfig = {
 };
 /** Category-axis title gap: clears one row of tick labels (#986). */
 const CATEGORY_AXIS_NAME_GAP = categoryAxisNameGap();
+/**
+ * Excel's chart text colour: Text 1 at 65% (`<a:schemeClr val="tx1"><a:lumMod
+ * val="65000"/><a:lumOff val="35000"/>`, #595959 on the light theme) — RD-24.
+ */
+const chartTextColor = (theme, isDarkMode) => getStringifiedColor({ theme: 1, tint: isDarkMode ? 1 : 0.35 }, theme);
+/** The theme's body (minor) font, which Excel's chart text uses. */
+const chartFontFamily = (theme) => theme?.primaryFontFamily ? `${theme.primaryFontFamily}, sans-serif` : "sans-serif";
+/** Chart types whose value axes take Excel's automatic bounds and major unit. */
+const AUTO_SCALE_CHART_TYPES = new Set([
+    "column",
+    "bar",
+    "line",
+    "area",
+    "combo",
+]);
 export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, enable3D, }) => {
     const spec = chart.spec;
-    const explicitChartTitle = chart.spec.title ?? undefined;
+    // A title linked to a cell shows the cell's text (FT-08); `title` is its last copy.
+    const titleSource = chart.spec.titleSource;
+    const linkedTitleValue = titleSource
+        ? getDomainValuesFromRange(titleSource)?.[0]
+        : undefined;
+    const explicitChartTitle = (linkedTitleValue !== undefined && linkedTitleValue !== null && linkedTitleValue !== ""
+        ? String(linkedTitleValue)
+        : undefined) ??
+        chart.spec.title ??
+        undefined;
     const hierarchyTitleRef = useRef(explicitChartTitle);
     const title = explicitChartTitle ?? hierarchyTitleRef.current;
     const el = useRef(null);
@@ -790,20 +817,19 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 visible: bubbleLegend.show !== false,
                 labels: preparedSeries.map((entry) => entry.name),
                 legendFontSize: bubbleLegend.textStyle?.fontSize ??
-                    spec.legend?.textFormat?.fontSize ??
-                    12,
+                    fontSizePx(spec.legend?.textFormat?.fontSize, CHART_TEXT_PX),
                 legendItemWidth: defaultLegendConfig.itemWidth,
                 width: width ?? 0,
                 height: height ?? 0,
                 hasTitle: Boolean(explicitChartTitle),
-                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                titleFontSize: fontSizePx(spec.titleTextFormat?.fontSize, CHART_TITLE_PX),
                 hasBottomAxisTitle: Boolean(spec.horizontalAxisTitle),
                 bottomAxisNameGap: 30,
                 hasLeftAxisTitle: Boolean(spec.verticalAxisTitle),
             });
             chartRef.current?.setOption({
                 xAxis: [
-                    applyAxisOverrides({ ...xAxisConfig }, spec.categoryAxisOptions),
+                    applyAxisOverrides({ ...xAxisConfig }, spec.categoryAxisOptions, undefined, undefined, "x"),
                 ],
                 yAxis: [
                     applyAxisOverrides({
@@ -936,13 +962,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 visible: legendShown && hierarchyData.length > 0,
                 labels: hierarchyData.map((node) => node.name),
                 legendFontSize: hierarchyLegend.textStyle?.fontSize ??
-                    spec.legend?.textFormat?.fontSize ??
-                    12,
+                    fontSizePx(spec.legend?.textFormat?.fontSize, CHART_TEXT_PX),
                 legendItemWidth: defaultLegendConfig.itemWidth,
                 width: width ?? 0,
                 height: height ?? 0,
                 hasTitle: Boolean(explicitChartTitle ?? headerTitle),
-                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                titleFontSize: fontSizePx(spec.titleTextFormat?.fontSize, CHART_TITLE_PX),
                 hasBottomAxisTitle: false,
                 bottomAxisNameGap: 0,
                 hasLeftAxisTitle: false,
@@ -1445,13 +1470,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 visible: radarLegend.show !== false,
                 labels: radarData.map((d) => d.name),
                 legendFontSize: radarLegend.textStyle?.fontSize ??
-                    spec.legend?.textFormat?.fontSize ??
-                    12,
+                    fontSizePx(spec.legend?.textFormat?.fontSize, CHART_TEXT_PX),
                 legendItemWidth: defaultLegendConfig.itemWidth,
                 width: width ?? 0,
                 height: height ?? 0,
                 hasTitle: Boolean(explicitChartTitle),
-                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                titleFontSize: fontSizePx(spec.titleTextFormat?.fontSize, CHART_TITLE_PX),
                 hasBottomAxisTitle: false,
                 bottomAxisNameGap: 0,
                 hasLeftAxisTitle: false,
@@ -1752,6 +1776,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             return;
         }
         const isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
+        // Tick labels and axis titles in Excel's chart text style (RD-24): 9 pt
+        // labels, 10 pt titles, Text 1 at 65%. An axis' `<c:txPr>` overrides it.
+        const axisTextColor = chartTextColor(theme, isDarkMode);
+        const axisTextStyle = {
+            axisLabel: { color: axisTextColor, fontSize: CHART_TEXT_PX },
+            nameTextStyle: { color: axisTextColor, fontSize: pointsToPixels(10) },
+        };
         const isCircularChart = spec.chartType === "pie" || spec.chartType === "doughnut";
         // Pie-of-pie / bar-of-pie composite. The of-pie branch below fills
         // `ofPieLayout` so the grid/axis assembly at the bottom can add the
@@ -1778,7 +1809,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 show: showAxis,
                 axisLine: { show: true },
                 axisTick: { show: true },
-                splitLine: { show: true },
+                splitLine: { show: false },
                 name: isHorizontalBarChart
                     ? spec.verticalAxisTitle ?? ""
                     : spec.horizontalAxisTitle ?? "",
@@ -1802,12 +1833,15 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     : spec.horizontalAxisTitle ?? ""
                 : undefined;
             chartDomains.push({
+                ...axisTextStyle,
                 type: "category",
                 data: axisData,
                 show: showAxis && !isCircularChart,
                 axisLine: { show: !isCircularChart },
                 axisTick: { show: !isCircularChart },
-                splitLine: { show: !isCircularChart },
+                // Excel draws vertical (category) gridlines only when the axis asks
+                // for them (`<c:catAx><c:majorGridlines/>`) — LV-05.
+                splitLine: { show: false },
                 name: axisTitle,
                 nameLocation: "middle",
                 nameGap: CATEGORY_AXIS_NAME_GAP,
@@ -1815,11 +1849,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         });
         if (chartDomains.length === 0 && !isCircularChart) {
             chartDomains.push({
+                ...axisTextStyle,
                 type: "category",
                 show: showAxis,
                 axisLine: { show: true },
                 axisTick: { show: true },
-                splitLine: { show: true },
+                splitLine: { show: false },
                 gridIndex: 0,
                 name: isHorizontalBarChart
                     ? spec.verticalAxisTitle ?? ""
@@ -1989,8 +2024,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 seriesEntry.showSymbol = wantsMarkers || labelsWithoutMarkers;
                 if (wantsMarkers) {
                     seriesEntry.symbol =
-                        mapMarkerSymbolToEcharts(markerSymbol) ?? "circle";
-                    seriesEntry.symbolSize = seriesAny.marker?.size ?? 6;
+                        mapMarkerSymbolToEcharts(markerSymbol ?? automaticMarkerSymbol(specSeriesIndex)) ?? "circle";
+                    // Excel's automatic marker is 5 pt (7 px); an authored size is points too.
+                    seriesEntry.symbolSize = Math.round(((seriesAny.marker?.size ?? 5) * 4) / 3);
                 }
                 else {
                     if (labelsWithoutMarkers) {
@@ -2719,18 +2755,41 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             }
             legend.data = [];
         }
+        // Add Chart Element → Lines / Up/Down Bars (FT-08): over the primary
+        // axis' line series, in spec order.
+        const lineElementOptions = spec;
+        if (!isCircularChart &&
+            (lineElementOptions.dropLines ||
+                (spec.chartType === "line" &&
+                    (lineElementOptions.hiLowLines || lineElementOptions.upDownBars)))) {
+            const lineData = chartSeries
+                .filter((s) => s?.type === "line" &&
+                s.yAxisIndex !== 1 &&
+                chartSeriesSpecIndex(s.id) !== undefined &&
+                Array.isArray(s.data))
+                .map((s) => s.data);
+            chartSeries.push(...buildChartLineSeries({
+                dropLines: lineElementOptions.dropLines &&
+                    (spec.chartType === "line" || spec.chartType === "area"),
+                hiLowLines: lineElementOptions.hiLowLines,
+                upDownBars: lineElementOptions.upDownBars,
+            }, lineData, { isDarkMode }));
+        }
         // Only redraw chart
         // if chart type has changed
         // if series count has changed. Use the rendered series count
         // (`chartSeries.length`) rather than `spec.series.length` because
         // trendline / error-bar overlays add extra series; comparing the
         // raw spec count would miss those and skip the structural redraw.
-        const renderedSeriesCount = chartSeries.length;
+        // A data table's rows are extra x axes: turning it on or off is a
+        // structural change too, so it shifts the count the redraw compares.
+        const renderedSeriesCount = chartSeries.length + (spec.dataTable ? 10_000 : 0);
         const replaceMerge = previousChartType.current !== spec.chartType ||
             previousSeriesCount.current !== renderedSeriesCount
             ? ["series", "xAxis", "yAxis", "legend", "grid", "tooltip"]
             : [];
         const valueAxisBase = {
+            ...axisTextStyle,
             type: "value",
             show: !isCircularChart,
             // echarts draws the value axis line at the zero of a value-type x
@@ -2810,13 +2869,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             visible: finalLegend.show !== false,
             labels: legendLabelsFrom(finalLegend.data, chartSeries.map((s) => s?.name)),
             legendFontSize: finalLegend.textStyle?.fontSize ??
-                spec.legend?.textFormat?.fontSize ??
-                12,
+                fontSizePx(spec.legend?.textFormat?.fontSize, CHART_TEXT_PX),
             legendItemWidth: defaultLegendConfig.itemWidth,
             width: width ?? 0,
             height: height ?? 0,
             hasTitle: Boolean(title),
-            titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+            titleFontSize: fontSizePx(spec.titleTextFormat?.fontSize, CHART_TITLE_PX),
             hasBottomAxisTitle: !isCircularChart && Boolean(spec.horizontalAxisTitle),
             bottomAxisNameGap,
             hasLeftAxisTitle: !isCircularChart && Boolean(spec.verticalAxisTitle),
@@ -2847,12 +2905,20 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         const seriesLabelOptionFor = (s) => {
             const specIndex = chartSeriesSpecIndex(s?.id);
             const dataLabelOptions = resolveSeriesDataLabels(chartDataLabels, specIndex === undefined ? undefined : spec.series?.[specIndex]);
-            return buildSeriesLabelOption(dataLabelOptions && !dataLabelOptions.numberFormatPattern
+            const withFormat = dataLabelOptions && !dataLabelOptions.numberFormatPattern
                 ? {
                     ...dataLabelOptions,
                     numberFormatPattern: seriesNumberFormatFor(s),
                 }
-                : dataLabelOptions, s?.type, locale);
+                : dataLabelOptions;
+            // Value From Cells: the label range's cells, point by point.
+            const cellRange = withFormat?.valueFromCells;
+            return buildSeriesLabelOption(cellRange
+                ? {
+                    ...withFormat,
+                    cellLabels: getDomainValuesFromRange(cellRange, spec.hiddenDimensionStrategy) ?? [],
+                }
+                : withFormat, s?.type, locale);
         };
         // For doughnut, surface the inner-radius hole on each pie series.
         // Excel persists `holeSize` as a 0-90 percentage; we normalize to a
@@ -2918,7 +2984,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         }
         const seriesWithLabels = chartSeries.map((s) => {
             const next = { ...s };
-            if (DECORATION_SERIES_IDS.has(s?.id)) {
+            if (DECORATION_SERIES_IDS.has(s?.id) ||
+                String(s?.id ?? "").startsWith(CHART_LINE_SERIES_PREFIX)) {
                 return next;
             }
             const seriesLabelOption = seriesLabelOptionFor(s);
@@ -2986,6 +3053,66 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             }
             return next;
         });
+        // A chart with no category range (`<c:ser>` without `<c:cat>`) labels its
+        // points 1, 2, 3… like Excel — echarts' bare category axis would number
+        // them from 0 (LV-05).
+        const bareCategoryAxis = chartDomains[0];
+        if (!isCircularChart &&
+            !categoryLevels &&
+            !spec.domains?.length &&
+            bareCategoryAxis &&
+            bareCategoryAxis.data === undefined) {
+            const pointCount = seriesWithLabels.reduce((count, s) => (s?.type === "bar" || s?.type === "line") && Array.isArray(s.data)
+                ? Math.max(count, s.data.length)
+                : count, 0);
+            bareCategoryAxis.data = Array.from({ length: pointCount }, (_, i) => String(i + 1));
+        }
+        // Add Chart Element → Data Table (FT-08): a row per plotted series under
+        // the category axis, values in the series' own number format.
+        const dataTableOptions = spec.dataTable;
+        const dataTableRows = dataTableOptions && !isCircularChart && !isHorizontalBarChart && !isOfPie
+            ? seriesWithLabels
+                .filter((s) => (s?.type === "line" || s?.type === "bar") &&
+                chartSeriesSpecIndex(s?.id) !== undefined &&
+                Array.isArray(s.data))
+                .map((s) => {
+                const specIndex = chartSeriesSpecIndex(s.id);
+                const pattern = seriesNumberFormatFor(s);
+                return {
+                    name: String(s.name ?? ""),
+                    color: typeof s.itemStyle?.color === "string"
+                        ? s.itemStyle.color
+                        : spec.series?.[specIndex]?.color ?? paletteColorAt(specIndex),
+                    values: s.data.map((d) => {
+                        const v = d !== null && typeof d === "object"
+                            ? d.originalValue ?? d.value
+                            : d;
+                        return v === null || v === undefined ? "" : formatAxisValue(pattern, v, locale);
+                    }),
+                };
+            })
+            : [];
+        const dataTableAxisList = dataTableRows.length
+            ? dataTableAxes(dataTableRows, dataTableOptions ?? {}, {
+                textColor: axisTextColor,
+                fontSize: CHART_TEXT_PX,
+                borderColor: isDarkMode ? "rgba(255,255,255,0.3)" : "#D9D9D9",
+            })
+            : [];
+        // Excel's automatic bounds and major unit on the cartesian value axes
+        // (LV-05: echarts' own nicing drew steps of 3 where Excel draws 2).
+        const autoScaleEligible = !isCircularChart &&
+            !isOfPie &&
+            AUTO_SCALE_CHART_TYPES.has(spec.chartType) &&
+            !spec.sourceChartType &&
+            spec.stackedType !== "PERCENT_STACKED";
+        const withExcelAutoScale = (axis, opts, axisIndex) => {
+            if (!autoScaleEligible || axis?.type === "log" || opts?.logarithmic) {
+                return axis;
+            }
+            const scale = excelAutoAxisScale(valueAxisExtentValues(seriesWithLabels, axisIndex), { min: opts?.min, max: opts?.max, majorUnit: opts?.majorUnit });
+            return scale ? { ...axis, ...scale } : axis;
+        };
         // Update charts
         chartRef.current?.setOption({
             xAxis: (() => {
@@ -3030,10 +3157,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 }
                 if (isHorizontalBarChart) {
                     return [
-                        applyAxisOverrides({
+                        withExcelAutoScale(applyAxisOverrides({
                             ...valueAxisBase,
                             name: spec.horizontalAxisTitle ?? "",
-                        }, spec.valueAxisOptions, primaryAxisNumberFormat, locale),
+                        }, spec.valueAxisOptions, primaryAxisNumberFormat, locale, "x"), spec.valueAxisOptions, 0),
                     ];
                 }
                 const base = chartDomains.length > 0
@@ -3044,14 +3171,18 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             show: showAxis,
                             axisLine: { show: true },
                             axisTick: { show: true },
-                            splitLine: { show: true },
+                            splitLine: { show: false },
                             name: spec.horizontalAxisTitle ?? "",
                             nameLocation: "middle",
                             nameGap: CATEGORY_AXIS_NAME_GAP,
                         },
                     ];
                 const axes = base.map((axis) => applyAxisOverrides(axis, spec.categoryAxisOptions));
-                return boxplotOverlayAxis ? [...axes, boxplotOverlayAxis] : axes;
+                return [
+                    ...axes,
+                    ...(boxplotOverlayAxis ? [boxplotOverlayAxis] : []),
+                    ...dataTableAxisList,
+                ];
             })(),
             yAxis: (() => {
                 if (isOfPie) {
@@ -3100,13 +3231,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 show: showAxis,
                                 axisLine: { show: true },
                                 axisTick: { show: true },
-                                splitLine: { show: true },
+                                splitLine: { show: false },
                                 name: spec.verticalAxisTitle ?? "",
                                 nameLocation: "middle",
                                 nameGap: CATEGORY_AXIS_NAME_GAP,
                             },
                         ];
-                    return base.map((axis) => applyAxisOverrides(axis, spec.categoryAxisOptions));
+                    return base.map((axis) => applyAxisOverrides(axis, spec.categoryAxisOptions, undefined, undefined, "y"));
                 }
                 const axes = [
                     applyAxisOverrides({
@@ -3125,6 +3256,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         }),
                     }, spec.valueAxisOptions, primaryAxisNumberFormat, locale),
                 ];
+                axes[0] = withExcelAutoScale(axes[0], spec.valueAxisOptions, 0);
                 if (hasSecondaryAxis) {
                     axes.push(applyAxisOverrides({
                         ...valueAxisBase,
@@ -3139,6 +3271,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             }
                             : {}),
                     }, spec.secondaryValueAxisOptions, secondaryAxisNumberFormat, locale));
+                    if (!isPareto) {
+                        axes[1] = withExcelAutoScale(axes[1], spec.secondaryValueAxisOptions, 1);
+                    }
                 }
                 return axes;
             })(),
@@ -3185,10 +3320,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     // re-apply these.
     const applyThemeOptions = () => {
         if (chartRef.current) {
-            const textColor = getStringifiedColor({
-                theme: 1,
-                tint: isDarkMode ? 1 : 0,
-            }, theme);
+            const textColor = chartTextColor(theme, isDarkMode);
+            const fontFamily = chartFontFamily(theme);
             const bgColor = getStringifiedColor({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
             const showAxis = showXAxis(chart.spec.chartType);
             // Authored chart-level text formats override the theme-derived
@@ -3204,18 +3337,24 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     // Every key is written (echarts merges setOption calls, so a key
                     // left out keeps its previous value — turning bold off used to
                     // leave the title bold, rowsncolumns/spreadsheet#1105).
+                    left: "center",
                     textStyle: themedTextStyle(authoredTitleFmt, {
                         color: textColor,
-                        fontSize: 18,
-                        fontWeight: "bold",
+                        fontSize: CHART_TITLE_PX,
+                        fontFamily,
+                        fontWeight: "normal",
                     }),
                 },
                 legend: {
                     textStyle: themedTextStyle(authoredLegendFmt, {
                         color: textColor,
-                        fontSize: 12,
+                        fontSize: CHART_TEXT_PX,
+                        fontFamily,
                     }),
                 },
+                // Every other chart text (tick labels, axis titles, data labels)
+                // inherits the theme body font.
+                textStyle: { fontFamily },
                 axisLabel: {
                     color: authoredDataLabelFmt?.color ?? textColor,
                 },

package/dist/esm/basic-chart/helpers.d.ts

@@ -1,10 +1,14 @@
 import type { EmbeddedChart } from "@rowsncolumns/spreadsheet";
 export declare const chartTypeToEchartsType: (type: EmbeddedChart["spec"]["chartType"]) => "bar" | "line" | "pie" | "radar" | "boxplot" | "funnel" | "treemap" | "sunburst" | "scatter" | "map";
+export declare const mapMarkerSymbolToEcharts: (symbol: string | undefined | null) => string | undefined;
 /**
- * Map OOXML `<c:marker><c:symbol>` values to echarts symbol names.
- * Returns undefined for "auto" / unknown — caller defaults to "circle".
+ * The marker Excel draws for a "Line with Markers" series that names no
+ * symbol of its own (`<c:lineChart><c:marker val="1"/>` with no
+ * `<c:ser><c:marker>`): the automatic cycle by series index — diamond,
+ * square, triangle, x, star, circle, plus (LV-05).
  */
-export declare const mapMarkerSymbolToEcharts: (symbol: string | undefined | null) => string | undefined;
+export declare const EXCEL_AUTOMATIC_MARKERS: readonly ["diamond", "square", "triangle", "x", "star", "circle", "plus"];
+export declare const automaticMarkerSymbol: (seriesIndex: number) => "x" | "plus" | "circle" | "square" | "diamond" | "triangle" | "star";
 /** Pie and doughnut — the pie-family types whose points are slices. */
 export declare const isCircularChartType: (type: EmbeddedChart["spec"]["chartType"] | undefined) => boolean;
 /**

package/dist/esm/basic-chart/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAuBX,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,KACnD,OAAgD,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,aAAa,CAAC,OAAO,CAAC,KAC7B,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAmBjE,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAcF,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAqBX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,2EAQ1B,CAAC;AAEX,eAAO,MAAM,qBAAqB,GAAI,aAAa,MAAM,yEAKtD,CAAC;AAEJ,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,KACnD,OAAgD,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,aAAa,CAAC,OAAO,CAAC,KAC7B,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAmBjE,CAAC"}

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

@@ -50,6 +50,13 @@ export const chartTypeToEchartsType = (type) => {
  * Map OOXML `<c:marker><c:symbol>` values to echarts symbol names.
  * Returns undefined for "auto" / unknown — caller defaults to "circle".
  */
+/** Excel's x / plus / asterisk / dash markers as echarts path symbols (filled outlines). */
+const MARKER_PATHS = {
+    x: "path://M2,0L5,3L8,0L10,2L7,5L10,8L8,10L5,7L2,10L0,8L3,5L0,2Z",
+    plus: "path://M4,0H6V4H10V6H6V10H4V6H0V4H4Z",
+    star: "path://M4.3,0H5.7V3.8L9,1.9L9.7,3.1L6.4,5L9.7,6.9L9,8.1L5.7,6.2V10H4.3V6.2L1,8.1L0.3,6.9L3.6,5L0.3,3.1L1,1.9L4.3,3.8Z",
+    dash: "path://M0,4H10V6H0Z",
+};
 export const mapMarkerSymbolToEcharts = (symbol) => {
     switch (symbol) {
         case "circle":
@@ -63,17 +70,33 @@ export const mapMarkerSymbolToEcharts = (symbol) => {
             return "triangle";
         case "x":
         case "plus":
-            return "pin";
         case "star":
-            return "diamond";
         case "dash":
-            return "rect";
+            return MARKER_PATHS[symbol];
         case "none":
             return "none";
         default:
             return undefined;
     }
 };
+/**
+ * The marker Excel draws for a "Line with Markers" series that names no
+ * symbol of its own (`<c:lineChart><c:marker val="1"/>` with no
+ * `<c:ser><c:marker>`): the automatic cycle by series index — diamond,
+ * square, triangle, x, star, circle, plus (LV-05).
+ */
+export const EXCEL_AUTOMATIC_MARKERS = [
+    "diamond",
+    "square",
+    "triangle",
+    "x",
+    "star",
+    "circle",
+    "plus",
+];
+export const automaticMarkerSymbol = (seriesIndex) => EXCEL_AUTOMATIC_MARKERS[((seriesIndex % EXCEL_AUTOMATIC_MARKERS.length) +
+    EXCEL_AUTOMATIC_MARKERS.length) %
+    EXCEL_AUTOMATIC_MARKERS.length];
 /** Pie and doughnut — the pie-family types whose points are slices. */
 export const isCircularChartType = (type) => type === "pie" || type === "doughnut";
 /**

package/dist/esm/basic-chart/index.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
 import type { EChartComponentProps } from "../types";
+/**
+ * Excel's chart area outline: a thin Text 1 at 15% line (#D9D9D9), no drop
+ * shadow (LV-05). A chart with its own Format Chart Area border
+ * (`EmbeddedChart.borderColor`) is outlined by the grid's embed frame
+ * instead, so it gets none here.
+ */
+export declare const chartFrameBorder: (chart: EChartComponentProps["chart"], isDarkMode?: boolean) => string | undefined;
 export declare const ChartComponent: (props: EChartComponentProps) => React.JSX.Element;
 export default ChartComponent;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/basic-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../basic-chart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGrD,eAAO,MAAM,cAAc,GAAI,OAAO,oBAAoB,sBAMzD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../basic-chart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGrD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,oBAAoB,CAAC,OAAO,CAAC,EACpC,aAAa,OAAO,KACnB,MAAM,GAAG,SAGyD,CAAC;AAEtE,eAAO,MAAM,cAAc,GAAI,OAAO,oBAAoB,sBAazD,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,7 +1,21 @@
 import React from "react";
 import { BasicChart } from "./basic-chart";
+/**
+ * Excel's chart area outline: a thin Text 1 at 15% line (#D9D9D9), no drop
+ * shadow (LV-05). A chart with its own Format Chart Area border
+ * (`EmbeddedChart.borderColor`) is outlined by the grid's embed frame
+ * instead, so it gets none here.
+ */
+export const chartFrameBorder = (chart, isDarkMode) => chart?.borderColor
+    ? undefined
+    : `1px solid ${isDarkMode ? "rgba(255,255,255,0.2)" : "#D9D9D9"}`;
 export const ChartComponent = (props) => {
-    return (React.createElement("div", { className: "shadow-lg bg-rnc-background flex-1 flex break-words flex-col" },
+    return (React.createElement("div", { className: "bg-rnc-background flex-1 flex break-words flex-col", 
+        // An inset outline: drawn over the plot's edge without shrinking it.
+        style: {
+            outline: chartFrameBorder(props.chart, props.isDarkMode),
+            outlineOffset: -1,
+        } },
         React.createElement(BasicChart, { ...props })));
 };
 export default ChartComponent;

package/dist/esm/components/editors/chart-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/chart-editor.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,aAAa,EAGd,MAAM,2BAA2B,CAAC;AAwBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAEL,KAAK,oBAAoB,EAG1B,MAAM,+BAA+B,CAAC;AAuDvC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACtC;;;;OAIG;IACH,kBAAkB,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,oBAAoB,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,gFAOzB,gBAAgB,sBAmhClB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"chart-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/chart-editor.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,aAAa,EAGd,MAAM,2BAA2B,CAAC;AAwBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAEL,KAAK,oBAAoB,EAG1B,MAAM,+BAA+B,CAAC;AAwDvC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACtC;;;;OAIG;IACH,kBAAkB,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,oBAAoB,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,gFAOzB,gBAAgB,sBAujClB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/components/editors/chart-editor.js

@@ -14,6 +14,7 @@ import { applyChartColorPalette, applyChartQuickLayout, applyChartStyle, CHART_C
 import { getChartEditorCapabilities } from "./chart-editor-capabilities";
 import { ChartRangeInput } from "./chart-range-input";
 import { AxisOptionsFields } from "./fields/axis-options-fields";
+import { ChartElementsFields } from "./fields/chart-elements-fields";
 import { chartTypeHasOptions, ChartTypeOptionsFields, } from "./fields/chart-type-options";
 import { DataLabelsFields } from "./fields/data-labels-fields";
 import { SeriesFormatFields } from "./fields/series-format-fields";
@@ -322,7 +323,14 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                 React.createElement(Section, { title: "Chart style", defaultOpen: true },
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Chart title"),
-                        React.createElement(Input, { value: values?.spec.title ?? "", type: "text", onChange: (e) => setFieldValue(`spec.title`, e.target.value), className: "text-xs", placeholder: "Enter chart title" })),
+                        React.createElement(Input, { value: values?.spec.title ?? "", type: "text", onChange: (e) => setFieldValue(`spec.title`, e.target.value), className: "text-xs", placeholder: "Enter chart title" }),
+                        React.createElement("label", { className: "font-system text-xs" }, "Link title to cell"),
+                        React.createElement(ChartRangeInput, { sheetId: sheetId, range: values.spec.titleSource ?? undefined, onChangeRange: (titleSource) => setFieldValue("spec.titleSource", {
+                                ...titleSource,
+                                endRowIndex: titleSource.startRowIndex,
+                                endColumnIndex: titleSource.startColumnIndex,
+                            }), placeholder: "Select a cell", className: "mb-0" }),
+                        values.spec.titleSource ? (React.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline self-start", onClick: () => setFieldValue("spec.titleSource", undefined) }, "Unlink title")) : null),
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Subtitle"),
                         React.createElement(Input, { value: values.spec.subtitle ?? "", type: "text", onChange: (e) => setFieldValue("spec.subtitle", e.target.value || undefined), className: "text-xs", placeholder: "Enter chart subtitle", "aria-label": "Chart subtitle" })),
@@ -400,6 +408,9 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                         React.createElement("label", { className: "font-system text-sm" }, "Horizontal axis title"),
                         React.createElement(Input, { value: values?.spec.horizontalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.horizontalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Horizontal axis title" }))) : null,
                     caps.hasCategoryAxis ? (React.createElement(AxisOptionsFields, { label: "Category axis", kind: caps.category === "bubble" ? "value" : "category", value: values.spec.categoryAxisOptions, gridlinesDefault: false, onChange: (next) => setFieldValue("spec.categoryAxisOptions", next) })) : null)) : null,
+                caps.hasValueAxis &&
+                    ["line", "area", "column", "combo"].includes(values.spec.chartType) ? (React.createElement(Section, { title: "Chart elements" },
+                    React.createElement(ChartElementsFields, { chartType: values.spec.chartType, spec: values.spec, onChange: (key, value) => setFieldValue(`spec.${key}`, value) }))) : null,
                 caps.hasDataLabels ? (React.createElement(Section, { title: "Data labels" },
                     React.createElement(DataLabelsFields, { value: values.spec.dataLabels, capabilities: caps, onChange: (dataLabels) => setFieldValue("spec.dataLabels", dataLabels) }))) : null,
                 hasTypeOptions ? (React.createElement(Section, { title: "Chart options" },

package/dist/esm/components/editors/fields/axis-options-fields.d.ts

@@ -1,9 +1,12 @@
 import type { ChartAxisOptions } from "@rowsncolumns/spreadsheet";
 import React from "react";
 /**
- * One axis' options (`ChartAxisOptions`): a value axis has a scale
- * (min / max / logarithmic), both have direction, gridlines, visibility
- * and tick-label font; a value axis also has its number format.
+ * One axis' options (`ChartAxisOptions`) — Excel's Format Axis pane
+ * (demo-app-monorepo#49969 FT-08): a value axis has its bounds, log scale
+ * and base, major / minor units, display units and number format; a
+ * category axis its label / tick-mark intervals; both have where the other
+ * axis crosses, direction, major / minor gridlines, tick marks, visibility
+ * and tick-label font.
  */
 export declare const AxisOptionsFields: ({ label, kind, value, onChange, gridlinesDefault, }: {
     label: string;