Merge pull request #7768 from Hasnaathussain/fix-tick-formatting-exponential

fix(axes): format tick labels correctly for small numbers in exponential notation

Author: camdecoster

draftlogs/7768_fix.md

@@ -0,0 +1 @@
+ - Format tick labels correctly for small numbers in exponential notation [[#7768](https://github.com/plotly/plotly.js/pull/7768)], with thanks to @Hasnaathussain for the contribution!

src/plots/cartesian/axes.js

@@ -2214,9 +2214,6 @@ function numFormat(v, ax, fmtoverride, hover) {
 
     if(tickformat) return ax._numFormat(tickformat)(v).replace(/-/g, MINUS_SIGN);
 
-    // 'epsilon' - rounding increment
-    var e = Math.pow(10, -tickRound) / 2;
-
     // exponentFormat codes:
     // 'e' (1.2e+6, default)
     // 'E' (1.2E+6)
@@ -2231,27 +2228,27 @@ function numFormat(v, ax, fmtoverride, hover) {
     // take the sign out, put it back manually at the end
     // - makes cases easier
     v = Math.abs(v);
+
+    // 'epsilon' - rounding increment
+    const e = Math.pow(10, -tickRound) / 2;
     if(v < e) {
         // 0 is just 0, but may get exponent if it's the last tick
         v = '0';
         isNeg = false;
     } else {
-        v += e;
         // take out a common exponent, if any
         if(exponent) {
             v *= Math.pow(10, -exponent);
             tickRound += exponent;
         }
         // round the mantissa
-        if(tickRound === 0) v = String(Math.floor(v));
-        else if(tickRound < 0) {
+        if(tickRound === 0) {
             v = String(Math.round(v));
-            v = v.slice(0, Math.max(0, v.length + tickRound));
-            for(var i = tickRound; i < 0; i++) v += '0';
+        } else if(tickRound < 0) {
+            const roundingMagnitude = Math.pow(10, -tickRound);
+            v = String(Math.round(v / roundingMagnitude) * roundingMagnitude);
         } else {
-            v = String(v);
-            var dp = v.indexOf('.') + 1;
-            if(dp) v = v.slice(0, dp + tickRound).replace(/\.?0+$/, '');
+            v = v.toFixed(Math.min(20, tickRound)).replace(/\.?0+$/, '');
         }
         // insert appropriate decimal point and thousands separator
         v = Lib.numSeparate(v, ax._separators, separatethousands);

test/jasmine/tests/axes_test.js

@@ -3668,6 +3668,50 @@ describe('Test axes', function() {
             });
         });
 
+        it('formats tick labels correctly for small numbers in exponential notation', function() {
+            var textOut = mockCalc({
+                type: 'linear',
+                tickmode: 'linear',
+                exponentformat: 'none',
+                showexponent: 'all',
+                tick0: 0,
+                dtick: 1e-9,
+                range: [8.5e-9, 11.5e-9]
+            });
+
+            expect(textOut).toEqual([
+                '0.000000009', '0.00000001', '0.000000011'
+            ]);
+
+            textOut = mockCalc({
+                type: 'linear',
+                tickmode: 'linear',
+                exponentformat: 'none',
+                showexponent: 'all',
+                tick0: 0,
+                dtick: 1e-15,
+                range: [8.5e-15, 11.5e-15]
+            });
+
+            expect(textOut).toEqual([
+                '0.000000000000009', '0.00000000000001', '0.000000000000011'
+            ]);
+
+            textOut = mockCalc({
+                type: 'linear',
+                tickmode: 'linear',
+                exponentformat: 'e',
+                showexponent: 'all',
+                tick0: 0,
+                dtick: 1e-15,
+                range: [8.5e-15, 11.5e-15]
+            });
+
+            expect(textOut).toEqual([
+                '0.9e\u221214', '1e\u221214', '1.1e\u221214'
+            ]);
+        });
+
         it('provides a new date suffix whenever the suffix changes', function() {
             var ax = {
                 type: 'date',