Plotly.js: The annotation arrow isn't rendered properly on load

[fresheneesz]

Annotations seem to be missing the arrow head when the graph is first rendered. Strangely, once I either change the zoom, or click on one of the axes, the arrowhead changes to the correct display.

Here's what it looks like onload:

This is what it looks like after doing one of those actions I mentioned:

[etpinard]

Yikes.

Can you share a reproducible example via codepen / jsFiddle /jsBin to help us debug? Thanks.

[fresheneesz]

Here you go: http://codepen.io/anon/pen/XjakQy

[etpinard]

Strange. If the graph div is appended to the DOM before calling Plotly.newPlot, the arrow head is coloured properly as in http://codepen.io/etpinard/pen/vXajVP

[etpinard]

Also to note, http://codepen.io/anon/pen/XjakQy works perfectly fine in FF 49.

The bug persists in Google Chrome 53.0.2785.143.

[alexcjohnson]

Ha crazy - you can't call d3.select(node).style('stroke-width') or any other attribute for that matter before the element is part of the DOM. I guess it makes sense that d3 can't call getComputedStyle in this case (though apparently FF and Chrome disagree on whether it makes sense) even though node.style['stroke-width'] is available. Oh well, it was only a shortcut to read styles back anyway rather than just pass the style info in from above.