mviz 1.5.4 → 1.6.1

package/dist/charts/area.js

@@ -4,7 +4,7 @@
 import { FONT_SIZE_XXS, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
-import { inferFormat, getAxisFormatterJs, inferAxisType } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, inferAxisType, resolveCurrency } from '../core/formatting.js';
 /**
  * Build ECharts options for an area chart
  */
@@ -23,7 +23,8 @@ export function buildAreaOptions(spec) {
     const firstYKey = yKeys[0] ?? 'value';
     const sampleValue = data.length > 0 && data[0] ? data[0][firstYKey] ?? 0 : 0;
     const valueFormat = spec.format ?? inferFormat(firstYKey, sampleValue);
-    const axisFormatter = getAxisFormatterJs(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
     // Detect x-axis type: time, value, or category
     const xAxisType = spec.xAxisType ?? inferAxisType(categories);
     // Get axis label config based on axis type

package/dist/charts/bar.js

@@ -4,7 +4,7 @@
 import { BAR_MAX_WIDTH, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, FONT_SIZE_TINY, FONT_SIZE_XXS, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
-import { inferFormat, getLabelFormatterJs, getAxisFormatterJs, inferAxisType } from '../core/formatting.js';
+import { inferFormat, getLabelFormatterJs, getAxisFormatterJs, inferAxisType, resolveCurrency } from '../core/formatting.js';
 /**
  * Build ECharts options for a bar chart
  */
@@ -23,8 +23,9 @@ export function buildBarOptions(spec) {
     const firstYKey = yKeys[0] ?? 'value';
     const sampleValue = data.length > 0 && data[0] ? data[0][firstYKey] ?? 0 : 0;
     const valueFormat = spec.format ?? inferFormat(firstYKey, sampleValue);
-    const labelFormatter = getLabelFormatterJs(valueFormat);
-    const axisFormatter = getAxisFormatterJs(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const labelFormatter = getLabelFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
     // Detect category axis type (this is x-axis for vertical, y-axis for horizontal)
     const categoryAxisType = spec.xAxisType ?? inferAxisType(categories);
     // For horizontal bars, x-axis is always 'value'; for vertical it's the category axis type

package/dist/charts/bubble.d.ts

@@ -3,11 +3,11 @@
  */
 import type { ChartSpec } from '../types.js';
 /**
- * Build ECharts options for a bubble chart
+ * Build ECharts options for a bubble chart.
  */
 export declare function buildBubbleOptions(spec: ChartSpec): Record<string, unknown>;
 /**
- * Generate a bubble chart with JS function for symbol size
+ * Generate a bubble chart.
  */
 declare function generateBubble(spec: ChartSpec): string;
 export { generateBubble };

package/dist/charts/bubble.js

@@ -1,158 +1,200 @@
 /**
  * Bubble chart generator
  */
-import { COLORS, FONT_SIZE_TINY, ECHARTS_CDN, FONT_STACK, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
-import { serializeOption } from '../core/serializer.js';
+import { FONT_SIZE_TINY, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
+import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency } from '../core/formatting.js';
+import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
+/** Min/max bubble pixel sizes */
+const BUBBLE_SIZE_MIN = 10;
+const BUBBLE_SIZE_MAX = 50;
+/** Bubble opacity */
+const BUBBLE_OPACITY = 0.55;
+/** Label sits at index 4 in bubble point arrays: [x, y, rawSize, scaledSize, label?] */
+const BUBBLE_LABEL_INDEX = 4;
 /**
- * Build ECharts options for a bubble chart
+ * Scale a raw size value to a pixel diameter.
+ */
+function scaleBubbleSize(raw, minSize, sizeRange) {
+    return BUBBLE_SIZE_MIN + ((raw - minSize) / sizeRange) * (BUBBLE_SIZE_MAX - BUBBLE_SIZE_MIN);
+}
+/**
+ * Compute global min/max/range for size field across all data.
+ */
+function computeSizeRange(data, sizeField) {
+    const sizes = data.map((d) => (typeof d[sizeField] === 'number' ? d[sizeField] : 1));
+    const min = sizes.length > 0 ? Math.min(...sizes) : 1;
+    const max = sizes.length > 0 ? Math.max(...sizes) : 1;
+    return { min, range: max - min || 1 };
+}
+/**
+ * Detect whether a field contains category (string) data and extract unique values.
+ */
+function detectAxisCategories(data, field) {
+    const first = data.length > 0 ? data[0][field] : null;
+    const isCategory = typeof first === 'string';
+    const categories = isCategory
+        ? [...new Set(data.map((d) => String(d[field] ?? '')))]
+        : [];
+    return { isCategory, categories };
+}
+/**
+ * Build a single bubble data point array: [x, y, rawSize, scaledSize, label?]
+ */
+function buildBubblePoint(d, ctx) {
+    const s = typeof d[ctx.sizeField] === 'number' ? d[ctx.sizeField] : 1;
+    const scaledSize = scaleBubbleSize(s, ctx.minSize, ctx.sizeRange);
+    const xVal = ctx.xIsCategory ? ctx.xCategories.indexOf(String(d[ctx.xField] ?? '')) : (d[ctx.xField] ?? 0);
+    const yVal = ctx.yIsCategory ? ctx.yCategories.indexOf(String(d[ctx.yField] ?? '')) : (d[ctx.yField] ?? 0);
+    const point = [xVal, yVal, s, scaledSize];
+    if (ctx.labelField)
+        point.push(String(d[ctx.labelField] ?? ''));
+    return point;
+}
+/**
+ * Build series list and legend data for bubble chart.
+ */
+function buildBubbleSeries(data, ctx, seriesField, showLabels, palette, colors) {
+    const labelConfig = showLabels && ctx.labelField
+        ? buildPointLabelConfig(BUBBLE_LABEL_INDEX, colors)
+        : undefined;
+    const pointBuilder = (d) => buildBubblePoint(d, ctx);
+    if (seriesField) {
+        const groups = groupDataBySeries(data, seriesField, pointBuilder);
+        const legendData = [...groups.keys()];
+        const seriesList = legendData.map((name, idx) => {
+            const obj = {
+                type: 'scatter',
+                name,
+                data: groups.get(name),
+                symbolSize: { _js_: 'function(val) { return val[3] || 20; }' },
+                itemStyle: { color: palette[idx % palette.length], opacity: BUBBLE_OPACITY },
+            };
+            if (labelConfig)
+                obj.label = labelConfig;
+            return obj;
+        });
+        return { seriesList, legendData };
+    }
+    const bubbleData = data.map(pointBuilder);
+    const obj = {
+        type: 'scatter',
+        data: bubbleData,
+        symbolSize: { _js_: 'function(val) { return val[3] || 20; }' },
+        itemStyle: { color: palette[0], opacity: BUBBLE_OPACITY },
+    };
+    if (labelConfig)
+        obj.label = labelConfig;
+    return { seriesList: [obj], legendData: [] };
+}
+/**
+ * Build tooltip config for bubble chart.
+ */
+function buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors) {
+    const labelIdx = ctx.labelField ? BUBBLE_LABEL_INDEX : -1;
+    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale);
+    const seriesNameLine = seriesField
+        ? "if (params.seriesName) result += '<strong>' + params.seriesName + '</strong><br/>';"
+        : '';
+    const formatterJs = `function(params) {
+    var d = params.value || params.data;
+    var result = '';
+    ${seriesNameLine}
+    ${labelIdx >= 0 ? "var label = d[" + labelIdx + "]; if (label) result += '<strong>' + label + '</strong><br/>';" : ''}
+    var value = d[0]; result += ${JSON.stringify(ctx.xField)} + ': ' + ${xFormatExpr} + '<br/>';
+    var value = d[1]; result += ${JSON.stringify(ctx.yField)} + ': ' + ${yFormatExpr} + '<br/>';
+    result += ${JSON.stringify(ctx.sizeField)} + ': ' + d[2];
+    return result;
+  }`;
+    return {
+        trigger: 'item',
+        backgroundColor: colors.paper,
+        borderColor: colors.border,
+        textStyle: { color: colors.text },
+        formatter: { _js_: formatterJs },
+    };
+}
+/**
+ * Build a single axis config for bubble chart.
+ */
+function buildBubbleAxis(field, isCategory, categories, formatter, nameGap, colors) {
+    return {
+        type: isCategory ? 'category' : 'value',
+        data: isCategory ? categories : undefined,
+        name: field,
+        nameLocation: 'middle',
+        nameGap,
+        nameTextStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
+        scale: !isCategory,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+            color: colors.textSecondary,
+            ...(formatter && { formatter }),
+        },
+        splitLine: { lineStyle: { color: colors.border, type: [2, 3], opacity: 0.6 } },
+    };
+}
+/**
+ * Build ECharts options for a bubble chart.
  */
 export function buildBubbleOptions(spec) {
     const data = (spec.data ?? []);
     const xField = spec.x ?? 'x';
     const yField = spec.y ?? 'y';
     const sizeField = spec.size ?? 'size';
+    const seriesField = spec.series;
     const labelField = spec.label;
+    const showLabels = spec.showLabels;
     const theme = (spec.theme ?? 'light');
     const colors = getThemeColors(theme);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
-    // Auto-detect axis types from data
-    const firstX = data.length > 0 ? data[0][xField] : null;
-    const firstY = data.length > 0 ? data[0][yField] : null;
-    const xIsCategory = typeof firstX === 'string';
-    const yIsCategory = typeof firstY === 'string';
-    // Extract unique categories if needed
-    let xCategories = [];
-    let yCategories = [];
-    if (xIsCategory) {
-        xCategories = [...new Set(data.map((d) => String(d[xField] ?? '')))];
-    }
-    if (yIsCategory) {
-        yCategories = [...new Set(data.map((d) => String(d[yField] ?? '')))];
-    }
-    // Find min/max for size scaling
-    const sizes = data.map((d) => (typeof d[sizeField] === 'number' ? d[sizeField] : 1));
-    const minSize = sizes.length > 0 ? Math.min(...sizes) : 1;
-    const maxSize = sizes.length > 0 ? Math.max(...sizes) : 1;
-    const sizeRange = maxSize - minSize || 1;
-    // Build bubble data with scaled sizes
-    // For category axes, convert string values to indices
-    const bubbleData = data.map((d) => {
-        const s = typeof d[sizeField] === 'number' ? d[sizeField] : 1;
-        const scaledSize = 10 + ((s - minSize) / sizeRange) * 40;
-        const xVal = xIsCategory ? xCategories.indexOf(String(d[xField] ?? '')) : (d[xField] ?? 0);
-        const yVal = yIsCategory ? yCategories.indexOf(String(d[yField] ?? '')) : (d[yField] ?? 0);
-        const point = [xVal, yVal, s, scaledSize];
-        if (labelField)
-            point.push(String(d[labelField] ?? ''));
-        return point;
-    });
-    // Build tooltip formatter with label support
-    const labelIdx = labelField ? 4 : -1;
-    const tooltipFormatterJs = `function(params) {
-    var d = params.value || params.data;
-    var result = '';
-    ${labelIdx >= 0 ? "var label = d[" + labelIdx + "]; if (label) result += '<strong>' + label + '</strong><br/>';" : ''}
-    result += '${xField}' + ': ' + d[0] + '<br/>';
-    result += '${yField}' + ': ' + d[1] + '<br/>';
-    result += '${sizeField}' + ': ' + d[2];
-    return result;
-  }`;
-    return {
+    // Infer axis formats
+    const xSample = data.length > 0 && data[0] ? data[0][xField] ?? 0 : 0;
+    const ySample = data.length > 0 && data[0] ? data[0][yField] ?? 0 : 0;
+    const xFormat = spec.xFormat ?? inferFormat(xField, xSample);
+    const yFormat = spec.yFormat ?? inferFormat(yField, ySample);
+    const currency = resolveCurrency(spec.currency);
+    // Build context for point construction
+    const xAxis = detectAxisCategories(data, xField);
+    const yAxis = detectAxisCategories(data, yField);
+    const { min: minSize, range: sizeRange } = computeSizeRange(data, sizeField);
+    const ctx = {
+        xField, yField, sizeField, labelField,
+        xIsCategory: xAxis.isCategory, yIsCategory: yAxis.isCategory,
+        xCategories: xAxis.categories, yCategories: yAxis.categories,
+        minSize, sizeRange,
+    };
+    // Build series and legend
+    const { seriesList, legendData } = buildBubbleSeries(data, ctx, seriesField, showLabels, palette, colors);
+    const hasLegend = seriesField && legendData.length > 1;
+    const option = {
         backgroundColor: 'transparent',
         animation: false,
         color: palette,
-        tooltip: {
-            trigger: 'item',
-            backgroundColor: colors.paper,
-            borderColor: colors.border,
-            textStyle: { color: colors.text },
-            formatter: { _js_: tooltipFormatterJs },
-        },
+        tooltip: buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors),
         grid: {
-            left: '6%',
-            right: '8%',
-            top: '12%',
-            bottom: '14%',
-            containLabel: true,
-        },
-        xAxis: {
-            type: xIsCategory ? 'category' : 'value',
-            data: xIsCategory ? xCategories : undefined,
-            name: xField,
-            nameLocation: 'middle',
-            nameGap: 24,
-            nameTextStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
-            scale: !xIsCategory,
-            axisLine: { show: false },
-            axisTick: { show: false },
-            axisLabel: { color: colors.textSecondary },
-            splitLine: { lineStyle: { color: colors.border, type: [2, 3], opacity: 0.6 } },
-        },
-        yAxis: {
-            type: yIsCategory ? 'category' : 'value',
-            data: yIsCategory ? yCategories : undefined,
-            name: yField,
-            nameLocation: 'middle',
-            nameGap: 32,
-            nameTextStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
-            scale: !yIsCategory,
-            axisLine: { show: false },
-            axisTick: { show: false },
-            axisLabel: { color: colors.textSecondary },
-            splitLine: { lineStyle: { color: colors.border, type: [2, 3], opacity: 0.6 } },
+            left: '6%', right: '8%',
+            top: hasLegend ? '14%' : '12%',
+            bottom: '14%', containLabel: true,
         },
-        series: [
-            {
-                type: 'scatter',
-                data: bubbleData,
-                symbolSize: { _js_: 'function(val) { return val[3] || 20; }' },
-                itemStyle: { color: palette[0], opacity: 0.55 },
-            },
-        ],
+        xAxis: buildBubbleAxis(xField, xAxis.isCategory, xAxis.categories, getAxisFormatterJs(xFormat, currency.symbol, currency.locale), 24, colors),
+        yAxis: buildBubbleAxis(yField, yAxis.isCategory, yAxis.categories, getAxisFormatterJs(yFormat, currency.symbol, currency.locale), 32, colors),
+        series: seriesList,
     };
+    if (hasLegend) {
+        option.legend = buildSeriesLegend(legendData, colors);
+    }
+    return option;
 }
 /**
- * Generate a bubble chart with JS function for symbol size
+ * Generate a bubble chart.
  */
 function generateBubble(spec) {
-    const option = buildBubbleOptions(spec);
-    const title = spec.title ?? '';
-    const theme = (spec.theme ?? 'light');
-    const colors = getThemeColors(theme);
-    const optionJson = serializeOption(option);
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>${title}</title>
-  <script src="${ECHARTS_CDN}"></script>
-  <style>
-    * { box-sizing: border-box; }
-    html, body {
-      margin: 0; padding: 0; width: 100%; height: 100%;
-      background-color: ${colors.background}; font-family: ${FONT_STACK};
-    }
-    .container { padding: 20px; width: 100%; height: 100%; display: flex; flex-direction: column; }
-    .red-line { width: 100%; height: 3px; background-color: ${COLORS.ERROR_RED}; margin-bottom: 12px; }
-    h2 { font-family: ${FONT_STACK}; color: ${colors.text}; font-size: 18px; font-weight: 900; margin: 0 0 4px 0; }
-    #chart { width: 100%; flex: 1; min-height: 300px; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="red-line"></div>
-    <h2>${title}</h2>
-    <div id="chart"></div>
-  </div>
-  <script>
-    var chart = echarts.init(document.getElementById('chart'));
-    var option = ${optionJson};
-    chart.setOption(option);
-    window.addEventListener('resize', function() { chart.resize(); });
-  </script>
-</body>
-</html>`;
+    const height = typeof spec.height === 'number' ? spec.height : DEFAULT_CHART_HEIGHT;
+    return wrapHtml('chart', buildBubbleOptions(spec), '', '100%', height);
 }
 // Register the chart
 registerChart('bubble')(generateBubble);

package/dist/charts/combo.js

@@ -3,7 +3,7 @@
  */
 import { FONT_SIZE_XXS, BAR_MAX_WIDTH, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferAxisType, inferFormat, getAxisFormatterJs } from '../core/formatting.js';
+import { inferAxisType, inferFormat, getAxisFormatterJs, resolveCurrency } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Build ECharts options for a combo chart (bar + line with optional dual axis)
@@ -23,11 +23,12 @@ export function buildComboOptions(spec) {
     // Infer format for primary y-axis (bars)
     const barSample = data.length > 0 && data[0] && barKeys[0] ? data[0][barKeys[0]] ?? 0 : 0;
     const primaryFormat = spec.format ?? inferFormat(barKeys[0] ?? 'value', barSample);
-    const primaryAxisFormatter = getAxisFormatterJs(primaryFormat);
+    const currency = resolveCurrency(spec.currency);
+    const primaryAxisFormatter = getAxisFormatterJs(primaryFormat, currency.symbol, currency.locale);
     // Infer format for secondary y-axis (line if dual axis)
     const lineSample = data.length > 0 && data[0] && lineKeys[0] ? data[0][lineKeys[0]] ?? 0 : 0;
     const secondaryFormat = spec.secondaryFormat ?? inferFormat(lineKeys[0] ?? 'value', lineSample);
-    const secondaryAxisFormatter = getAxisFormatterJs(secondaryFormat);
+    const secondaryAxisFormatter = getAxisFormatterJs(secondaryFormat, currency.symbol, currency.locale);
     // Detect x-axis type
     const xAxisType = inferAxisType(categories);
     // Get axis label config based on axis type

package/dist/charts/dumbbell.js

@@ -6,7 +6,7 @@
  */
 import { COLORS, FONT_SIZE_TINY, DUMBBELL_SYMBOL_SIZE, DEFAULT_CHART_HEIGHT, getThemeColors, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferFormat, getAxisFormatterJs, formatValue, formatNumber } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, formatNumber, resolveCurrency, localeFixed } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 // Directional colors
 const POSITIVE_COLOR = COLORS.POSITIVE_GREEN;
@@ -50,25 +50,29 @@ const COMPACT_LABEL_CHAR_THRESHOLD = 5;
  * Compute the compact dumbbell label string for a given value.
  * Mirrors the JS formatter logic so we can measure character count at build time.
  */
-function compactFormatLabel(value, fmt) {
-    if (fmt === 'auto' || fmt === 'usd_auto') {
+function compactFormatLabel(value, fmt, currencySymbol = '$', locale = 'en-US') {
+    if (fmt === 'auto' || fmt === 'currency_auto') {
         const abs = Math.abs(value);
-        const p = fmt === 'usd_auto' ? '$' : '';
+        const p = fmt === 'currency_auto' ? currencySymbol : '';
+        const isCurrency = fmt === 'currency_auto';
+        const lf = isCurrency
+            ? (v, d) => localeFixed(v, d, locale)
+            : (v, d) => v.toFixed(d);
         let r;
         if (abs >= 1e9) {
             const s = abs / 1e9;
-            r = p + (s >= 10 ? Math.round(s).toString() : s.toFixed(1)) + 'b';
+            r = p + (s >= 10 ? Math.round(s).toString() : lf(s, 1)) + 'b';
         }
         else if (abs >= 1e6) {
             const s = abs / 1e6;
-            r = p + (s >= 10 ? Math.round(s).toString() : s.toFixed(1)) + 'm';
+            r = p + (s >= 10 ? Math.round(s).toString() : lf(s, 1)) + 'm';
         }
         else if (abs >= 1e3) {
             const s = abs / 1e3;
-            r = p + (s >= 10 ? Math.round(s).toString() : s.toFixed(1)) + 'k';
+            r = p + (s >= 10 ? Math.round(s).toString() : lf(s, 1)) + 'k';
         }
         else {
-            r = abs === Math.floor(abs) ? p + abs.toString() : p + abs.toFixed(1);
+            r = abs === Math.floor(abs) ? p + abs.toString() : p + lf(abs, 1);
         }
         return value < 0 ? '(' + r + ')' : r;
     }
@@ -77,8 +81,8 @@ function compactFormatLabel(value, fmt) {
 /**
  * Get the appropriate font size for a dumbbell dot label.
  */
-function dumbbellLabelFontSize(value, fmt) {
-    const label = compactFormatLabel(value, fmt);
+function dumbbellLabelFontSize(value, fmt, currencySymbol = '$', locale = 'en-US') {
+    const label = compactFormatLabel(value, fmt, currencySymbol, locale);
     return label.length >= COMPACT_LABEL_CHAR_THRESHOLD
         ? DUMBBELL_LABEL_FONT_SMALL
         : DUMBBELL_LABEL_FONT;
@@ -88,56 +92,68 @@ function dumbbellLabelFontSize(value, fmt) {
  * Dumbbell stores values as [value, categoryIndex], so we extract value from params.value[0].
  * Uses compact formatting (~4-5 chars max) to fit inside small dot symbols.
  */
-function buildDumbbellLabelFormatter(fmt) {
-    if (fmt === 'auto' || fmt === 'usd_auto') {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+function buildDumbbellLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
+    if (fmt === 'auto' || fmt === 'currency_auto') {
+        const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
+        const symbolStr = JSON.stringify(currencySymbol);
+        const locStr = JSON.stringify(locale);
+        const lfHelper = fmt === 'currency_auto'
+            ? `var loc = ${locStr}; var lf = function(v, d) { return v.toLocaleString(loc, {minimumFractionDigits:d, maximumFractionDigits:d}); };`
+            : `var lf = function(v, d) { return v.toFixed(d); };`;
         // Compact: max 1 decimal for scaled values to fit in dot labels
         return `function(params) {
   var v = params.value[0];
   if (v == null) return '';
   var abs = Math.abs(v);
   var neg = v < 0;
-  var p = ${isCurrency} ? '$' : '';
+  var p = ${isCurrency} ? ${symbolStr} : '';
+  ${lfHelper}
   var r;
   if (abs >= 1e9) {
     var s = abs / 1e9;
-    r = p + (s >= 10 ? Math.round(s) : s.toFixed(1)) + 'b';
+    r = p + (s >= 10 ? Math.round(s) : lf(s,1)) + 'b';
   } else if (abs >= 1e6) {
     var s = abs / 1e6;
-    r = p + (s >= 10 ? Math.round(s) : s.toFixed(1)) + 'm';
+    r = p + (s >= 10 ? Math.round(s) : lf(s,1)) + 'm';
   } else if (abs >= 1e3) {
     var s = abs / 1e3;
-    r = p + (s >= 10 ? Math.round(s) : s.toFixed(1)) + 'k';
+    r = p + (s >= 10 ? Math.round(s) : lf(s,1)) + 'k';
   } else {
-    r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(1);
+    r = abs === Math.floor(abs) ? p + abs : p + lf(abs,1);
   }
   return neg ? '(' + r + ')' : r;
 }`;
     }
-    const expr = formatValue(fmt);
+    const expr = formatValue(fmt, currencySymbol, locale);
     return `function(params) { var value = params.value[0]; if (value == null) return ''; return ${expr}; }`;
 }
 /**
  * Build a tooltip value formatting expression for dumbbell charts.
  * Tooltip can be more verbose than dot labels, so uses full smart formatting.
  */
-function buildDumbbellTooltipExpr(fmt) {
-    if (fmt === 'auto' || fmt === 'usd_auto') {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+function buildDumbbellTooltipExpr(fmt, currencySymbol = '$', locale = 'en-US') {
+    if (fmt === 'auto' || fmt === 'currency_auto') {
+        const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
+        const symbolStr = JSON.stringify(currencySymbol);
+        const locStr = JSON.stringify(locale);
+        const lfHelper = fmt === 'currency_auto'
+            ? `var loc = ${locStr}; var lf = function(v, d) { return v.toLocaleString(loc, {minimumFractionDigits:d, maximumFractionDigits:d}); };`
+            : `var lf = function(v, d) { return v.toFixed(d); };`;
         return `(function(v) {
     var abs = Math.abs(v);
     var neg = v < 0;
-    var p = ${isCurrency} ? '$' : '';
+    var p = ${isCurrency} ? ${symbolStr} : '';
+    ${lfHelper}
     var r;
-    if (abs >= 1e9) { var s = abs / 1e9; r = s >= 100 ? p + s.toFixed(1) + 'b' : s >= 10 ? p + s.toFixed(2) + 'b' : p + s.toFixed(3) + 'b'; }
-    else if (abs >= 1e6) { var s = abs / 1e6; r = s >= 100 ? p + s.toFixed(1) + 'm' : s >= 10 ? p + s.toFixed(2) + 'm' : p + s.toFixed(3) + 'm'; }
-    else if (abs >= 1e4) { var s = abs / 1e3; r = s >= 100 ? p + s.toFixed(1) + 'k' : p + s.toFixed(2) + 'k'; }
-    else if (abs >= 1e3) { r = p + abs.toLocaleString('en-US', {maximumFractionDigits: 0}); }
-    else { r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(2); }
+    if (abs >= 1e9) { var s = abs / 1e9; r = s >= 100 ? p + lf(s,1) + 'b' : s >= 10 ? p + lf(s,2) + 'b' : p + lf(s,3) + 'b'; }
+    else if (abs >= 1e6) { var s = abs / 1e6; r = s >= 100 ? p + lf(s,1) + 'm' : s >= 10 ? p + lf(s,2) + 'm' : p + lf(s,3) + 'm'; }
+    else if (abs >= 1e4) { var s = abs / 1e3; r = s >= 100 ? p + lf(s,1) + 'k' : p + lf(s,2) + 'k'; }
+    else if (abs >= 1e3) { r = p + abs.toLocaleString(${locStr}, {maximumFractionDigits: 0}); }
+    else { r = abs === Math.floor(abs) ? p + abs : p + lf(abs,2); }
     return neg ? '(' + r + ')' : r;
   })(val)`;
     }
-    const expr = formatValue(fmt);
+    const expr = formatValue(fmt, currencySymbol, locale);
     // formatValue uses 'value' as the variable name, replace with 'val' for tooltip context
     return expr.replace(/\bvalue\b/g, 'val');
 }
@@ -177,7 +193,8 @@ export function buildDumbbellOptions(spec) {
     // Infer value format
     const sampleValue = startValues[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat(startField, sampleValue);
-    const axisFormatter = getAxisFormatterJs(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
     // Calculate axis limits
     const allValues = [...startValues, ...endValues];
     let xMin = spec.xMin;
@@ -198,7 +215,7 @@ export function buildDumbbellOptions(spec) {
         }
     }
     // Value formatter for labels inside dots (uses formatValue for all format types)
-    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat);
+    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat, currency.symbol, currency.locale);
     // Build line data for custom series
     const lineData = startValues.map((s, i) => {
         const e = endValues[i];
@@ -309,7 +326,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
             fontWeight: 'bold',
             color: rowColors[i],
             formatter: { _js_: valueFormatterJs },
@@ -332,7 +349,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
             fontWeight: 'bold',
             color: '#ffffff',
             formatter: { _js_: valueFormatterJs },
@@ -346,7 +363,7 @@ export function buildDumbbellOptions(spec) {
         z: 10,
     });
     // Tooltip formatter with value formatting
-    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat);
+    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat, currency.symbol, currency.locale);
     const tooltipFormatterJs = `function(params) {
     if (params.seriesName === 'range') return '';
     var cat = ${JSON.stringify(categories)}[params.data.value ? params.data.value[1] : params.data[1]];