@rowsncolumns/charts 28.1.17 → 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, } from "../utils/echarts-gl-loader";
+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();
-export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, }) => {
+/**
+ * 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);
@@ -428,7 +455,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         // SSR, import failure, PIE_3D) the 2-D fallback renders untouched.
         // The 3-D and region-map gates key off disjoint sourceChartType
         // tokens, so a spec can never satisfy both.
-        const threeDRenderKind = resolve3DRenderKind(spec.sourceChartType);
+        const threeDRenderKind = resolve3DRenderKind(spec.sourceChartType, { enable3D });
         const canRender3D = threeDRenderKind !== null && isWebGLAvailable();
         const willRender3D = canRender3D && getEchartsGlState() === "ready";
         if (canRender3D && !willRender3D && getEchartsGlState() !== "failed") {
@@ -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,
@@ -1327,38 +1352,63 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     inRange: { color: [...SURFACE_COLOR_RAMP] },
                 };
             }
-            chartRef.current?.setOption({
-                tooltip: {
-                    textStyle: { fontSize: 12 },
-                    formatter: threeDTooltipFormatter,
-                },
-                legend: threeDRenderKind === "line3D" || stackedBar3D
-                    ? applyLegendOverrides({
-                        ...defaultLegendConfig,
-                        show: seriesNames.length > 1,
-                        data: seriesNames,
-                    }, spec.legend)
-                    : { show: false },
-                xAxis3D: { ...xAxis3D, name: spec.horizontalAxisTitle ?? "" },
-                yAxis3D: { ...yAxis3D, name: "" },
-                zAxis3D: { type: "value", name: spec.verticalAxisTitle ?? "" },
-                grid3D: {
-                    boxDepth: Math.max(20, Math.min(100, seriesNames.length * 20)),
-                    viewControl: { autoRotate: false },
-                },
-                ...(visualMap ? { visualMap: [visualMap] } : {}),
-                series: threeDSeries,
-            }, {
-                replaceMerge: [
-                    "series",
-                    "xAxis3D",
-                    "yAxis3D",
-                    "zAxis3D",
-                    "visualMap",
-                    "legend",
-                    "tooltip",
-                ],
-            });
+            // echarts-gl builds its GL scene inside setOption, and that can
+            // throw after the module loaded fine — claygl compiles compositor
+            // sizes with `new Function`, which a CSP without 'unsafe-eval'
+            // blocks (rowsncolumns/spreadsheet#1187). Latch the failure so no
+            // chart retries 3-D, drop the half-built instance and draw the 2-D
+            // fallback instead of leaving the chart blank.
+            try {
+                chartRef.current?.setOption({
+                    tooltip: {
+                        textStyle: { fontSize: 12 },
+                        formatter: threeDTooltipFormatter,
+                    },
+                    legend: threeDRenderKind === "line3D" || stackedBar3D
+                        ? applyLegendOverrides({
+                            ...defaultLegendConfig,
+                            show: seriesNames.length > 1,
+                            data: seriesNames,
+                        }, spec.legend)
+                        : { show: false },
+                    xAxis3D: { ...xAxis3D, name: spec.horizontalAxisTitle ?? "" },
+                    yAxis3D: { ...yAxis3D, name: "" },
+                    zAxis3D: { type: "value", name: spec.verticalAxisTitle ?? "" },
+                    grid3D: {
+                        boxDepth: Math.max(20, Math.min(100, seriesNames.length * 20)),
+                        viewControl: { autoRotate: false },
+                    },
+                    ...(visualMap ? { visualMap: [visualMap] } : {}),
+                    series: threeDSeries,
+                }, {
+                    replaceMerge: [
+                        "series",
+                        "xAxis3D",
+                        "yAxis3D",
+                        "zAxis3D",
+                        "visualMap",
+                        "legend",
+                        "tooltip",
+                    ],
+                });
+            }
+            catch (error) {
+                markEchartsGlFailed(error);
+                try {
+                    chartRef.current?.dispose();
+                }
+                catch {
+                    // A GL instance that threw mid-build may not dispose cleanly.
+                }
+                chartRef.current = undefined;
+                renderedIn3D.current = false;
+                previousChartType.current = undefined;
+                previousSeriesCount.current = undefined;
+                initializeChart();
+                applyThemeOptions();
+                await updateChart();
+                return;
+            }
             // Re-apply theme-derived title / palette / tooltip colors — lost
             // when the instance was re-initialized on entry into 3-D.
             renderedIn3D.current = true;
@@ -1420,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,
@@ -1727,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
@@ -1753,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 ?? "",
@@ -1777,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,
@@ -1790,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 ?? ""
@@ -1964,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) {
@@ -2694,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
@@ -2785,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),
@@ -2822,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
@@ -2893,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);
@@ -2961,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: (() => {
@@ -3005,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
@@ -3019,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) {
@@ -3075,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({
@@ -3100,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,
@@ -3114,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;
             })(),
@@ -3160,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
@@ -3179,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";
 /**