Shape label drawn way off-screen

plotly.js
1

I’m adding shapes to a plotly plot and I want to display a text inside the shapes.
The shapes appear in the plot as intended, but the labels are not visible.
The shapes are generated in a (typescript) function, here’s the code that should generate the label for each shape:

  label: {
      font: {
          color: 'white'
      },
      padding: 4,
      text: `${refCat} - ${dayType[1]}`,
      textangle: 0,
      textposition: 'middle center',
      xanchor: 'center',
      yanchor: 'bottom',
  },

Inspecting the source of the html result reveals that the shape labels are drawn with strange values
This is how the label shows up in the html source:

<text data-notex="1" class="shape-label-text" data-unformatted="jul-ma-0:0 - weekend" data-math="N" x="660.975" y="-156199" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(255, 255, 255); fill-opacity: 1; white-space: pre;" text-anchor="middle" transform="rotate(0,660.975,-156199)">jul-ma-0:0 - weekend</text>

as you can see, the values for y and transform(rotate()) are way off. causing the label to be invisible. If I change the values for y and rotate by hand in the (chrome) developer tools, the label becomes visible.
What’s going on here, Am I missing some essential property?

On closer inspection, I find that the svg layer with class=“layer-below” is really strangely dimensioned. While the outer svg element has normal dimensions, the layer-below has weird dimensions: 7761.38 x 156819. The lower edge of this layer is flush with the bottom of the plot area.