Annotations can overflow out of the chart

[marthacryan]

Minimal example of this:

<div id="graph" />
<script src="https://cdn.plot.ly/plotly-3.1.2.min.js"></script>
<script>
var layout = {
  annotations: [{
    "text": "No data is available to display. No data is available to display. No data is available to display. No data is available to display. No data is available to display. ",
    "font": {"size": 20}
  }]
};

Plotly.newPlot('graph', {
  'config': {},
  'data': [],
  'layout': layout
})
</script>

Ideally this text would wrap so that it fits on the page

[marthacryan]

Codepen: https://codepen.io/marthacryan/pen/PwZeWoY?editors=1000

[camdecoster]

Per the schema, the width of the annotation can be set with the width attribute. But, it's limited and provides no means to automatically wrap the text.

Sets an explicit width for the text box. null (default) lets the text set the box width. Wider text will be clipped. There is no automatic wrapping; use <br> to start a new line.

For now, I think that you'll have to detect the size of the chart and adjust the message width/font size accordingly.

function handleResize() {
  const gd = document.getElementById("graph-div");
  const { width } = gd.getBoundingClientRect();
  const fontSize = ...; // Your calc here
  
  Plotly.relayout(gd, "annotations[0].font.size", fontSize);
}

window.addEventListener('resize', handleResize);

Text elements in SVG don't seem to do well with automatic wrapping, but I think that it would be a useful feature to have. It's worth noting that this is related to #382.