fix: only use compact notation if ticks span multiple magnitudes

gka · gka · commit f8ecd4aaa2f4 · 2025-05-27T22:16:38.000+02:00
diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
@@ -73,7 +73,7 @@
         locale: 'en-US',
         numberFormat: {
             style: 'decimal',
-            notation: 'compact',
+            // notation: 'compact',
             compactDisplay: 'short'
         },
         markerDotRadius: 3,
diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
@@ -89,9 +89,9 @@
               )
     );
 
-    let tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
+    const tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
 
-    let useTickFormat = $derived(
+    const useTickFormat = $derived(
         typeof tickFmt === 'function'
             ? tickFmt
             : plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
@@ -107,6 +107,10 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
+                            // use compact notation if range covers multipe magnitudes
+                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
+                                ? { notation: 'compact' }
+                                : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.x.percent ? 'percent' : 'decimal'
                         }).format(d)
diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
@@ -105,6 +105,10 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
+                            // use compact notation if range covers multipe magnitudes
+                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
+                                ? { notation: 'compact' }
+                                : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.y.percent ? 'percent' : 'decimal'
                         }).format(d)
