@rowsncolumns/charts 28.1.6 → 28.1.8

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

@@ -27,7 +27,8 @@ import { buildHierarchyTree, extractHierarchyRows, getHierarchyHeaderTitle, } fr
 import { 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, } from "../utils/overrides";
+import { clampDoughnutHole, doughnutRings } from "../utils/doughnut";
+import { applyAxisOverrides, applyLegendOverrides, buildSeriesLabelOption, resolveSeriesDataLabels, } from "../utils/overrides";
 import { buildRadarIndicators, buildRadarSeriesData } from "../utils/radar";
 import { buildRegionMapData, buildSequentialColorRamp, isRegionMapSpec, resolveGeoScope, warnOnceForUnmatchedRegions, } from "../utils/region-map";
 import { loadRegionMapGeo } from "../utils/region-map-loader";
@@ -183,7 +184,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 +455,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
                 : "";
@@ -581,8 +582,9 @@ 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);
+            // non-bubble layout below. A series' own `dataLabels` replace the
+            // chart-level ones for it (#1059).
+            const bubbleSeriesLabelFor = (index) => buildSeriesLabelOption(resolveSeriesDataLabels(spec.dataLabels, spec.series?.[index]), undefined, locale);
             chartRef.current?.setOption({
                 xAxis: [
                     applyAxisOverrides({ ...xAxisConfig }, spec.categoryAxisOptions),
@@ -593,7 +595,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 +637,22 @@ 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(resolveSeriesDataLabels(spec.dataLabels, seriesEntry)
+                                ?.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 },
@@ -673,9 +682,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         },
                         ...(seriesColor ? { itemStyle: { color: seriesColor } } : {}),
                     };
-                }).map((s) => bubbleSeriesLabel
-                    ? { ...s, label: { ...(s.label ?? {}), ...bubbleSeriesLabel } }
-                    : s),
+                }).map((s, index) => {
+                    const bubbleSeriesLabel = bubbleSeriesLabelFor(index);
+                    return bubbleSeriesLabel
+                        ? { ...s, label: { ...(s.label ?? {}), ...bubbleSeriesLabel } }
+                        : s;
+                }),
             }, {
                 replaceMerge: [
                     "series",
@@ -715,14 +727,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 +830,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 +847,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 +883,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 +900,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 +992,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;
@@ -1137,7 +1149,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 const values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));
                 radarSeriesInputs.push({ name: label, values });
             }
-            const indicators = buildRadarIndicators(categories, radarSeriesInputs);
+            // One value scale for every axis (Excel), from the spec's value-axis
+            // min / max when set (#1066).
+            const radarAxisOptions = spec.valueAxisOptions;
+            const indicators = buildRadarIndicators(categories, radarSeriesInputs, radarAxisOptions);
             const radarData = buildRadarSeriesData(radarSeriesInputs, indicators.length);
             const radarStyle = spec.radarStyle ?? "standard";
             const radarColors = radarSeriesInputs.map((_, i) => spec.series?.[i]?.color);
@@ -1152,18 +1167,25 @@ 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({
                 radar: {
                     indicator: indicators.length
                         ? indicators
-                        : [{ name: "", max: 1 }],
+                        : [{ name: "", min: 0, max: 1 }],
+                    // The common scale's tick labels along one axis, as Excel draws
+                    // them (echarts labels the first indicator axis only); hidden
+                    // with the spec's value axis.
+                    axisLabel: {
+                        show: radarAxisOptions?.visible !== false,
+                        formatter: (value) => formatAxisValue(radarFormats[0], value, locale),
+                    },
                 },
                 legend: applyLegendOverrides({
                     ...legend,
@@ -1230,7 +1252,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 +1317,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 +1348,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 +1366,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 +1407,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 +1429,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 +1801,39 @@ 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(resolveSeriesDataLabels(spec.dataLabels, seriesAny)?.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 +2424,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,
         };
@@ -2439,19 +2474,37 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 }
                 : legendBand.grid;
         // Data labels fall back to the series' axis format when the spec has
-        // no explicit `<c:dLbls><c:numFmt>` — Excel's "Linked to source".
-        const dataLabelOptions = spec.dataLabels;
-        const seriesLabelOptionFor = (s) => buildSeriesLabelOption(dataLabelOptions && !dataLabelOptions.numberFormatPattern
-            ? {
-                ...dataLabelOptions,
-                numberFormatPattern: seriesNumberFormatFor(s),
-            }
-            : dataLabelOptions);
+        // no explicit `<c:dLbls><c:numFmt>` — Excel's "Linked to source". A
+        // series' own `dataLabels` replace the chart-level ones for it (#1059).
+        const chartDataLabels = spec.dataLabels;
+        const seriesLabelOptionFor = (s) => {
+            const specIndex = chartSeriesSpecIndex(s?.id);
+            const dataLabelOptions = resolveSeriesDataLabels(chartDataLabels, specIndex === undefined ? undefined : spec.series?.[specIndex]);
+            return buildSeriesLabelOption(dataLabelOptions && !dataLabelOptions.numberFormatPattern
+                ? {
+                    ...dataLabelOptions,
+                    numberFormatPattern: seriesNumberFormatFor(s),
+                }
+                : 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.
         const isDoughnut = spec.chartType === "doughnut";
         const doughnutHoleSize = spec.doughnutHoleSize;
+        // Excel nests a doughnut's series as concentric rings, series 0
+        // innermost (#1065): the ring each pie series draws is its rank among
+        // the spec-tagged pie series.
+        const doughnutSeriesOrder = isDoughnut
+            ? chartSeries
+                .filter((s) => s?.type === "pie")
+                .map((s) => chartSeriesSpecIndex(s?.id))
+                .filter((i) => i !== undefined)
+                .sort((a, b) => a - b)
+            : [];
+        const doughnutRingSet = isDoughnut
+            ? doughnutRings(clampDoughnutHole(doughnutHoleSize), doughnutSeriesOrder.length)
+            : [];
         // Exploded pie / doughnut: every slice sits in the `select` state,
         // offset outward by the spec's percentage of the pie radius.
         const explosion = isCircularChart && !isOfPie ? resolveExplosion(spec) : 0;
@@ -2502,10 +2555,16 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             if (seriesLabelOption) {
                 next.label = { ...(s?.label ?? {}), ...seriesLabelOption };
             }
+            else if (s?.type === "pie") {
+                // echarts labels every pie slice by default (category name on a
+                // leader line); Excel draws nothing until data labels are on (#1062).
+                next.label = { ...(s?.label ?? {}), show: false };
+                next.labelLine = { ...(s?.labelLine ?? {}), show: false };
+            }
             // 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 +2577,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)) {
@@ -2530,10 +2589,15 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 }
             }
             if (isDoughnut && next.type === "pie") {
-                const inner = typeof doughnutHoleSize === "number"
-                    ? Math.round(Math.max(0, Math.min(0.9, doughnutHoleSize)) * 100)
-                    : 50;
-                next.radius = [`${inner}%`, "75%"];
+                // The hole is a fraction of the OUTER radius (Excel's `<c:holeSize>`),
+                // and the doughnut's outer edge sits at 75% of the chart — so every
+                // ring edge is its fraction of 75%, not of the whole chart (#1064:
+                // Excel's default 0.75 used to meet the outer edge, an empty ring).
+                const rank = doughnutSeriesOrder.indexOf(chartSeriesSpecIndex(s?.id));
+                const ring = doughnutRingSet[rank] ??
+                    doughnutRings(clampDoughnutHole(doughnutHoleSize), 1)[0];
+                const pct = (fraction) => `${Math.round(fraction * 75 * 100) / 100}%`;
+                next.radius = [pct(ring.inner), pct(ring.outer)];
             }
             return next;
         });
@@ -2584,7 +2648,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 +2735,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 +2752,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 +2900,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;AAyZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAq3EjB,CAAC"}