@rowsncolumns/charts 28.1.6 → 28.1.7

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

@@ -183,7 +183,7 @@ 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, }) => {
+export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, }) => {
     const spec = chart.spec;
     const explicitChartTitle = chart.spec.title ?? undefined;
     const hierarchyTitleRef = useRef(explicitChartTitle);
@@ -454,7 +454,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 ? "rgba(255,255,255,0.08)"
                 : "rgba(0,0,0,0.06)";
             const borderColor = isDarkMode ? "rgba(255,255,255,0.3)" : "#FFFFFF";
-            const regionSeriesLabel = buildSeriesLabelOption(spec.dataLabels);
+            const regionSeriesLabel = buildSeriesLabelOption(spec.dataLabels, undefined, locale);
             const seriesName = seriesEntry?.dataLabel && !isAFormula(seriesEntry.dataLabel)
                 ? seriesEntry.dataLabel
                 : "";
@@ -582,7 +582,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // Spec-level overrides — axis min/max/visibility/textFormat, legend
             // position/visibility, dataLabel toggles. Same helpers as the
             // non-bubble layout below.
-            const bubbleSeriesLabel = buildSeriesLabelOption(spec.dataLabels);
+            const bubbleSeriesLabel = buildSeriesLabelOption(spec.dataLabels, undefined, locale);
             chartRef.current?.setOption({
                 xAxis: [
                     applyAxisOverrides({ ...xAxisConfig }, spec.categoryAxisOptions),
@@ -593,7 +593,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         name: spec.verticalAxisTitle ?? "",
                         nameLocation: "middle",
                         nameGap: 45,
-                    }, spec.valueAxisOptions),
+                    }, spec.valueAxisOptions, undefined, locale),
                 ],
                 legend: applyLegendOverrides({
                     ...legend,
@@ -635,15 +635,20 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 scatterStyle === "smoothMarker" ||
                                 !scatterStyle);
                         const smooth = scatterStyle === "smooth" || scatterStyle === "smoothMarker";
+                        // Labels hang off the point symbols: a marker-less line keeps
+                        // an invisible 0-size symbol per point when they show (#1049).
+                        const labelsWithoutMarkers = !wantsMarkers && Boolean(spec.dataLabels?.show);
                         return wantsLine
                             ? {
                                 type: "line",
                                 name: entry.name,
                                 data: entry.points,
-                                showSymbol: wantsMarkers,
+                                showSymbol: wantsMarkers || labelsWithoutMarkers,
                                 smooth,
                                 symbol: mapMarkerSymbolToEcharts(symbol) ?? "circle",
-                                symbolSize: perMarker?.size ?? 6,
+                                symbolSize: labelsWithoutMarkers
+                                    ? 0
+                                    : perMarker?.size ?? 6,
                                 ...(seriesColor
                                     ? {
                                         itemStyle: { color: seriesColor },
@@ -715,14 +720,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 const value = Array.isArray(params.value)
                     ? params.value[params.value.length - 1]
                     : params.value ?? "";
-                return `${params.name}: ${formatAxisValue(sizeNumberFormat, value)}`;
+                return `${params.name}: ${formatAxisValue(sizeNumberFormat, value, locale)}`;
             };
             // Spec-level overrides — treemap/sunburst default to no legend,
             // but an authored legend (visibility/position) still wins.
             const hierarchyDataLabels = spec.dataLabels;
             const hierarchySeriesLabel = buildSeriesLabelOption(hierarchyDataLabels && !hierarchyDataLabels.numberFormatPattern
                 ? { ...hierarchyDataLabels, numberFormatPattern: sizeNumberFormat }
-                : hierarchyDataLabels);
+                : hierarchyDataLabels, undefined, locale);
             chartRef.current?.setOption({
                 xAxis: [
                     {
@@ -818,7 +823,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const [zMin, zMax] = getValueExtent(contourPoints.filter((point) => typeof point[2] === "number"));
             // Values format like the cells of the series (row) they came from.
             const contourFormats = resolveSeriesNumberFormats(spec.series, getFormattingFromRange, spec.hiddenDimensionStrategy);
-            const contourLabel = buildSeriesLabelOption(spec.dataLabels);
+            const contourLabel = buildSeriesLabelOption(spec.dataLabels, undefined, locale);
             if (!renderedAsContour.current && chartRef.current) {
                 chartRef.current.dispose();
                 chartRef.current = undefined;
@@ -835,7 +840,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         const [x, y, z] = (params?.value ?? []);
                         const value = z === "-" || z === undefined
                             ? ""
-                            : formatAxisValue(contourFormats[y], z);
+                            : formatAxisValue(contourFormats[y], z, locale);
                         return `${seriesNames[y] ?? ""}<br/>${categories[x] ?? ""}: ${value}`;
                     },
                 },
@@ -871,7 +876,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         right: 0,
                         top: "center",
                         inRange: { color: [...SURFACE_COLOR_RAMP] },
-                        formatter: (value) => formatAxisValue(contourFormats[0], value),
+                        formatter: (value) => formatAxisValue(contourFormats[0], value, locale),
                     },
                 ],
                 series: [
@@ -888,7 +893,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                         const [, y, z] = (params?.value ?? []);
                                         return z === "-" || z === undefined
                                             ? ""
-                                            : formatAxisValue(contourFormats[y], z);
+                                            : formatAxisValue(contourFormats[y], z, locale);
                                     },
                                 },
                             }
@@ -980,7 +985,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     : seriesNames[Math.round(value[1] ?? 0)] ?? params?.seriesName ?? "";
                 const valueLabel = spec.stackedType === "PERCENT_STACKED" && stackedBar3D
                     ? `${Math.round((value[2] ?? 0) * 10) / 10}%`
-                    : formatAxisValue(threeDFormats[seriesIndex], value[2]);
+                    : formatAxisValue(threeDFormats[seriesIndex], value[2], locale);
                 return `${seriesLabel ? `${seriesLabel}<br/>` : ""}${categoryLabel}: ${valueLabel}`;
             };
             let threeDSeries;
@@ -1152,11 +1157,11 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ...radarDataLabels,
                     numberFormatPattern: radarFormats[seriesIndex],
                 }
-                : radarDataLabels);
+                : radarDataLabels, undefined, locale);
             const radarTooltipFormatter = (params) => {
                 const values = Array.isArray(params?.value) ? params.value : [];
                 const pattern = radarFormats[params?.dataIndex ?? 0];
-                const lines = indicators.map((indicator, i) => `${indicator.name}: ${formatAxisValue(pattern, values[i])}`);
+                const lines = indicators.map((indicator, i) => `${indicator.name}: ${formatAxisValue(pattern, values[i], locale)}`);
                 return [params?.name ?? "", ...lines].filter(Boolean).join("<br/>");
             };
             chartRef.current?.setOption({
@@ -1230,7 +1235,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const stockDataLabels = spec.dataLabels;
             const stockSeriesLabelFor = (role) => buildSeriesLabelOption(stockDataLabels && !stockDataLabels.numberFormatPattern
                 ? { ...stockDataLabels, numberFormatPattern: stockFormatFor(role) }
-                : stockDataLabels);
+                : stockDataLabels, undefined, locale);
             // V-variants (VHLC / VOHLC) carry a volume series that renders as
             // a column sub-pane under the price plot: two grids stacked
             // vertically (price ~70% of the plot, volume below on its own
@@ -1295,10 +1300,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             value: p.value,
                             itemStyle: { color: p.up ? upColor : downColor },
                         })),
-                        ...(tooltipValueFormatter(stockFormatFor("volume"))
+                        ...(tooltipValueFormatter(stockFormatFor("volume"), locale)
                             ? {
                                 tooltip: {
-                                    valueFormatter: tooltipValueFormatter(stockFormatFor("volume")),
+                                    valueFormatter: tooltipValueFormatter(stockFormatFor("volume"), locale),
                                 },
                             }
                             : {}),
@@ -1326,7 +1331,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             nameLocation: "middle",
                             nameGap: 50,
                             gridIndex: 0,
-                        }, spec.valueAxisOptions),
+                        }, spec.valueAxisOptions, undefined, locale),
                         ...(hasVolume ? [volumeYAxis] : []),
                     ],
                     legend: applyLegendOverrides({ ...legend, show: false }, spec.legend),
@@ -1344,10 +1349,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 borderColor: upColor,
                                 borderColor0: downColor,
                             },
-                            ...(tooltipValueFormatter(stockFormatFor("close"))
+                            ...(tooltipValueFormatter(stockFormatFor("close"), locale)
                                 ? {
                                     tooltip: {
-                                        valueFormatter: tooltipValueFormatter(stockFormatFor("close")),
+                                        valueFormatter: tooltipValueFormatter(stockFormatFor("close"), locale),
                                     },
                                 }
                                 : {}),
@@ -1385,7 +1390,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         nameLocation: "middle",
                         nameGap: 50,
                         gridIndex: 0,
-                    }, spec.valueAxisOptions),
+                    }, spec.valueAxisOptions, undefined, locale),
                     ...(hasVolume ? [volumeYAxis] : []),
                 ],
                 legend: applyLegendOverrides({
@@ -1407,10 +1412,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         ...(stockSeriesLabelFor(s.role)
                             ? { label: stockSeriesLabelFor(s.role) }
                             : {}),
-                        ...(tooltipValueFormatter(stockFormatFor(s.role))
+                        ...(tooltipValueFormatter(stockFormatFor(s.role), locale)
                             ? {
                                 tooltip: {
-                                    valueFormatter: tooltipValueFormatter(stockFormatFor(s.role)),
+                                    valueFormatter: tooltipValueFormatter(stockFormatFor(s.role), locale),
                                 },
                             }
                             : {}),
@@ -1779,26 +1784,38 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 const wantsMarkers = markerSymbol === "none"
                     ? false
                     : Boolean(spec.showMarkers) || !isNil(markerSymbol);
-                seriesEntry.showSymbol = wantsMarkers;
+                // echarts draws a line's data labels on its point symbols, so a
+                // marker-less line with labels (Excel's default "Line" with values
+                // shown) keeps an invisible 0-size symbol per point for the label
+                // to hang off (#1049).
+                const labelsWithoutMarkers = !wantsMarkers && Boolean(spec.dataLabels?.show);
+                seriesEntry.showSymbol = wantsMarkers || labelsWithoutMarkers;
                 if (wantsMarkers) {
                     seriesEntry.symbol =
                         mapMarkerSymbolToEcharts(markerSymbol) ?? "circle";
                     seriesEntry.symbolSize = seriesAny.marker?.size ?? 6;
                 }
-                else if (Array.isArray(data)) {
-                    // A marker-less line draws nothing for a point with a gap on both
-                    // sides (a data row followed by a blank row), so that row vanishes
-                    // from the chart. Excel plots an isolated marker there: keep the
-                    // series symbol-less and mark only those points.
-                    const isolated = isolatedPointIndexes(data, connectsAcrossEmptyCells(spec, lineLike));
-                    if (isolated.length) {
-                        seriesEntry.showSymbol = true;
-                        seriesEntry.symbol = "none";
-                        const marked = [...data];
-                        for (const i of isolated) {
-                            marked[i] = { value: marked[i], symbol: "circle", symbolSize: 6 };
+                else {
+                    if (labelsWithoutMarkers) {
+                        seriesEntry.symbol = "circle";
+                        seriesEntry.symbolSize = 0;
+                    }
+                    if (Array.isArray(data)) {
+                        // A marker-less line draws nothing for a point with a gap on both
+                        // sides (a data row followed by a blank row), so that row vanishes
+                        // from the chart. Excel plots an isolated marker there: keep the
+                        // series symbol-less and mark only those points.
+                        const isolated = isolatedPointIndexes(data, connectsAcrossEmptyCells(spec, lineLike));
+                        if (isolated.length) {
+                            seriesEntry.showSymbol = true;
+                            if (!labelsWithoutMarkers)
+                                seriesEntry.symbol = "none";
+                            const marked = [...data];
+                            for (const i of isolated) {
+                                marked[i] = { value: marked[i], symbol: "circle", symbolSize: 6 };
+                            }
+                            seriesEntry.data = marked;
                         }
-                        seriesEntry.data = marked;
                     }
                 }
             }
@@ -2389,7 +2406,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             trigger: isCircularChart ? "item" : "axis",
             formatter: isCircularChart
                 ? primaryAxisNumberFormat
-                    ? circularTooltipFormatter(primaryAxisNumberFormat)
+                    ? circularTooltipFormatter(primaryAxisNumberFormat, locale)
                     : "{b}: {c} ({d}%)"
                 : undefined,
         };
@@ -2446,7 +2463,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 ...dataLabelOptions,
                 numberFormatPattern: seriesNumberFormatFor(s),
             }
-            : dataLabelOptions);
+            : dataLabelOptions, 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
         // 0-1 fraction (doughnutHoleSize). Default to 0.5 when unset.
@@ -2505,7 +2522,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // Tooltip values of the value-axis series (a boxplot / candlestick
             // tooltip lists its own statistics and keeps echarts' default).
             const seriesTooltipValueFormatter = VALUE_TOOLTIP_SERIES_TYPES.has(s?.type)
-                ? valueAxisLabelFormatter(seriesNumberFormatFor(s))
+                ? valueAxisLabelFormatter(seriesNumberFormatFor(s), locale)
                 : undefined;
             if (seriesTooltipValueFormatter && s?.tooltip?.show !== false) {
                 next.tooltip = {
@@ -2518,7 +2535,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 if (pieNumberFormat && s?.tooltip?.show !== false) {
                     next.tooltip = {
                         ...(s?.tooltip ?? {}),
-                        formatter: circularTooltipFormatter(pieNumberFormat),
+                        formatter: circularTooltipFormatter(pieNumberFormat, locale),
                     };
                 }
                 if (explosionOffset > 0 && Array.isArray(next.data)) {
@@ -2584,7 +2601,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         applyAxisOverrides({
                             ...valueAxisBase,
                             name: spec.horizontalAxisTitle ?? "",
-                        }, spec.valueAxisOptions, primaryAxisNumberFormat),
+                        }, spec.valueAxisOptions, primaryAxisNumberFormat, locale),
                     ];
                 }
                 const base = chartDomains.length > 0
@@ -2671,8 +2688,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 ? s.data.map((d) => d !== null && typeof d === "object" ? d.value : d)
                                 : []),
                             pattern: primaryAxisNumberFormat,
+                            locale,
                         }),
-                    }, spec.valueAxisOptions, primaryAxisNumberFormat),
+                    }, spec.valueAxisOptions, primaryAxisNumberFormat, locale),
                 ];
                 if (hasSecondaryAxis) {
                     axes.push(applyAxisOverrides({
@@ -2687,7 +2705,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                                 axisLabel: { formatter: "{value}%" },
                             }
                             : {}),
-                    }, spec.secondaryValueAxisOptions, secondaryAxisNumberFormat));
+                    }, spec.secondaryValueAxisOptions, secondaryAxisNumberFormat, locale));
                 }
                 return axes;
             })(),
@@ -2835,6 +2853,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         getDomainValuesFromRange,
         getSeriesValuesFromRange,
         getFormattingFromRange,
+        locale,
         glUpgradeTick,
     ]);
     // Resize chart

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;AAuBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,OAAO,EAEL,KAAK,oBAAoB,EAG1B,MAAM,+BAA+B,CAAC;AA4CvC,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;CAC1C,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,sEAMzB,gBAAgB,sBAo6DlB,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;AAuBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,OAAO,EAEL,KAAK,oBAAoB,EAG1B,MAAM,+BAA+B,CAAC;AA4CvC,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;CAC1C,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,sEAMzB,gBAAgB,sBAw6DlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -622,7 +622,11 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                                     React.createElement("option", { value: "outside" }, "Outside"),
                                     React.createElement("option", { value: "insideEnd" }, "Inside end"),
                                     React.createElement("option", { value: "outsideEnd" }, "Outside end"),
-                                    React.createElement("option", { value: "bestFit" }, "Best fit")),
+                                    React.createElement("option", { value: "bestFit" }, "Best fit"),
+                                    React.createElement("option", { value: "above" }, "Above"),
+                                    React.createElement("option", { value: "below" }, "Below"),
+                                    React.createElement("option", { value: "left" }, "Left"),
+                                    React.createElement("option", { value: "right" }, "Right")),
                                 React.createElement("label", { className: "font-system text-xs" }, "Number format pattern"),
                                 React.createElement(Input, { value: values?.spec.dataLabels?.numberFormatPattern ?? "", type: "text", onChange: (e) => setFieldValue("spec.dataLabels.numberFormatPattern", e.target.value || undefined), className: "text-xs w-32", placeholder: "#,##0.00" }))) : null)),
                     basicSpec && showChartOptions ? (React.createElement(Section, { title: "Chart options" },

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

@@ -1,5 +1,5 @@
 import React from "react";
 import type { EChartComponentProps } from "../../types";
 export type BasicChartProps = EChartComponentProps;
-export declare const BasicChart: ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, }: BasicChartProps) => React.JSX.Element;
+export declare const BasicChart: ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, }: BasicChartProps) => React.JSX.Element;
 //# sourceMappingURL=basic-chart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAgXxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBA8zEjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAuZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA00EjB,CAAC"}

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

@@ -5,7 +5,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal
 import { chartPaletteColorAt, debug, expandChartPalette, isAFormula, isNil, ssfFormat, } from "@rowsncolumns/utils";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../../utils/aggregation";
-import { formatAxisValue, numberFormatToPlotlyTicks, resolveSeriesNumberFormats, resolveValueAxisNumberFormat, valueAxisNameGap, } from "../../utils/axis-number-format";
+import { formatAxisValue, numberFormatToPlotlyTicks, plotlySeparators, resolveSeriesNumberFormats, resolveValueAxisNumberFormat, valueAxisNameGap, } 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";
@@ -179,14 +179,44 @@ const PLOTLY_DLBL_POS_BAR = {
     insideEnd: "inside",
     outsideEnd: "outside",
     bestFit: "outside",
+    above: "outside",
+    below: "outside",
+    left: "outside",
+    right: "outside",
 };
-const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat) => {
+// A scatter trace (line / area / scatter) places its text with the compass
+// positions, and only draws it when `mode` carries `text`. Excel's line
+// placements are centre / left / right / above / below; the bar-only ones
+// land on Excel's default for a line, above the point (#1049).
+const PLOTLY_DLBL_POS_POINT = {
+    center: "middle center",
+    inside: "middle center",
+    outside: "top center",
+    insideEnd: "top center",
+    outsideEnd: "top center",
+    bestFit: "top center",
+    above: "top center",
+    below: "bottom center",
+    left: "middle left",
+    right: "middle right",
+};
+const withTextMode = (mode) => {
+    const base = typeof mode === "string" && mode ? mode : "lines+markers";
+    return base.split("+").includes("text") ? base : `${base}+text`;
+};
+const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat, locale) => {
     if (!opts?.show)
         return trace;
     const next = { ...trace };
     const isCircular = chartType === "pie" || chartType === "doughnut";
-    const posMap = isCircular ? PLOTLY_DLBL_POS_PIE : PLOTLY_DLBL_POS_BAR;
-    const position = opts.position ? posMap[opts.position] ?? "inside" : "inside";
+    const isPoint = !isCircular && next.type === "scatter";
+    const posMap = isCircular
+        ? PLOTLY_DLBL_POS_PIE
+        : isPoint
+            ? PLOTLY_DLBL_POS_POINT
+            : PLOTLY_DLBL_POS_BAR;
+    const fallback = isPoint ? "top center" : "inside";
+    const position = opts.position ? posMap[opts.position] ?? fallback : fallback;
     if (isCircular) {
         // Plotly's pie trace uses `textinfo` to control which fields render.
         const parts = [];
@@ -204,7 +234,7 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
         const pattern = opts.numberFormatPattern ?? sourceNumberFormat;
         if (pattern) {
             const values = Array.isArray(next.values) ? next.values : [];
-            next.text = values.map((v) => formatAxisValue(pattern, v));
+            next.text = values.map((v) => formatAxisValue(pattern, v, locale));
             next.texttemplate = next.textinfo
                 .split("+")
                 .map((part) => (part === "value" ? "%{text}" : `%{${part}}`))
@@ -223,9 +253,13 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
         const values = next.orientation === "h" ? next.x : next.y;
         const vals = Array.isArray(values) ? values : [];
         next.text = pattern
-            ? vals.map((v) => (v === null || v === undefined ? "" : ssfFormat(pattern, v)))
-            : values;
+            ? vals.map((v) => v === null || v === undefined ? "" : ssfFormat(pattern, v, locale))
+            : locale
+                ? vals.map((v) => formatAxisValue(undefined, v, locale))
+                : values;
         next.textposition = position;
+        if (isPoint)
+            next.mode = withTextMode(next.mode);
     }
     return next;
 };
@@ -345,7 +379,7 @@ const addAlphaToColor = (color, alpha) => {
     }
     return color;
 };
-export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, }) => {
+export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, }) => {
     const spec = chart.spec;
     const hierarchyTitleRef = useRef(undefined);
     const explicitChartTitle = chart.spec.title ?? undefined;
@@ -1833,6 +1867,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             : valueAxisNameGap({
                 values: primaryValues,
                 pattern: primaryAxisNumberFormat,
+                locale,
                 fontSize: axisFontSize,
                 minimum: 0,
             }) -
@@ -1848,6 +1883,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ? trace.y
                     : []),
                 pattern: secondaryAxisNumberFormat,
+                locale,
                 fontSize: axisFontSize,
                 minimum: 0,
             }) -
@@ -2028,14 +2064,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         const piePull = isOfPie ? undefined : explosionToPlotlyPull(resolveExplosion(spec));
         const formattedTraces = traces.map((trace) => {
             const pattern = traceNumberFormat(trace);
-            let next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType, pattern);
+            let next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType, pattern, locale);
             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)),
+                        text: values.map((v) => formatAxisValue(pattern, v, locale)),
                         hoverinfo: "label+text+percent+name",
                     };
                 }
@@ -2062,7 +2098,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 if (seriesPattern && Array.isArray(values)) {
                     next = {
                         ...next,
-                        customdata: values.map((v) => formatAxisValue(seriesPattern, v)),
+                        customdata: values.map((v) => formatAxisValue(seriesPattern, v, locale)),
                         hovertemplate: `${horizontal ? "%{y}" : "%{x}"}<br>%{customdata}<extra>%{fullData.name}</extra>`,
                     };
                 }
@@ -2104,6 +2140,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         getDomainValuesFromRange,
         getSeriesValuesFromRange,
         getFormattingFromRange,
+        locale,
     ]);
     // Update theme
     useIsomorphicLayoutEffect(() => {
@@ -2141,7 +2178,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         scrollZoom: false,
         doubleClick: false,
     };
-    const plotLayout = useMemo(() => ({ ...layout, dragmode: false }), [layout]);
+    // Ticks and hover values plotly formats itself use the sheet's separators.
+    const separators = useMemo(() => plotlySeparators(locale), [locale]);
+    const plotLayout = useMemo(() => ({
+        ...layout,
+        dragmode: false,
+        ...(separators ? { separators } : {}),
+    }), [layout, separators]);
     // 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.

package/dist/esm/utils/axis-number-format.d.ts

@@ -26,17 +26,28 @@ export declare const resolveValueAxisNumberFormat: ({ axisOptions, series, getFo
     getFormattingFromRange: RangeFormatReader | undefined;
     hiddenDimensionStrategy?: HIDDEN_DIMENSION_STRATEGY | null;
 }) => string | undefined;
-/** Format one numeric value through the resolved pattern; non-numbers pass through. */
-export declare const formatAxisValue: (pattern: string | undefined, value: unknown) => string;
-/** echarts `axisLabel.formatter` / `tooltip.valueFormatter` for a value axis. */
-export declare const valueAxisLabelFormatter: (pattern: string | undefined) => ((value: unknown) => string) | undefined;
+export declare const formatPlainNumber: (value: number, locale: string | undefined, grouping?: boolean) => string;
+/**
+ * Format one numeric value through the resolved pattern; non-numbers pass
+ * through. `locale` is the spreadsheet locale the cells format with: it
+ * picks the pattern's separators, and a number without a pattern reads
+ * like a `General` cell in that locale.
+ */
+export declare const formatAxisValue: (pattern: string | undefined, value: unknown, locale?: string) => string;
+/**
+ * echarts `axisLabel.formatter` / `tooltip.valueFormatter` for a value
+ * axis. Without a pattern the ticks keep echarts' own labels unless a
+ * locale is given, in which case they group thousands the way echarts
+ * does but with the locale's separators (#1050).
+ */
+export declare const valueAxisLabelFormatter: (pattern: string | undefined, locale?: string) => ((value: unknown) => string) | undefined;
 /**
  * echarts `tooltip.valueFormatter` for a series whose data items are
  * tuples (candlestick, 3-D points): every number formats through the
  * pattern; `undefined` when there is no pattern so echarts keeps its
  * default.
  */
-export declare const tooltipValueFormatter: (pattern: string | undefined) => ((value: unknown) => string | string[]) | undefined;
+export declare const tooltipValueFormatter: (pattern: string | undefined, locale?: string) => ((value: unknown) => string | string[]) | undefined;
 /**
  * Excel's data labels and tooltips are linked to *each series' own* source
  * cells, not to the axis: a revenue series formatted `$#,##0` next to a
@@ -45,11 +56,18 @@ export declare const tooltipValueFormatter: (pattern: string | undefined) => ((v
  */
 export declare const resolveSeriesNumberFormats: (series: Pick<ChartData, "sources">[] | undefined, getFormattingFromRange: RangeFormatReader | undefined, hiddenDimensionStrategy?: HIDDEN_DIMENSION_STRATEGY | null) => (string | undefined)[];
 /** echarts pie / doughnut tooltip: `name: value (percent%)` with the value formatted. */
-export declare const circularTooltipFormatter: (pattern: string | undefined) => (params: {
+export declare const circularTooltipFormatter: (pattern: string | undefined, locale?: string) => (params: {
     name?: string;
     value?: unknown;
     percent?: number;
 }) => string;
+/**
+ * plotly `layout.separators` for the spreadsheet locale: the decimal
+ * separator followed by the thousands separator, so ticks and hover
+ * values plotly formats itself read like the sheet's cells (#1050).
+ * `undefined` without a locale keeps plotly's default (`.,`).
+ */
+export declare const plotlySeparators: (locale: string | undefined) => string | undefined;
 export type PlotlyTickFormat = {
     tickformat?: string;
     tickprefix?: string;
@@ -73,9 +91,10 @@ export declare const numberFormatToPlotlyTicks: (pattern: string | undefined) =>
  * measured; the fixed default of 50px only fits labels up to ~4 digits and
  * lets a currency axis title paint over its own tick labels.
  */
-export declare const valueAxisNameGap: ({ values, pattern, fontSize, minimum, }: {
+export declare const valueAxisNameGap: ({ values, pattern, locale, fontSize, minimum, }: {
     values: readonly unknown[];
     pattern: string | undefined;
+    locale?: string;
     fontSize?: number;
     minimum?: number;
 }) => number;

package/dist/esm/utils/axis-number-format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis-number-format.d.ts","sourceRoot":"","sources":["../../../utils/axis-number-format.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,yBAAyB,EACzB,KAAK,EACL,UAAU,EACX,MAAM,2BAA2B,CAAC;AAWnC,KAAK,iBAAiB,GAAG,CACvB,UAAU,EAAE,UAAU,EACtB,uBAAuB,CAAC,EAAE,yBAAyB,KAChD,OAAO,EAAE,CAAC;AAMf;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,SAAS,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,YAGjC,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GACpC,SAAS,UAAU,EAAE,GAAG,SAAS,EACjC,wBAAwB,iBAAiB,GAAG,SAAS,EACrD,0BAA0B,yBAAyB,GAAG,IAAI,KACzD,MAAM,GAAG,SAWX,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,GAAI,2EAK1C;IACD,WAAW,EAAE,KAAK,CAAC;QAAE,mBAAmB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACxE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;IACrC,sBAAsB,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACtD,uBAAuB,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;CAC5D,KAAG,MAAM,GAAG,SAQZ,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,GAAG,SAAS,EAC3B,OAAO,OAAO,KACb,MAIF,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,GAAI,SAAS,MAAM,GAAG,SAAS,cAC/C,OAAO,wBAAgD,CAAC;AAE5E;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,SAAS,MAAM,GAAG,SAAS,cAEnD,OAAO,mCAIN,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,GACrC,QAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS,EAChD,wBAAwB,iBAAiB,GAAG,SAAS,EACrD,0BAA0B,yBAAyB,GAAG,IAAI,KACzD,CAAC,MAAM,GAAG,SAAS,CAAC,EAOpB,CAAC;AAEJ,yFAAyF;AACzF,eAAO,MAAM,wBAAwB,GAClC,SAAS,MAAM,GAAG,SAAS,MAC3B,QAAQ;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,WAGvD,CAAC;AAET,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,GACpC,SAAS,MAAM,GAAG,SAAS,KAC1B,gBAAgB,GAAG,SA4DrB,CAAC;AA2BF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,yCAK9B;IACD,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,MAgBH,CAAC"}
+{"version":3,"file":"axis-number-format.d.ts","sourceRoot":"","sources":["../../../utils/axis-number-format.ts"],"names":[],"mappings":"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"}