@rowsncolumns/charts 28.1.5 → 28.1.7

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

@@ -3,7 +3,7 @@ import { getStringifiedColor, useFocusSheet, useRegisterChartActions, useSetSele
 import { useSubscribeToMultipleRanges } from "@rowsncolumns/spreadsheet-state";
 import { createDownloadableFile } from "@rowsncolumns/toolkit";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, useIsomorphicLayoutEffect, useOnVisibilityChange, } from "@rowsncolumns/ui";
-import { debug, isAFormula, isNil } from "@rowsncolumns/utils";
+import { chartPaletteColorAt, debug, expandChartPalette, isAFormula, isNil, } from "@rowsncolumns/utils";
 import { BarChart, BoxplotChart, CandlestickChart, CustomChart, FunnelChart, HeatmapChart, LineChart, PieChart, RadarChart as EchartsRadarChart, ScatterChart, SunburstChart, TreemapChart as EchartsTreemapChart, } from "echarts/charts";
 import { DatasetComponent, GridComponent, LegendComponent, RadarComponent, TitleComponent, TooltipComponent, VisualMapComponent, } from "echarts/components";
 import * as echarts from "echarts/core";
@@ -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);
                                     },
                                 },
                             }
@@ -942,7 +947,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 theme.themeColors.accent6,
             ]);
             const seriesColorAt = (index) => spec.series?.[index]?.color ??
-                threeDPalette[index % threeDPalette.length];
+                chartPaletteColorAt(threeDPalette, index);
             // Entering 3-D from a 2-D render: the cartesian option doesn't
             // merge into a grid3D one, so re-initialize the echarts instance
             // from scratch (theme options are re-applied after setOption).
@@ -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({
@@ -1402,15 +1407,15 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         name: s.name,
                         data: s.values,
                         showSymbol: false,
-                        itemStyle: { color: stockColors[i % stockColors.length] },
-                        lineStyle: { color: stockColors[i % stockColors.length] },
+                        itemStyle: { color: chartPaletteColorAt(stockColors, i) },
+                        lineStyle: { color: chartPaletteColorAt(stockColors, i) },
                         ...(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),
                                 },
                             }
                             : {}),
@@ -1688,7 +1693,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             theme.themeColors.accent5,
             theme.themeColors.accent6,
         ]);
-        const paletteColorAt = (index) => seriesPalette[index % seriesPalette.length];
+        const paletteColorAt = (index) => chartPaletteColorAt(seriesPalette, index);
         for (const [specSeriesIndex, series] of (spec.series ?? []).entries()) {
             const dataLabel = !isNil(series.dataLabel) && isAFormula(series.dataLabel)
                 ? coerceCalculatedLabel(await onRequestCalculate(series.dataLabel, position.sheetId ?? sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex))
@@ -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;
                     }
                 }
             }
@@ -1969,7 +1986,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 theme.themeColors.accent5,
                 theme.themeColors.accent6,
             ]);
-            const paletteAt = (index) => ofPiePalette[index % ofPiePalette.length];
+            const paletteAt = (index) => chartPaletteColorAt(ofPiePalette, index);
             chartSeries.push({
                 type: "pie",
                 name: seriesEntry?.dataLabel ?? "",
@@ -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;
             })(),
@@ -2782,14 +2800,17 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         color: textColor,
                     },
                 },
-                color: getChartPalette(chart.spec, [
+                // Unrolled through Excel's luminance variations: echarts cycles this
+                // list over pie slices and over series, and the seventh must not
+                // repeat the first (rowsncolumns/spreadsheet#1045).
+                color: expandChartPalette(getChartPalette(chart.spec, [
                     theme.themeColors.accent1,
                     theme.themeColors.accent2,
                     theme.themeColors.accent3,
                     theme.themeColors.accent4,
                     theme.themeColors.accent5,
                     theme.themeColors.accent6,
-                ]),
+                ])),
                 // Excel's Format Chart Area fill; `transparent` (echarts' own
                 // default) so clearing the fill undoes an earlier setOption.
                 backgroundColor: chart.spec.backgroundColor ?? "transparent",
@@ -2832,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":"AA6BA,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,sBA4zEjB,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

@@ -2,10 +2,10 @@ import { DotsVerticalIcon } from "@rowsncolumns/icons";
 import { getStringifiedColor, useFocusSheet, useRegisterChartActions, useSetSelectedChartSeries, } from "@rowsncolumns/spreadsheet";
 import { useSubscribeToSheet } from "@rowsncolumns/spreadsheet-state";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, useIsomorphicLayoutEffect, useOnVisibilityChange, } from "@rowsncolumns/ui";
-import { debug, isAFormula, isNil, ssfFormat } from "@rowsncolumns/utils";
+import { 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;
@@ -525,7 +559,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     : point.value[0]);
                 const yValues = entry.points.map((point) => point.value[1]);
                 const labelValuesForSeries = entry.points.map((point) => point.name);
-                const seriesColor = spec.series[index]?.color ?? palette[index % palette.length];
+                const seriesColor = spec.series[index]?.color ?? chartPaletteColorAt(palette, index);
                 const perSeriesMarker = spec.series[index]?.marker ?? undefined;
                 if (isScatter) {
                     // Per-series marker.symbol = "none" → pure line (no markers).
@@ -1144,7 +1178,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const effectiveColor = options?.gradientColor ??
                 seriesColor ??
                 (options?.seriesIndex !== undefined
-                    ? themeColorPalette[options.seriesIndex % themeColorPalette.length]
+                    ? chartPaletteColorAt(themeColorPalette, options.seriesIndex)
                     : undefined);
             // Per-data-point color overrides — Gantt charts use `<c:dPt>` to
             // give every task its own color. Build a per-point color array
@@ -1166,7 +1200,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     // with (or the series' own colour when one was authored).
                     const existing = Array.isArray(target.marker?.colors)
                         ? target.marker.colors
-                        : themeColorPalette;
+                        : expandChartPalette(themeColorPalette);
                     const labelCount = Array.isArray(target.labels)
                         ? target.labels.length
                         : 0;
@@ -1584,7 +1618,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 const ofPieType = resolveOfPieType(spec.ofPieType);
                 const secondScale = clampSecondPieSize(spec.secondPieSize) / 100;
                 const halfAngle = otherSliceHalfAngle(otherTotal, total);
-                const paletteAt = (index) => themeColorPalette[index % themeColorPalette.length];
+                const paletteAt = (index) => chartPaletteColorAt(themeColorPalette, index);
                 // Layout in paper coordinates (0-1 across the plot area
                 // inside the margins). Main pie on the left, secondary plot
                 // on the right.
@@ -1714,7 +1748,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     labels: pieData.labels,
                     name: dataLabel,
                     marker: {
-                        colors: themeColorPalette,
+                        // Unrolled through Excel's luminance variations so slice 7 does
+                        // not repeat slice 1 (rowsncolumns/spreadsheet#1045).
+                        colors: expandChartPalette(themeColorPalette),
                     },
                 };
                 // Ties the trace back to spec.series for click selection and
@@ -1831,6 +1867,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             : valueAxisNameGap({
                 values: primaryValues,
                 pattern: primaryAxisNumberFormat,
+                locale,
                 fontSize: axisFontSize,
                 minimum: 0,
             }) -
@@ -1846,6 +1883,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ? trace.y
                     : []),
                 pattern: secondaryAxisNumberFormat,
+                locale,
                 fontSize: axisFontSize,
                 minimum: 0,
             }) -
@@ -2026,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",
                     };
                 }
@@ -2060,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>`,
                     };
                 }
@@ -2102,6 +2140,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         getDomainValuesFromRange,
         getSeriesValuesFromRange,
         getFormattingFromRange,
+        locale,
     ]);
     // Update theme
     useIsomorphicLayoutEffect(() => {
@@ -2139,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.