mviz 1.6.4 → 1.6.7

package/README.md

@@ -156,7 +156,7 @@ title: My Report
 ## Section Name
 
 ```big_value size=[4,2]
-{"value": 125000, "label": "Revenue", "format": "usd0m"}
+{"value": 125000, "label": "Revenue", "format": "currency0m"}
 ```
 ```delta size=[4,2]
 {"value": 0.15, "label": "vs Last Month", "format": "pct0"}
@@ -200,7 +200,7 @@ Tables support inline sparkline columns for trend visualization:
   "type": "table",
   "columns": [
     {"id": "product", "title": "Product"},
-    {"id": "sales", "title": "Sales", "fmt": "usd"},
+    {"id": "sales", "title": "Sales", "fmt": "currency"},
     {"id": "trend", "title": "Trend", "type": "sparkline", "sparkType": "line"},
     {"id": "progress", "title": "Goal", "type": "sparkline", "sparkType": "pct_bar", "width": 100}
   ],
@@ -217,10 +217,10 @@ Sparkline types: `line`, `bar`, `area`, `pct_bar` (progress bar), `dumbbell` (be
 | Format | Output | Description |
 |--------|--------|-------------|
 | `auto` | 1.000m, 10.00k | **Smart auto-format (default)** |
-| `usd_auto` | $1.000m, $10.00k | Smart auto-format with $ |
-| `usd0m` | $1.2m | Millions |
-| `usd0k` | $125k | Compact thousands |
-| `usd` | $1,250,000 | Full dollars |
+| `currency_auto` | $1.000m, $10.00k | Smart auto-format with currency symbol |
+| `currency0m` | $1.2m | Millions |
+| `currency0k` | $125k | Compact thousands |
+| `currency` | $1,250,000 | Full currency |
 | `pct0` | 15% | Percentage integer |
 | `pct` | 15.0% | Percentage with decimal |
 | `pct1` | 15.0% | Percentage with 1 decimal |
@@ -234,7 +234,7 @@ Chart axes automatically detect the appropriate format based on field names:
 
 | Field Pattern | Auto Format | Example |
 |---------------|-------------|---------|
-| revenue, sales, price, cost, profit | `usd_auto` | $1.250m |
+| revenue, sales, price, cost, profit | `currency_auto` | $1.250m |
 | pct, percent, rate, ratio | `pct` or `pct0` | 15.0% |
 | All other fields | `auto` | 1.250m |
 
@@ -375,7 +375,7 @@ The skill is automatically available when working in this project directory.
 
 ## Dependencies
 
-- Node.js 20+
+- Node.js 24.12+
 
 ## Design Philosophy
 

package/dist/charts/area.js

@@ -1,10 +1,11 @@
 /**
  * Area chart generator
  */
-import { FONT_SIZE_XXS, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, DEFAULT_CHART_HEIGHT, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
+import { 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, resolveCurrency } from '../core/formatting.js';
+import { inferAxisType } from '../core/formatting.js';
+import { buildValueAxisFormatContext, buildXAxisLabelConfig, applyValueAxisRange, buildMultiSeriesLegend, } from '../core/chart-helpers.js';
 /**
  * Build ECharts options for an area chart
  */
@@ -19,29 +20,12 @@ export function buildAreaOptions(spec) {
     const yKeys = Array.isArray(y) ? y : [y];
     const categories = data.map((d) => d[x]);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
-    // Infer format for value axis based on first y field name
-    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 currency = resolveCurrency(spec.currency);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    // Resolve value-axis format/currency/formatters
+    const { axisFormatter } = buildValueAxisFormatContext(spec, data, yKeys);
     // Detect x-axis type: time, value, or category
     const xAxisType = spec.xAxisType ?? inferAxisType(categories);
     // Get axis label config based on axis type
-    const xAxisLabelConfig = xAxisType === 'category'
-        ? { interval: 0, rotate: 45, overflow: 'truncate', ellipsis: '...', width: 100 }
-        : xAxisType === 'time'
-            ? {
-                hideOverlap: true,
-                formatter: {
-                    _js_: `function(value) {
-            var d = new Date(value);
-            var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-            return months[d.getMonth()] + ' ' + d.getDate();
-          }`,
-                },
-            }
-            : { hideOverlap: true };
+    const xAxisLabelConfig = buildXAxisLabelConfig(xAxisType);
     const option = {
         backgroundColor: 'transparent',
         animation: false,
@@ -83,22 +67,10 @@ export function buildAreaOptions(spec) {
         series: [],
     };
     // Apply yMin/yMax
-    if (spec.yMin !== undefined) {
-        option.yAxis.min = spec.yMin;
-    }
-    if (spec.yMax !== undefined) {
-        option.yAxis.max = spec.yMax;
-    }
+    applyValueAxisRange(option.yAxis, spec);
     // Add legend for multi-series
     if (yKeys.length > 1) {
-        option.legend = {
-            data: yKeys,
-            top: 0,
-            textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_XXS },
-            itemWidth: LEGEND_ITEM_WIDTH,
-            itemHeight: LEGEND_ITEM_HEIGHT,
-            itemGap: LEGEND_ITEM_GAP,
-        };
+        option.legend = buildMultiSeriesLegend(yKeys, colors);
     }
     // Build series
     for (let i = 0; i < yKeys.length; i++) {

package/dist/charts/bar.js

@@ -1,10 +1,11 @@
 /**
  * Bar chart generator
  */
-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 { BAR_MAX_WIDTH, 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, resolveCurrency } from '../core/formatting.js';
+import { inferAxisType } from '../core/formatting.js';
+import { buildValueAxisFormatContext, buildXAxisLabelConfig, applyValueAxisRange, buildMultiSeriesLegend, } from '../core/chart-helpers.js';
 /**
  * Build ECharts options for a bar chart
  */
@@ -19,13 +20,8 @@ export function buildBarOptions(spec) {
     const yKeys = Array.isArray(y) ? y : [y];
     const categories = data.map((d) => d[x]);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
-    // Infer format for value axis based on first y field name
-    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 currency = resolveCurrency(spec.currency);
-    const labelFormatter = getLabelFormatterJs(valueFormat, currency.symbol, currency.locale);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    // Resolve value-axis format/currency/formatters
+    const { axisFormatter, labelFormatter } = buildValueAxisFormatContext(spec, data, yKeys, { withLabelFormatter: true });
     // 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
@@ -33,9 +29,7 @@ export function buildBarOptions(spec) {
     // Determine if labels should be shown (based on category axis type, not x-axis for horizontal)
     const showLabels = yKeys.length === 1 && !stacked && data.length <= 12 && categoryAxisType === 'category';
     // Get axis label config based on axis type
-    const xAxisLabelConfig = xAxisType === 'category'
-        ? { interval: 0, rotate: 45, overflow: 'truncate', ellipsis: '...', width: 100 }
-        : { hideOverlap: true };
+    const xAxisLabelConfig = buildXAxisLabelConfig(xAxisType);
     const option = {
         backgroundColor: 'transparent',
         animation: false,
@@ -110,12 +104,7 @@ export function buildBarOptions(spec) {
     };
     // Apply yMin/yMax to value axis
     const valueAxis = horizontal ? 'xAxis' : 'yAxis';
-    if (spec.yMin !== undefined) {
-        option[valueAxis].min = spec.yMin;
-    }
-    if (spec.yMax !== undefined) {
-        option[valueAxis].max = spec.yMax;
-    }
+    applyValueAxisRange(option[valueAxis], spec);
     // Adjust y-axis gridlines based on x-axis category label length
     // Long category labels (rotated 45°) take up vertical space at bottom
     const chartHeight = typeof spec.height === 'number' ? spec.height : DEFAULT_CHART_HEIGHT;
@@ -136,14 +125,7 @@ export function buildBarOptions(spec) {
     }
     // Add legend for multi-series
     if (yKeys.length > 1) {
-        option.legend = {
-            data: yKeys,
-            top: 0,
-            textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_XXS },
-            itemWidth: LEGEND_ITEM_WIDTH,
-            itemHeight: LEGEND_ITEM_HEIGHT,
-            itemGap: LEGEND_ITEM_GAP,
-        };
+        option.legend = buildMultiSeriesLegend(yKeys, colors);
     }
     // Use lighter label color for dark theme for better visibility
     const labelColor = theme === 'dark' ? colors.text : colors.textSecondary;

package/dist/charts/bubble.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, formatValue, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
 /** Min/max bubble pixel sizes */
 const BUBBLE_SIZE_MIN = 10;
@@ -91,10 +91,10 @@ function buildBubbleSeries(data, ctx, seriesField, showLabels, palette, colors)
 /**
  * Build tooltip config for bubble chart.
  */
-function buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors) {
+function buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors, xPctMultiply = true, yPctMultiply = true) {
     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 xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale, xPctMultiply);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale, yPctMultiply);
     const seriesNameLine = seriesField
         ? "if (params.seriesName) result += '<strong>' + params.seriesName + '</strong><br/>';"
         : '';
@@ -157,6 +157,8 @@ export function buildBubbleOptions(spec) {
     const xFormat = spec.xFormat ?? inferFormat(xField, xSample);
     const yFormat = spec.yFormat ?? inferFormat(yField, ySample);
     const currency = resolveCurrency(spec.currency);
+    const xPctMultiply = shouldPctMultiply(xFormat, collectNumericFieldValues(data, [xField]));
+    const yPctMultiply = shouldPctMultiply(yFormat, collectNumericFieldValues(data, [yField]));
     // Build context for point construction
     const xAxis = detectAxisCategories(data, xField);
     const yAxis = detectAxisCategories(data, yField);
@@ -174,14 +176,14 @@ export function buildBubbleOptions(spec) {
         backgroundColor: 'transparent',
         animation: false,
         color: palette,
-        tooltip: buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors),
+        tooltip: buildBubbleTooltip(ctx, seriesField, xFormat, yFormat, currency, colors, xPctMultiply, yPctMultiply),
         grid: {
             left: '6%', right: '8%',
             top: hasLegend ? '14%' : '12%',
             bottom: '14%', containLabel: true,
         },
-        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),
+        xAxis: buildBubbleAxis(xField, xAxis.isCategory, xAxis.categories, getAxisFormatterJs(xFormat, currency.symbol, currency.locale, xPctMultiply), 24, colors),
+        yAxis: buildBubbleAxis(yField, yAxis.isCategory, yAxis.categories, getAxisFormatterJs(yFormat, currency.symbol, currency.locale, yPctMultiply), 32, colors),
         series: seriesList,
     };
     if (hasLegend) {

package/dist/charts/combo.js

@@ -1,9 +1,10 @@
 /**
  * Combo chart generator (bar + line with optional dual axis)
  */
-import { FONT_SIZE_XXS, BAR_MAX_WIDTH, LEGEND_ITEM_WIDTH, LEGEND_ITEM_HEIGHT, LEGEND_ITEM_GAP, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
+import { BAR_MAX_WIDTH, getThemeColors, getPaletteWithCustom, } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferAxisType, inferFormat, getAxisFormatterJs, resolveCurrency } from '../core/formatting.js';
+import { inferAxisType, inferFormat } from '../core/formatting.js';
+import { buildValueAxisFormatContext, buildXAxisLabelConfig, applyValueAxisRange, buildMultiSeriesLegend, } from '../core/chart-helpers.js';
 import { registerChart, registerOptions } from './registry.js';
 /**
  * Build ECharts options for a combo chart (bar + line with optional dual axis)
@@ -20,32 +21,21 @@ export function buildComboOptions(spec) {
     const barKeys = Array.isArray(barFields) ? barFields : barFields ? [barFields] : [];
     const lineKeys = Array.isArray(lineFields) ? lineFields : lineFields ? [lineFields] : [];
     const categories = data.map((d) => d[x]);
-    // 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 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, currency.symbol, currency.locale);
+    // Resolve format/currency/formatters for primary y-axis (bars) and secondary (line).
+    //
+    // The secondary axis must NOT inherit spec.format (which is the primary/bar
+    // format), so we resolve it explicitly here from spec.secondaryFormat or by
+    // inferring from the line field, then pass it as an explicit override.
+    const { axisFormatter: primaryAxisFormatter } = buildValueAxisFormatContext(spec, data, barKeys);
+    const lineSample = data.length > 0 && data[0] && lineKeys[0]
+        ? data[0][lineKeys[0]] ?? 0
+        : 0;
+    const resolvedSecondaryFormat = spec.secondaryFormat ?? inferFormat(lineKeys[0] ?? 'value', lineSample);
+    const { axisFormatter: secondaryAxisFormatter } = buildValueAxisFormatContext(spec, data, lineKeys, { formatOverride: resolvedSecondaryFormat });
     // Detect x-axis type
     const xAxisType = inferAxisType(categories);
     // Get axis label config based on axis type
-    const xAxisLabelConfig = xAxisType === 'category'
-        ? { interval: 0, rotate: 45, overflow: 'truncate', ellipsis: '...', width: 100 }
-        : xAxisType === 'time'
-            ? {
-                hideOverlap: true,
-                formatter: {
-                    _js_: `function(value) {
-            var d = new Date(value);
-            var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-            return months[d.getMonth()] + ' ' + d.getDate();
-          }`,
-                },
-            }
-            : { hideOverlap: true };
+    const xAxisLabelConfig = buildXAxisLabelConfig(xAxisType);
     const series = [];
     // Add bar series
     barKeys.forEach((key, i) => {
@@ -94,12 +84,7 @@ export function buildComboOptions(spec) {
         },
     ];
     // Apply yMin/yMax to primary y-axis
-    if (spec.yMin !== undefined) {
-        yAxis[0].min = spec.yMin;
-    }
-    if (spec.yMax !== undefined) {
-        yAxis[0].max = spec.yMax;
-    }
+    applyValueAxisRange(yAxis[0], spec);
     if (dualAxis) {
         yAxis.push({
             type: 'value',
@@ -128,14 +113,7 @@ export function buildComboOptions(spec) {
             bottom: '8%',
             containLabel: true,
         },
-        legend: {
-            data: [...barKeys, ...lineKeys],
-            top: 0,
-            textStyle: { color: colors.textSecondary, fontSize: FONT_SIZE_XXS },
-            itemWidth: LEGEND_ITEM_WIDTH,
-            itemHeight: LEGEND_ITEM_HEIGHT,
-            itemGap: LEGEND_ITEM_GAP,
-        },
+        legend: buildMultiSeriesLegend([...barKeys, ...lineKeys], colors),
         xAxis: {
             type: xAxisType,
             data: xAxisType === 'category' ? categories.map(String) : undefined,

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, resolveCurrency, localeFixed } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, formatNumber, resolveCurrency, localeFixed, shouldPctMultiply, } from '../core/formatting.js';
 import { registerChart, registerOptions } from './registry.js';
 // Directional colors
 const POSITIVE_COLOR = COLORS.POSITIVE_GREEN;
@@ -50,7 +50,7 @@ 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') {
+function compactFormatLabel(value, fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === 'auto' || fmt === 'currency_auto') {
         const abs = Math.abs(value);
         const p = fmt === 'currency_auto' ? currencySymbol : '';
@@ -76,13 +76,13 @@ function compactFormatLabel(value, fmt, currencySymbol = '$', locale = 'en-US')
         }
         return value < 0 ? '(' + r + ')' : r;
     }
-    return formatNumber(value, fmt);
+    return formatNumber(value, fmt, false, undefined, pctMultiply);
 }
 /**
  * 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);
+function dumbbellLabelFontSize(value, fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
+    const label = compactFormatLabel(value, fmt, currencySymbol, locale, pctMultiply);
     return label.length >= COMPACT_LABEL_CHAR_THRESHOLD
         ? DUMBBELL_LABEL_FONT_SMALL
         : DUMBBELL_LABEL_FONT;
@@ -92,7 +92,7 @@ function dumbbellLabelFontSize(value, fmt, currencySymbol = '$', locale = 'en-US
  * 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') {
+function buildDumbbellLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === 'auto' || fmt === 'currency_auto') {
         const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
         const symbolStr = JSON.stringify(currencySymbol);
@@ -124,14 +124,14 @@ function buildDumbbellLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US'
   return neg ? '(' + r + ')' : r;
 }`;
     }
-    const expr = formatValue(fmt, currencySymbol, locale);
+    const expr = formatValue(fmt, currencySymbol, locale, pctMultiply);
     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') {
+function buildDumbbellTooltipExpr(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === 'auto' || fmt === 'currency_auto') {
         const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
         const symbolStr = JSON.stringify(currencySymbol);
@@ -153,7 +153,7 @@ function buildDumbbellTooltipExpr(fmt, currencySymbol = '$', locale = 'en-US') {
     return neg ? '(' + r + ')' : r;
   })(val)`;
     }
-    const expr = formatValue(fmt, currencySymbol, locale);
+    const expr = formatValue(fmt, currencySymbol, locale, pctMultiply);
     // formatValue uses 'value' as the variable name, replace with 'val' for tooltip context
     return expr.replace(/\bvalue\b/g, 'val');
 }
@@ -194,7 +194,8 @@ export function buildDumbbellOptions(spec) {
     const sampleValue = startValues[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat(startField, sampleValue);
     const currency = resolveCurrency(spec.currency);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const pctMultiply = shouldPctMultiply(valueFormat, [...startValues, ...endValues]);
+    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // Calculate axis limits
     const allValues = [...startValues, ...endValues];
     let xMin = spec.xMin;
@@ -215,7 +216,7 @@ export function buildDumbbellOptions(spec) {
         }
     }
     // Value formatter for labels inside dots (uses formatValue for all format types)
-    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat, currency.symbol, currency.locale);
+    const valueFormatterJs = buildDumbbellLabelFormatter(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // Build line data for custom series
     const lineData = startValues.map((s, i) => {
         const e = endValues[i];
@@ -326,7 +327,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale, pctMultiply),
             fontWeight: 'bold',
             color: rowColors[i],
             formatter: { _js_: valueFormatterJs },
@@ -349,7 +350,7 @@ export function buildDumbbellOptions(spec) {
         label: {
             show: showValues,
             position: 'inside',
-            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale),
+            fontSize: dumbbellLabelFontSize(v, valueFormat, currency.symbol, currency.locale, pctMultiply),
             fontWeight: 'bold',
             color: '#ffffff',
             formatter: { _js_: valueFormatterJs },
@@ -363,7 +364,7 @@ export function buildDumbbellOptions(spec) {
         z: 10,
     });
     // Tooltip formatter with value formatting
-    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat, currency.symbol, currency.locale);
+    const tooltipValueExpr = buildDumbbellTooltipExpr(valueFormat, currency.symbol, currency.locale, pctMultiply);
     const tooltipFormatterJs = `function(params) {
     if (params.seriesName === 'range') return '';
     var cat = ${JSON.stringify(categories)}[params.data.value ? params.data.value[1] : params.data[1]];

package/dist/charts/funnel.js

@@ -3,14 +3,14 @@
  */
 import { FONT_SIZE_XXS, getThemeColors, getPaletteWithCustom } from '../core/themes.js';
 import { wrapHtml } from '../core/serializer.js';
-import { inferFormat, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, resolveCurrency, shouldPctMultiply } 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, currencySymbol = '$', locale = 'en-US') {
+function getFunnelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     // Smart auto-formatting based on magnitude
     if (fmt === 'auto' || fmt === 'currency_auto' || fmt === null || fmt === undefined) {
         const isCurrency = fmt === 'currency_auto' ? 'true' : 'false';
@@ -66,14 +66,18 @@ function getFunnelFormatterJs(fmt, currencySymbol = '$', locale = 'en-US') {
                 _js_: `function(params) { return params.name + ': ' + ${sym} + (params.value/1000000000).toLocaleString(${locStr}, {minimumFractionDigits:1, maximumFractionDigits:1}) + 'b'; }`,
             };
         case 'pct':
-        case 'pct1':
+        case 'pct1': {
+            const scaleExpr = pctMultiply ? '(params.value * 100)' : 'params.value';
             return {
-                _js_: "function(params) { return params.name + ': ' + (params.value * 100).toFixed(1) + '%'; }",
+                _js_: `function(params) { return params.name + ': ' + ${scaleExpr}.toFixed(1) + '%'; }`,
             };
-        case 'pct0':
+        }
+        case 'pct0': {
+            const scaleExpr = pctMultiply ? '(params.value * 100)' : 'params.value';
             return {
-                _js_: "function(params) { return params.name + ': ' + (params.value * 100).toFixed(0) + '%'; }",
+                _js_: `function(params) { return params.name + ': ' + ${scaleExpr}.toFixed(0) + '%'; }`,
             };
+        }
         case 'num0':
             return { _js_: "function(params) { return params.name + ': ' + params.value.toLocaleString(); }" };
         case 'num1':
@@ -107,8 +111,9 @@ export function buildFunnelOptions(spec) {
     const sampleValue = funnelData[0]?.value ?? 0;
     const valueFormat = spec.format ?? inferFormat(valueField, sampleValue);
     const currency = resolveCurrency(spec.currency);
+    const pctMultiply = shouldPctMultiply(valueFormat, funnelData.map((d) => d.value));
     // Get JavaScript formatter
-    const formatter = getFunnelFormatterJs(valueFormat, currency.symbol, currency.locale);
+    const formatter = getFunnelFormatterJs(valueFormat, currency.symbol, currency.locale, pctMultiply);
     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, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, resolveCurrency, shouldPctMultiply } 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.
@@ -38,7 +38,7 @@ function parseFormattedValue(value) {
  * @param currencySymbol - Symbol to use for currency formats
  * @param locale - Locale for number formatting (defaults to 'en-US')
  */
-function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
+function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US', pctMultiply = true) {
     if (fmt === null || fmt === undefined) {
         return null;
     }
@@ -80,13 +80,14 @@ function getHeatmapLabelFormatter(fmt, currencySymbol = '$', locale = 'en-US') {
     // Format-specific formatters (with null checks)
     const sym = JSON.stringify(currencySymbol);
     const locStr = JSON.stringify(locale);
+    const pctExpr = pctMultiply ? '(v * 100)' : 'v';
     const formatExprs = {
         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) + '%'",
+        pct: `${pctExpr}.toFixed(1) + '%'`,
+        pct0: `${pctExpr}.toFixed(0) + '%'`,
+        pct1: `${pctExpr}.toFixed(1) + '%'`,
         num0: "v.toLocaleString()",
         num1: "v.toFixed(1)",
         num0k: "(v/1000).toFixed(0) + 'k'",
@@ -160,7 +161,8 @@ export function buildHeatmapOptions(spec) {
     const sampleValue = values[0] ?? 0;
     const valueFormat = spec.format ?? inferFormat('value', sampleValue);
     const currency = resolveCurrency(spec.currency);
-    const labelFormatter = getHeatmapLabelFormatter(valueFormat, currency.symbol, currency.locale);
+    const pctMultiply = shouldPctMultiply(valueFormat, values);
+    const labelFormatter = getHeatmapLabelFormatter(valueFormat, currency.symbol, currency.locale, pctMultiply);
     // Build label config
     const labelConfig = { show: true, color: colors.text };
     if (labelFormatter) {

package/dist/charts/line.js

@@ -4,7 +4,8 @@
 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, resolveCurrency } from '../core/formatting.js';
+import { inferAxisType } from '../core/formatting.js';
+import { buildValueAxisFormatContext, buildXAxisLabelConfig, applyValueAxisRange, } from '../core/chart-helpers.js';
 /**
  * Build ECharts options for a line chart
  */
@@ -18,32 +19,15 @@ export function buildLineOptions(spec) {
     const yKeys = Array.isArray(y) ? y : [y];
     const categories = data.map((d) => d[x]);
     const palette = getPaletteWithCustom(theme, spec.customTheme);
-    // Infer format for value axis based on first y field name
-    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 currency = resolveCurrency(spec.currency);
-    const axisFormatter = getAxisFormatterJs(valueFormat, currency.symbol, currency.locale);
+    // Resolve value-axis format/currency/formatters
+    const { axisFormatter } = buildValueAxisFormatContext(spec, data, yKeys);
     // Detect x-axis type: time, value, or category
     // User can override with xAxisType in spec
     const xAxisType = spec.xAxisType ?? inferAxisType(categories);
     // More right margin needed for end labels on multi-series
     const hasEndLabels = yKeys.length > 1;
     // Get axis label config based on axis type
-    const xAxisLabelConfig = xAxisType === 'category'
-        ? { interval: 0, rotate: 45, overflow: 'truncate', ellipsis: '...', width: 100 }
-        : xAxisType === 'time'
-            ? {
-                hideOverlap: true,
-                formatter: {
-                    _js_: `function(value) {
-            var d = new Date(value);
-            var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-            return months[d.getMonth()] + ' ' + d.getDate();
-          }`,
-                },
-            }
-            : { hideOverlap: true };
+    const xAxisLabelConfig = buildXAxisLabelConfig(xAxisType);
     const option = {
         backgroundColor: 'transparent',
         animation: false,
@@ -86,12 +70,7 @@ export function buildLineOptions(spec) {
         series: [],
     };
     // Apply yMin/yMax
-    if (spec.yMin !== undefined) {
-        option.yAxis.min = spec.yMin;
-    }
-    if (spec.yMax !== undefined) {
-        option.yAxis.max = spec.yMax;
-    }
+    applyValueAxisRange(option.yAxis, spec);
     // Build series
     for (let i = 0; i < yKeys.length; i++) {
         const key = yKeys[i];

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, formatValue, resolveCurrency } from '../core/formatting.js';
+import { inferFormat, getAxisFormatterJs, formatValue, resolveCurrency, shouldPctMultiply, collectNumericFieldValues, } from '../core/formatting.js';
 import { buildPointLabelConfig, groupDataBySeries, buildSeriesLegend } from '../core/chart-helpers.js';
 /** Scatter point opacity */
 const SCATTER_OPACITY = 0.75;
@@ -38,8 +38,10 @@ export function buildScatterOptions(spec) {
     const xFormat = spec.xFormat ?? inferFormat(xField, xSample);
     const yFormat = spec.yFormat ?? inferFormat(yField, ySample);
     const currency = resolveCurrency(spec.currency);
-    const xAxisFormatter = getAxisFormatterJs(xFormat, currency.symbol, currency.locale);
-    const yAxisFormatter = getAxisFormatterJs(yFormat, currency.symbol, currency.locale);
+    const xPctMultiply = shouldPctMultiply(xFormat, collectNumericFieldValues(data, [xField]));
+    const yPctMultiply = shouldPctMultiply(yFormat, collectNumericFieldValues(data, [yField]));
+    const xAxisFormatter = getAxisFormatterJs(xFormat, currency.symbol, currency.locale, xPctMultiply);
+    const yAxisFormatter = getAxisFormatterJs(yFormat, currency.symbol, currency.locale, yPctMultiply);
     // Label config for persistent point labels
     const labelConfig = showLabels && labelField
         ? buildPointLabelConfig(SCATTER_LABEL_INDEX, colors)
@@ -77,8 +79,8 @@ export function buildScatterOptions(spec) {
         seriesList = [seriesObj];
     }
     // 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 xFormatExpr = formatValue(xFormat, currency.symbol, currency.locale, xPctMultiply);
+    const yFormatExpr = formatValue(yFormat, currency.symbol, currency.locale, yPctMultiply);
     const tooltipFormatterJs = `function(params) {
     var d = params.value || params.data;
     var result = '';