enable labels on separate line for horizontal bar charts

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.

Bắt đầu bằng cách theo dõi việc kết xuất trục và nhãn vạch chia của biểu đồ thanh ngang trong plotly.js, sử dụng hành vi ticklabelposition="inside above" được yêu cầu làm mục tiêu. So sánh các giải pháp tạm thời hiện có bằng subplot và JavaScript với ví dụ đính kèm. Được xem là hoàn tất khi các nhãn dài được kết xuất trên một dòng riêng đối với biểu đồ thanh ngang hẹp mà không gặp các vấn đề đã báo cáo về bộ nhớ, vị trí, đường lưới hoặc phản chiếu trục.