mviz 1.5.3 → 1.6.0

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.js

@@ -1,7 +1,8 @@
 /**
  * Bubble chart generator
  */
-import { COLORS, FONT_SIZE_TINY, ECHARTS_CDN, FONT_STACK, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
+import { FONT_SIZE_TINY, ECHARTS_CDN, FONT_STACK, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
+import { serializeOption } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Build ECharts options for a bubble chart
@@ -11,6 +12,7 @@ export function buildBubbleOptions(spec) {
     const xField = spec.x ?? 'x';
     const yField = spec.y ?? 'y';
     const sizeField = spec.size ?? 'size';
+    const labelField = spec.label;
     const theme = (spec.theme ?? 'light');
     const colors = getThemeColors(theme);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
@@ -40,8 +42,22 @@ export function buildBubbleOptions(spec) {
         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);
-        return [xVal, yVal, s, scaledSize];
+        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 {
         backgroundColor: 'transparent',
         animation: false,
@@ -51,6 +67,7 @@ export function buildBubbleOptions(spec) {
             backgroundColor: colors.paper,
             borderColor: colors.border,
             textStyle: { color: colors.text },
+            formatter: { _js_: tooltipFormatterJs },
         },
         grid: {
             left: '6%',
@@ -89,7 +106,7 @@ export function buildBubbleOptions(spec) {
             {
                 type: 'scatter',
                 data: bubbleData,
-                symbolSize: '__SYMBOL_SIZE_FUNC__',
+                symbolSize: { _js_: 'function(val) { return val[3] || 20; }' },
                 itemStyle: { color: palette[0], opacity: 0.55 },
             },
         ],
@@ -103,9 +120,7 @@ function generateBubble(spec) {
     const title = spec.title ?? '';
     const theme = (spec.theme ?? 'light');
     const colors = getThemeColors(theme);
-    // Convert to JSON and inject the symbolSize function
-    let optionJson = JSON.stringify(option, null, 2);
-    optionJson = optionJson.replace('"__SYMBOL_SIZE_FUNC__"', 'function(val) { return val[3] || 20; }');
+    const optionJson = serializeOption(option);
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -119,7 +134,7 @@ function generateBubble(spec) {
       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; }
+    .red-line { width: 100%; height: 3px; background-color: ${colors.accent}; 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>

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 } 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;
@@ -42,6 +42,121 @@ function getNiceStep(dataRange) {
         return magnitude / 2;
     return magnitude;
 }
+// Font sizes for dumbbell dot labels
+const DUMBBELL_LABEL_FONT = FONT_SIZE_TINY - 2; // 8px - normal
+const DUMBBELL_LABEL_FONT_SMALL = FONT_SIZE_TINY - 3; // 7px - for 5+ char labels
+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, currencySymbol = '$', locale = 'en-US') {
+    if (fmt === 'auto' || fmt === 'currency_auto') {
+        const abs = Math.abs(value);
+        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() : lf(s, 1)) + 'b';
+        }
+        else if (abs >= 1e6) {
+            const s = abs / 1e6;
+            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() : lf(s, 1)) + 'k';
+        }
+        else {
+            r = abs === Math.floor(abs) ? p + abs.toString() : p + lf(abs, 1);
+        }
+        return value < 0 ? '(' + r + ')' : r;
+    }
+    return formatNumber(value, fmt);
+}
+/**
+ * Get the appropriate font size for a dumbbell dot label.
+ */
+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;
+}
+/**
+ * Build a label formatter function for dumbbell dot labels.
+ * 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, 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} ? ${symbolStr} : '';
+  ${lfHelper}
+  var r;
+  if (abs >= 1e9) {
+    var s = abs / 1e9;
+    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) : lf(s,1)) + 'm';
+  } else if (abs >= 1e3) {
+    var s = abs / 1e3;
+    r = p + (s >= 10 ? Math.round(s) : lf(s,1)) + 'k';
+  } else {
+    r = abs === Math.floor(abs) ? p + abs : p + lf(abs,1);
+  }
+  return neg ? '(' + r + ')' : r;
+}`;
+    }
+    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, 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} ? ${symbolStr} : '';
+    ${lfHelper}
+    var r;
+    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, currencySymbol, locale);
+    // formatValue uses 'value' as the variable name, replace with 'val' for tooltip context
+    return expr.replace(/\bvalue\b/g, 'val');
+}
 /**
  * Build ECharts options for a dumbbell plot with directional coloring
  */
@@ -78,8 +193,8 @@ export function buildDumbbellOptions(spec) {
     // Infer value format
     const sampleValue = startValues[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat(startField, sampleValue);
-    const isCurrency = valueFormat?.includes('usd');
-    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;
@@ -99,24 +214,8 @@ export function buildDumbbellOptions(spec) {
             xMax = niceCeil(rawMax, step);
         }
     }
-    // Value formatter for labels inside dots
-    const valueFormatterJs = `function(params) {
-    var v = params.value[0];
-    var abs = Math.abs(v);
-    var isCurrency = ${isCurrency ? 'true' : 'false'};
-    var prefix = isCurrency ? '$' : '';
-    if (abs >= 1000000) {
-      var val = v / 1000000;
-      var formatted = isCurrency ? Math.round(val) : (Math.abs(val) >= 10 ? Math.round(val) : val.toFixed(1));
-      return prefix + formatted + 'm';
-    }
-    if (abs >= 1000) {
-      var val = v / 1000;
-      var formatted = isCurrency ? Math.round(val) : (Math.abs(val) >= 10 ? Math.round(val) : val.toFixed(1));
-      return prefix + formatted + 'k';
-    }
-    return isCurrency ? prefix + Math.round(v) : v;
-  }`;
+    // Value formatter for labels inside dots (uses formatValue for all format types)
+    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat, currency.symbol, currency.locale);
     // Build line data for custom series
     const lineData = startValues.map((s, i) => {
         const e = endValues[i];
@@ -227,7 +326,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: FONT_SIZE_TINY - 2,
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
             fontWeight: 'bold',
             color: rowColors[i],
             formatter: { _js_: valueFormatterJs },
@@ -250,7 +349,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: FONT_SIZE_TINY - 2,
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
             fontWeight: 'bold',
             color: '#ffffff',
             formatter: { _js_: valueFormatterJs },
@@ -263,12 +362,14 @@ export function buildDumbbellOptions(spec) {
         symbolSize: DUMBBELL_SYMBOL_SIZE,
         z: 10,
     });
-    // Tooltip formatter
+    // Tooltip formatter with value formatting
+    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]];
     var val = params.data.value ? params.data.value[0] : params.data[0];
-    return '<strong>' + cat + '</strong><br/>' + params.seriesName + ': ' + val;
+    var formatted = ${tooltipValueExpr};
+    return '<strong>' + cat + '</strong><br/>' + params.seriesName + ': ' + formatted;
   }`;
     return {
         backgroundColor: 'transparent',

package/dist/charts/funnel.js

@@ -3,49 +3,67 @@
  */
 import { FONT_SIZE_XXS, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferFormat } from '../core/formatting.js';
+import { inferFormat, resolveCurrency } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Get JavaScript formatter for funnel chart labels/tooltips
+ * @param currencySymbol - Symbol to use for currency formats
+ * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-function getFunnelFormatterJs(fmt) {
+function getFunnelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US') {
     // Smart auto-formatting based on magnitude
-    if (fmt === 'auto' || fmt === 'usd_auto' || fmt === null || fmt === undefined) {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+    if (fmt === 'auto' || fmt === 'currency_auto' || fmt === null || fmt === undefined) {
+        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 {
             _js_: `function(params) {
   var v = params.value;
   if (v == null) return params.name;
   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';
+    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 + s.toFixed(1) + 'm' : s >= 10 ? p + s.toFixed(2) + 'm' : p + s.toFixed(3) + 'm';
+    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 + s.toFixed(1) + 'k' : p + s.toFixed(2) + 'k';
+    r = s >= 100 ? p + lf(s,1) + 'k' : p + lf(s,2) + 'k';
   } else if (abs >= 1e3) {
-    r = p + abs.toLocaleString('en-US', {maximumFractionDigits: 0});
+    r = p + abs.toLocaleString(${locStr}, {maximumFractionDigits: 0});
   } else {
-    r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(2);
+    r = abs === Math.floor(abs) ? p + abs : p + lf(abs,2);
   }
   var formatted = neg ? '(' + r + ')' : r;
   return params.name + ': ' + formatted;
 }`,
         };
     }
+    const sym = JSON.stringify(currencySymbol);
+    const locStr = JSON.stringify(locale);
     // Specific format handlers
     switch (fmt) {
-        case 'usd':
-            return { _js_: "function(params) { return params.name + ': $' + params.value.toLocaleString(); }" };
-        case 'usd0k':
+        case 'currency':
+            return { _js_: `function(params) { return params.name + ': ' + ${sym} + params.value.toLocaleString(${locStr}); }` };
+        case 'currency0k':
             return {
-                _js_: "function(params) { return params.name + ': $' + (params.value/1000).toFixed(0) + 'k'; }",
+                _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000).toFixed(0) + 'k'; }`,
+            };
+        case 'currency0m':
+            return {
+                _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'm'; }`,
+            };
+        case 'currency0b':
+            return {
+                _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'b'; }`,
             };
         case 'pct':
         case 'pct1':
@@ -88,8 +106,9 @@ export function buildFunnelOptions(spec) {
     // Infer format from value field name or use explicit format
     const sampleValue = funnelData[0]?.value ?? 0;
     const valueFormat = spec.format ?? inferFormat(valueField, sampleValue);
+    const currency = resolveCurrency(spec.currency);
     // Get JavaScript formatter
-    const formatter = getFunnelFormatterJs(valueFormat);
+    const formatter = getFunnelFormatterJs(valueFormat, currency.symbol, currency.locale);
     return {
         backgroundColor: 'transparent',
         animation: false,

package/dist/charts/heatmap.js

@@ -4,7 +4,7 @@
 import { FONT_SIZE_XXS, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
 import { registerChart, registerOptions } from './registry.js';
-import { inferFormat } from '../core/formatting.js';
+import { inferFormat, resolveCurrency } from '../core/formatting.js';
 /**
  * Parse a formatted string value like "1.9k" or "$2.5m" to a number.
  * Returns the original value if parsing fails.
@@ -35,45 +35,55 @@ function parseFormattedValue(value) {
 /**
  * Generate a label formatter for heatmap cells.
  * Heatmap data is [x, y, value], so we access params.value[2].
+ * @param currencySymbol - Symbol to use for currency formats
+ * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-function getHeatmapLabelFormatter(fmt) {
+function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
     if (fmt === null || fmt === undefined) {
         return null;
     }
     // Smart auto-formatting for heatmap labels
-    if (fmt === 'auto' || fmt === 'usd_auto') {
-        const isCurrency = fmt === 'usd_auto' ? 'true' : 'false';
+    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 {
             _js_: `function(params) {
   var v = params.value[2];
   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 = s >= 100 ? p + s.toFixed(1) + 'b' : s >= 10 ? p + s.toFixed(2) + 'b' : p + s.toFixed(3) + 'b';
+    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 + s.toFixed(1) + 'm' : s >= 10 ? p + s.toFixed(2) + 'm' : p + s.toFixed(3) + 'm';
+    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 + s.toFixed(1) + 'k' : p + s.toFixed(2) + 'k';
+    r = s >= 100 ? p + lf(s,1) + 'k' : p + lf(s,2) + 'k';
   } else if (abs >= 1e3) {
-    r = p + abs.toLocaleString('en-US', {maximumFractionDigits: 0});
+    r = p + abs.toLocaleString(${locStr}, {maximumFractionDigits: 0});
   } else {
-    r = abs === Math.floor(abs) ? p + abs : p + abs.toFixed(2);
+    r = abs === Math.floor(abs) ? p + abs : p + lf(abs,2);
   }
   return neg ? '(' + r + ')' : r;
 }`,
         };
     }
     // Format-specific formatters (with null checks)
+    const sym = JSON.stringify(currencySymbol);
+    const locStr = JSON.stringify(locale);
     const formatExprs = {
-        usd: "'$' + v.toLocaleString()",
-        usd0k: "'$' + (v/1000).toFixed(0) + 'k'",
-        usd0m: "'$' + (v/1000000).toFixed(1) + 'm'",
+        currency: `${sym} + v.toLocaleString(${locStr})`,
+        currency0k: `${sym} + (v/1000).toFixed(0) + 'k'`,
+        currency0m: `${sym} + (v/1000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'm'`,
         pct: "(v * 100).toFixed(1) + '%'",
         pct0: "(v * 100).toFixed(0) + '%'",
         pct1: "(v * 100).toFixed(1) + '%'",
@@ -149,7 +159,8 @@ export function buildHeatmapOptions(spec) {
     // Infer format for labels
     const sampleValue = values[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat('value', sampleValue);
-    const labelFormatter = getHeatmapLabelFormatter(valueFormat);
+    const currency = resolveCurrency(spec.currency);
+    const labelFormatter = getHeatmapLabelFormatter(valueFormat, currency.symbol, currency.locale);
     // Build label config
     const labelConfig = { show: true, color: colors.text };
     if (labelFormatter) {

package/dist/charts/line.js

@@ -4,7 +4,7 @@
 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, inferAxisType } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, inferAxisType, resolveCurrency } from '../core/formatting.js';
 /**
  * Build ECharts options for a line chart
  */
@@ -22,7 +22,8 @@ export function buildLineOptions(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
     // User can override with xAxisType in spec
     const xAxisType = spec.xAxisType ?? inferAxisType(categories);

package/dist/charts/scatter.js

@@ -4,7 +4,7 @@
 import { SCATTER_SYMBOL_SIZE, 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 } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency } from '../core/formatting.js';
 /**
  * Build ECharts options for a scatter plot
  */
@@ -13,6 +13,7 @@ export function buildScatterOptions(spec) {
     const xField = spec.x ?? 'x';
     const yField = spec.y ?? 'y';
     const seriesField = spec.series;
+    const labelField = spec.label;
     const theme = (spec.theme ?? 'light');
     const colors = getThemeColors(theme);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
@@ -21,8 +22,9 @@ export function buildScatterOptions(spec) {
     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 xAxisFormatter = getAxisFormatterJs(xFormat);
-    const yAxisFormatter = getAxisFormatterJs(yFormat);
+    const currency = resolveCurrency(spec.currency);
+    const xAxisFormatter = getAxisFormatterJs(xFormat, currency.symbol, currency.locale);
+    const yAxisFormatter = getAxisFormatterJs(yFormat, currency.symbol, currency.locale);
     // Build series - either single series or grouped by seriesField
     let seriesList;
     let legendData = [];
@@ -34,7 +36,10 @@ export function buildScatterOptions(spec) {
             if (!groups.has(groupName)) {
                 groups.set(groupName, []);
             }
-            groups.get(groupName).push([d[xField] ?? 0, d[yField] ?? 0]);
+            const point = [d[xField] ?? 0, d[yField] ?? 0];
+            if (labelField)
+                point.push(String(d[labelField] ?? ''));
+            groups.get(groupName).push(point);
         }
         // Create a series for each group
         legendData = [...groups.keys()];
@@ -47,8 +52,13 @@ export function buildScatterOptions(spec) {
         }));
     }
     else {
-        // Single series (original behavior)
-        const scatterData = data.map((d) => [d[xField] ?? 0, d[yField] ?? 0]);
+        // Single series
+        const scatterData = data.map((d) => {
+            const point = [d[xField] ?? 0, d[yField] ?? 0];
+            if (labelField)
+                point.push(String(d[labelField] ?? ''));
+            return point;
+        });
         seriesList = [
             {
                 type: 'scatter',
@@ -58,6 +68,17 @@ export function buildScatterOptions(spec) {
             },
         ];
     }
+    // Build tooltip formatter with label support and value formatting
+    const xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale);
+    const tooltipFormatterJs = `function(params) {
+    var d = params.value || params.data;
+    var result = '';
+    ${labelField ? "var label = d[2]; if (label) result += '<strong>' + label + '</strong><br/>';" : ''}
+    var value = d[0]; result += ${JSON.stringify(xField)} + ': ' + ${xFormatExpr} + '<br/>';
+    var value = d[1]; result += ${JSON.stringify(yField)} + ': ' + ${yFormatExpr};
+    return result;
+  }`;
     const option = {
         backgroundColor: 'transparent',
         animation: false,
@@ -67,6 +88,7 @@ export function buildScatterOptions(spec) {
             backgroundColor: colors.paper,
             borderColor: colors.border,
             textStyle: { color: colors.text },
+            formatter: { _js_: tooltipFormatterJs },
         },
         grid: {
             left: '2%',
@@ -93,7 +115,7 @@ export function buildScatterOptions(spec) {
             type: 'value',
             name: yField,
             nameLocation: 'middle',
-            nameGap: 32,
+            nameGap: 40,
             nameTextStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_TINY },
             axisLine: { show: false },
             axisTick: { show: false },