diff --git a/draftlogs/7768_fix.md b/draftlogs/7768_fix.md new file mode 100644 index 00000000000..39ccc08c057 --- /dev/null +++ b/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)] diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js index 38a8a7a8909..4a7aa24624b 100644 --- a/src/plots/cartesian/axes.js +++ b/src/plots/cartesian/axes.js @@ -2175,9 +2175,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) @@ -2192,27 +2189,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); diff --git a/test/jasmine/tests/axes_test.js b/test/jasmine/tests/axes_test.js index 3d1e962312f..755e1747a28 100644 --- a/test/jasmine/tests/axes_test.js +++ b/test/jasmine/tests/axes_test.js @@ -3627,6 +3627,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',