enable labels on separate line for horizontal bar charts

[Lxstr]

This feature would make horizontal bar charts readable with long tick labels and narrow screens. Other libraries have this feature.

Suggested option: ticklabelposition="inside above".

Suggested output:

However, current subplot workaround fails due to memory heap size dramatically increasing with row numbers (100+). It's also challenging to get the label position and grid lines correct. Mirroring axes also not possible. https://dkane.net/2020/better-horizontal-bar-charts-with-plotly/ by @drkane

There is a javascript workaround I have seen however, I cannot get this to work on my dashapp. https://medium.com/@tbarrasso/plotly-tip-6-positioning-axis-titles-in-horizontal-bar-chart-56b0713f9745

  var yAxisLabels = [].slice.call(document.querySelectorAll('[class^="yaxislayer"] .ytick text, [class*=" yaxislayer"] .ytick text'))
  var bar = document.querySelector('.plot .barlayer .bars path')
  var barHeight = bar.getBBox().height
  var offset = 12

  for (var i = 0; i < yAxisLabels.length; i++) {
    var yAxisLabel = yAxisLabels[i];
    yAxisLabel.setAttribute('text-anchor', 'start')
    yAxisLabel.setAttribute('y', yAxisLabel.getAttribute('y') - (barHeight / 2) - offset)
  }
})```

Any input appreciated.

[Lxstr]

Currently solved in the plotly forums here https://community.plotly.com/t/labels-above-horizontal-bars-better-way-than-subplots/70693/5.

This uses annotations rather than subplots and appears more performant. It uses a loop however, so i'm not sure if that would be more optimised in an inbuilt option.