Plotly.js: Annotations position bug

[tim-sauchuk]

I have found that about 60-70% of the time when I load up a plot via Plotly Python Online, an annotation is positioned to the left of the x-position I set. However, if I reload the page enough times, the annotation will eventually move to the correct position.

[alexcjohnson]

@tim-sauchuk can you share an example of a plot where this happens?

[alexcjohnson]

Update: we've confirmed the issue in a private dashboard hosted on plot.ly. I'm still working on reproducing on codepen, as the bug depends on using custom fonts that are not already available on the user's system.

The problem is that there are two annotations that are supposed to align their left edges, but they don't always do that. And the root cause is that the browser claims to know how big the text is that goes in the annotation, but it doesn't actually know; once it really loads the font, the text is (in this case) a bit bigger. You can see that if I give the annotations a bgcolor which shows the size we were told (by getBoundingClientRect) the text would fit into:

I'm not really sure how to fix this for all cases; we've encountered this problem before and the only solution that has worked is to wait a little while and do a complete redraw of all text items on the plot (and because of automargins, this really means redrawing the entire plot most of the time).

However, to fix it for this particular dashboard - since these annotations don't affect margins and have no bgcolor - we should be able to ensure they're always drawn using the correct text-anchor="start". I'm really not sure why currently some of the annotations are drawn with text-anchor="middle", they're all correctly set with xanchor: 'left', which should ensure text-anchor="start". If we fix that part, the size will have no bearing on their relative alignment.

[alexcjohnson]

Here it is in a codepen: https://codepen.io/alexcjohnson/pen/mQXpKK?editors=1000
On first load of the page, the alignment is usually - but not always - incorrect. If you then click "run" up top to rerun the code without reloading the page, it will look correct. Thanks for the report @tim-sauchuk! We will at least be able to solve it for your case; finding a solution when you have a background or border may be a little harder.

[alexcjohnson]

Ooh maybe this will do it: https://github.com/bramstein/fontfaceobserver
I'm thinking the ideal would be to keep track of requested fonts during supplyDefaults, then before actually drawing anything wait for all of these fonts to be available. If they're not available in a reasonable amount of time, continue drawing but then redraw when they are all available.

[archmoj]

Good idea @alexcjohnson. The sooner we could set up fonts the better. I am curious to know what is the initial font size used to computed the width of the the text?

[alexcjohnson]

I am curious to know what is the initial font size used to computed the width of the the text?

I'm assuming it's whatever fallback font the system uses before the requested font is available.