Plotly.js: Plotly.redraw / drawLabels performance

[blankclemens]

I came across the problem, that redrawing the plots (with new data) takes a lot of time. E.g. in the attached profile graph one single plot took around 40ms, where half of the time(!) is spent for drawAxes, or more precisely drawLabels.

Having half of the redraw time spent on doing labels? Seems quite inappropriate to me and I wonder if this can be speed up?

The problem is that it adds up quite a lot when having multiple plots at one page, just 10 plots and suddenly the redrawing process takes half a second.

Since the problem lies in drawLabels, it also doesn't help to reduce the data (doesn't matter much if 5 or 500 points are plotted).

Of course, better performances is everywhere nice, but looking at the profile I've got the feeling that drawLabels might be the best start to get some more.

Profile graph

[blankclemens]

A small hack if one just needs more performance: Removing fixLabelOverlaps saved 10-20ms and didn't change my output. Of course, some functionality will be gone, but I had no overlapping labels anyways. ;)

But of course, the problem is not solved with half the time - 20ms for a single plot are still way to much.

[viebel]

Any update on this annoying performance issue?

[etpinard]

PR https://github.com/plotly/plotly.js/pull/2487 has made some improvements. From https://github.com/plotly/plotly.js/pull/2487#issuecomment-376201070, here are a few more things we should do to help Axes.doTicks performance:

• optimize the number of positionLabels calls in Axes.doTicks (N.B. now called Axes.drawOne) which is called multiples time per axis
• speed up fixLabelOverlaps
• [x] find solution for https://github.com/plotly/plotly.js/issues/1988 done for most axes in: https://github.com/plotly/plotly.js/pull/4165

[Gurucharan]

Any update?
Performance of draw/resize multiple plots displaying in same page is too slow.

[etpinard]

PR https://github.com/plotly/plotly.js/pull/4165 (set to be released in 1.50.0) should help out a little bit: we removed a getBoundingClientRect call during all Axes.drawOne calls except when for multicategory axes and/or axes with a rangeslider and/or axis.automargin is turned on.

Moreover, copying from https://github.com/plotly/plotly.js/pull/4165#discussion_r321023210, PR #4165 opens up a way to improve performance in multicategory/rangeslider/automargin scenarios if ever we choose to do so:

https://github.com/plotly/plotly.js/blob/b5f0316f5c90e466a2a9009eeb876bee627e39c2/src/plots/cartesian/axes.js#L2053-L2067