enable labels on separate line for horizontal bar charts
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 18.3k
- 派生
- 2k
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 28
描述
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.
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先跟踪 plotly.js 中水平条形图的坐标轴和刻度标签渲染,以请求的 ticklabelposition="inside above" 行为为目标。将现有的 subplot 和 JavaScript 变通方案与附带示例进行比较。当窄水平条形图中的长标签能够渲染在单独一行上,且不存在已报告的内存、定位、网格线或坐标轴镜像问题时,即可视为完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript
- 领域
- data-visualization
- Issue 类型
- 功能
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100