Continuously zooming in starts throwing errors at some point

[GlennMatthys]

Example: https://jsfiddle.net/0rxsx2f9/1/

When continuously zooming in, at some point this error is thrown on the console:
plotly-latest.js:117495 Uncaught RangeError: toFixed() digits argument must be between 0 and 100

It doesn't happen all the time. Usually between 10 to 20 zooms the error starts occurring, I haven't been able to pin down the exact conditions. Once the error occurs, zoom behavior becomes erratic until you reset the graph.

Full trace:

plotly-latest.js:117495 Uncaught RangeError: toFixed() digits argument must be between 0 and 100
    at Number.toFixed (<anonymous>)
    at formatTime (plotly-latest.js:117495)
    at Object.exports.formatDate (plotly-latest.js:117532)
    at formatDate (plotly-latest.js:130858)
    at Object.axes.tickText (plotly-latest.js:130789)
    at Object.calcTicks (plotly-latest.js:130404)
    at Object.axes.doTicksSingle (plotly-latest.js:131423)
    at plotly-latest.js:131377
    at Object.lib.syncOrAsync (plotly-latest.js:119125)
    at Object.axes.doTicks (plotly-latest.js:131373)
formatTime @ plotly-latest.js:117495
exports.formatDate @ plotly-latest.js:117532
formatDate @ plotly-latest.js:130858
axes.tickText @ plotly-latest.js:130789
calcTicks @ plotly-latest.js:130404
axes.doTicksSingle @ plotly-latest.js:131423
(anonymous) @ plotly-latest.js:131377
lib.syncOrAsync @ plotly-latest.js:119125
axes.doTicks @ plotly-latest.js:131373
exports.doTicksRelayout @ plotly-latest.js:128394
(anonymous) @ plotly-latest.js:125381
lib.syncOrAsync @ plotly-latest.js:119125
relayout @ plotly-latest.js:125400
exports.call @ plotly-latest.js:153116
(anonymous) @ plotly-latest.js:133760
lib.syncOrAsync @ plotly-latest.js:119125
dragTail @ plotly-latest.js:133758
zoomDone @ plotly-latest.js:133434
onDone @ plotly-latest.js:102144

[etpinard]

Thanks for the report.

To help us out a little bit more:

• could you tell us what browser you are using?
• In your fiddle, could you run

const div = document.getElementById('graph');
console.log(div.layout.xaxis.range)

after you first start noticing the error message? This will us how small the x-axis range needs to be to notice this bug.

Thank you very much.

[GlennMatthys]

could you tell us what browser you are using?

Google Chrome Version 66.0.3359.181 (Official Build) (64-bit) on Windows 10 1803

In your fiddle, could you run ...

Updated fiddle: The error started occuring at this X axis range: ["1970-01-01 01:00:01.2784", "1970-01-01 01:00:01.2785"]

[etpinard]

Thanks very much @GlennMatthys

There's no need to zoom in to notice the bug, setting xaxis.range to that value gives spits an error as well: https://jsfiddle.net/0rxsx2f9/4/

[alexcjohnson]

Ah good catch - this happens when the tick spacing is too small for us to display adjacent ticks differently at all. The maximum resolution we can display is 0.1 ms, and at that zoom level you're asking for ticks at 0.02 ms spacing.

It'll be easy to stop this from erroring - the culprit is:

plotly.js/src/plots/cartesian/axes.js

Line 787 in 5ccc83d

ax._tickround = Math.max(tick0len, tick1len) - 20;

Where both the canonical tick and its neighbor are '2000-01-01' so the result is -10. We just need to fall back on max resolution (ax._tickround = 4) if the two strings are identical (tick0str === tick1str after we break that out of the tick1len calculation).

But even after we stop this throwing an error neighboring ticks will still be identical. Providing more resolution here would be a separate and very difficult issue.

[GlennMatthys]

In our case millisecond resolution is more than enough.

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson