@rowsncolumns/charts 28.1.5 → 28.1.7

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":"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;AA4BF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,QAAQ,MAAM,GAAG,SAAS,EAC1B,kBAAgB,KACf,MAKgB,CAAC;AAEpB;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,GAAG,SAAS,EAC3B,OAAO,OAAO,EACd,SAAS,MAAM,KACd,MAOF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,SAAS,MAAM,GAAG,SAAS,EAC3B,SAAS,MAAM,cAGH,OAAO,wBAMJ,CAAC;AAElB;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,SAAS,MAAM,GAAG,SAAS,EAC3B,SAAS,MAAM,cAGH,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,EAAE,SAAS,MAAM,MAC5C,QAAQ;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,WAGvD,CAAC;AAET;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,GAAG,SAAS,uBAW1D,CAAC;AAEF,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,iDAM9B;IACD,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,MAgBH,CAAC"}

package/dist/esm/utils/axis-number-format.js

@@ -37,26 +37,76 @@ export const resolveValueAxisNumberFormat = ({ axisOptions, series, getFormattin
         return isGeneralNumberFormat(explicit) ? undefined : explicit;
     return resolveSourceNumberFormat(series[0]?.sources, getFormattingFromRange, hiddenDimensionStrategy);
 };
-/** Format one numeric value through the resolved pattern; non-numbers pass through. */
-export const formatAxisValue = (pattern, value) => {
+// A number with no number format, in the spreadsheet locale (#1050). The
+// grid's cells show such a value through `General` — the locale's decimal
+// separator, no grouping — so a data label or tooltip reads the same;
+// echarts' default tick label groups thousands, so ticks keep grouping.
+// `toPrecision(15)` is Excel's significant-digit view of the double, which
+// drops binary noise such as `0.30000000000000004`.
+const plainNumberFormatters = new Map();
+const plainNumberFormatter = (locale, grouping) => {
+    const key = `${locale}\u0000${grouping ? 1 : 0}`;
+    let formatter = plainNumberFormatters.get(key);
+    if (!formatter) {
+        try {
+            formatter = new Intl.NumberFormat(locale, {
+                useGrouping: grouping,
+                maximumFractionDigits: 20,
+            });
+        }
+        catch {
+            formatter = new Intl.NumberFormat("en-US", {
+                useGrouping: grouping,
+                maximumFractionDigits: 20,
+            });
+        }
+        plainNumberFormatters.set(key, formatter);
+    }
+    return formatter;
+};
+export const formatPlainNumber = (value, locale, grouping = false) => Number.isFinite(value)
+    ? plainNumberFormatter(locale ?? "en-US", grouping).format(Number(value.toPrecision(15)))
+    : String(value);
+/**
+ * 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 const formatAxisValue = (pattern, value, locale) => {
     if (value === undefined || value === null)
         return "";
-    if (pattern && typeof value === "number")
-        return ssfFormat(pattern, value);
+    if (typeof value === "number") {
+        if (pattern)
+            return ssfFormat(pattern, value, locale);
+        if (locale)
+            return formatPlainNumber(value, locale);
+    }
     return String(value);
 };
-/** echarts `axisLabel.formatter` / `tooltip.valueFormatter` for a value axis. */
-export const valueAxisLabelFormatter = (pattern) => pattern ? (value) => formatAxisValue(pattern, value) : undefined;
+/**
+ * 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 const valueAxisLabelFormatter = (pattern, locale) => pattern
+    ? (value) => formatAxisValue(pattern, value, locale)
+    : locale
+        ? (value) => typeof value === "number"
+            ? formatPlainNumber(value, locale, true)
+            : formatAxisValue(undefined, value)
+        : 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 const tooltipValueFormatter = (pattern) => pattern
+export const tooltipValueFormatter = (pattern, locale) => pattern
     ? (value) => Array.isArray(value)
-        ? value.map((entry) => formatAxisValue(pattern, entry))
-        : formatAxisValue(pattern, value)
+        ? value.map((entry) => formatAxisValue(pattern, entry, locale))
+        : formatAxisValue(pattern, value, locale)
     : undefined;
 /**
  * Excel's data labels and tooltips are linked to *each series' own* source
@@ -66,7 +116,27 @@ export const tooltipValueFormatter = (pattern) => pattern
  */
 export const resolveSeriesNumberFormats = (series, getFormattingFromRange, hiddenDimensionStrategy) => (series ?? []).map((entry) => resolveSourceNumberFormat(entry?.sources, getFormattingFromRange, hiddenDimensionStrategy));
 /** echarts pie / doughnut tooltip: `name: value (percent%)` with the value formatted. */
-export const circularTooltipFormatter = (pattern) => (params) => `${params.name ?? ""}: ${formatAxisValue(pattern, params.value)} (${params.percent ?? ""}%)`;
+export const circularTooltipFormatter = (pattern, locale) => (params) => `${params.name ?? ""}: ${formatAxisValue(pattern, params.value, locale)} (${params.percent ?? ""}%)`;
+/**
+ * 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 const plotlySeparators = (locale) => {
+    if (!locale)
+        return undefined;
+    let parts;
+    try {
+        parts = new Intl.NumberFormat(locale).formatToParts(1234.5);
+    }
+    catch {
+        return undefined;
+    }
+    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    const group = parts.find((p) => p.type === "group")?.value ?? ",";
+    return `${decimal}${group}`;
+};
 /**
  * Translate the numeric subset of a SpreadsheetML pattern into plotly's
  * d3-format axis settings (`tickformat` + literal prefix / suffix). Plotly
@@ -190,15 +260,15 @@ const measureLabelWidth = (text, fontSize) => {
  * 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 const valueAxisNameGap = ({ values, pattern, fontSize = 12, minimum = 50, }) => {
+export const valueAxisNameGap = ({ values, pattern, locale, fontSize = 12, minimum = 50, }) => {
     const numbers = values.filter((v) => typeof v === "number" && Number.isFinite(v));
     if (!numbers.length)
         return minimum;
     const min = Math.min(...numbers, 0);
     const max = Math.max(...numbers, 0);
     // echarts' default axis label puts thousands separators on plain numbers.
-    const defaultLabel = (v) => v.toLocaleString("en-US");
-    const labels = [min, max].map((v) => pattern ? formatAxisValue(pattern, v) : defaultLabel(v));
+    const defaultLabel = (v) => formatPlainNumber(v, locale, true);
+    const labels = [min, max].map((v) => pattern ? formatAxisValue(pattern, v, locale) : defaultLabel(v));
     const widest = Math.max(...labels.map((l) => measureLabelWidth(l, fontSize)));
     // 8px tick-label margin + the rotated title's own line box + breathing room.
     const AXIS_LABEL_MARGIN = 8;

package/dist/esm/utils/overrides.d.ts

@@ -7,9 +7,9 @@ export declare const applyLegendOverrides: (legend: LegendComponentOption, opts:
  * the linked source-cell format — see `resolveValueAxisNumberFormat`); it
  * becomes the tick-label formatter.
  */
-export declare const applyAxisOverrides: (axis: any, opts: any, numberFormatPattern?: string) => any;
-export declare const dataLabelFormatter: (opts: any) => (params: any) => string;
-export declare const buildSeriesLabelOption: (opts: any) => {
+export declare const applyAxisOverrides: (axis: any, opts: any, numberFormatPattern?: string, locale?: string) => any;
+export declare const dataLabelFormatter: (opts: any, locale?: string) => (params: any) => string;
+export declare const buildSeriesLabelOption: (opts: any, seriesType?: string, locale?: string) => {
     readonly show: true;
     readonly position: any;
     readonly formatter: (params: any) => string;

package/dist/esm/utils/overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,QA4B7B,CAAC;AAqBF,eAAO,MAAM,kBAAkB,GAAI,MAAM,GAAG,MAAM,QAAQ,GAAG,WA4B5D,CAAC;AAWF,eAAO,MAAM,sBAAsB,GAAI,MAAM,GAAG;;;iCAvCU,GAAG;aA+C5D,CAAC"}
+{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAAI,MAAM,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,WAiC7E,CAAC;AAgCF,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCApE0D,GAAG;aAiF7E,CAAC"}

package/dist/esm/utils/overrides.js

@@ -1,5 +1,4 @@
-import { ssfFormat } from "@rowsncolumns/utils";
-import { valueAxisLabelFormatter } from "./axis-number-format";
+import { formatAxisValue, valueAxisLabelFormatter } from "./axis-number-format";
 // Map ChartSpec.legend / dataLabels / axisOptions to ECharts option
 // fragments. Each helper is a no-op when the spec field is missing, so
 // callers can spread the result without checks. Shared by the main
@@ -75,8 +74,8 @@ export const applyLegendOverrides = (legend, opts) => {
  * the linked source-cell format — see `resolveValueAxisNumberFormat`); it
  * becomes the tick-label formatter.
  */
-export const applyAxisOverrides = (axis, opts, numberFormatPattern) => {
-    const formatter = valueAxisLabelFormatter(numberFormatPattern);
+export const applyAxisOverrides = (axis, opts, numberFormatPattern, locale) => {
+    const formatter = valueAxisLabelFormatter(numberFormatPattern, locale);
     if (!opts && !formatter)
         return axis;
     const next = { ...axis };
@@ -117,14 +116,8 @@ export const applyAxisOverrides = (axis, opts, numberFormatPattern) => {
  * over the normalized percentage so labels read "$1,831" not "84.6"
  * — Excel's behaviour.
  */
-const formatLabelValue = (rawValue, originalValue, pattern) => {
-    const target = originalValue ?? rawValue;
-    if (pattern) {
-        return ssfFormat(pattern, target);
-    }
-    return target === undefined || target === null ? "" : String(target);
-};
-export const dataLabelFormatter = (opts) => (params) => {
+const formatLabelValue = (rawValue, originalValue, pattern, locale) => formatAxisValue(pattern, originalValue ?? rawValue, locale);
+export const dataLabelFormatter = (opts, locale) => (params) => {
     const parts = [];
     if (opts.showSeriesName && params.seriesName)
         parts.push(params.seriesName);
@@ -147,7 +140,7 @@ export const dataLabelFormatter = (opts) => (params) => {
         const originalValue = typeof params.data === "object" && params.data
             ? params.data.originalValue
             : undefined;
-        parts.push(formatLabelValue(params.value, originalValue, opts.numberFormatPattern));
+        parts.push(formatLabelValue(params.value, originalValue, opts.numberFormatPattern, locale));
     }
     return parts.join(": ");
 };
@@ -158,14 +151,38 @@ const ECHARTS_DLBL_POS = {
     insideEnd: "insideTop",
     outsideEnd: "top",
     bestFit: "top",
+    above: "top",
+    below: "bottom",
+    left: "left",
+    right: "right",
+};
+// A line / scatter label sits on a point, not in a bar: echarts has no
+// `outside` / `insideTop` for it (an unknown position is drawn at the
+// default) and Excel offers centre / left / right / above / below. The
+// bar-only placements land on Excel's default for a line, above the point.
+const ECHARTS_POINT_DLBL_POS = {
+    center: "inside",
+    inside: "inside",
+    outside: "top",
+    insideEnd: "top",
+    outsideEnd: "top",
+    bestFit: "top",
+    above: "top",
+    below: "bottom",
+    left: "left",
+    right: "right",
 };
-export const buildSeriesLabelOption = (opts) => {
+const POINT_SERIES_TYPES = new Set(["line", "scatter", "effectScatter"]);
+export const buildSeriesLabelOption = (opts, seriesType, locale) => {
     if (!opts?.show)
         return undefined;
-    const position = (opts.position && ECHARTS_DLBL_POS[opts.position]) ?? "top";
+    const positions = seriesType && POINT_SERIES_TYPES.has(seriesType)
+        ? ECHARTS_POINT_DLBL_POS
+        : ECHARTS_DLBL_POS;
+    const position = (opts.position && positions[opts.position]) ?? "top";
     return {
         show: true,
         position,
-        formatter: dataLabelFormatter(opts),
+        formatter: dataLabelFormatter(opts, locale),
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/charts",
-  "version": "28.1.5",
+  "version": "28.1.7",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -70,11 +70,11 @@
     "@rowsncolumns/common-types": ">=5.3.2",
     "@rowsncolumns/grid": ">=13.2.35",
     "@rowsncolumns/icons": ">=7.2.33",
-    "@rowsncolumns/spreadsheet": ">=10.4.5",
+    "@rowsncolumns/spreadsheet": ">=10.4.6",
     "@rowsncolumns/spreadsheet-state": ">=29.1.7",
-    "@rowsncolumns/toolkit": ">=24.5.6",
+    "@rowsncolumns/toolkit": ">=24.5.8",
     "@rowsncolumns/ui": ">=16.0.4",
-    "@rowsncolumns/utils": ">=9.5.4",
+    "@rowsncolumns/utils": ">=9.5.5",
     "@types/react-plotly.js": "^2.6.3",
     "echarts": "^5.6.0",
     "formik": "^2.4.6",