enable labels on separate line for horizontal bar charts
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 18.3k
- Forks
- 2k
- Merge medio
- 2 d 12 h
- PR fusionados (30 d)
- 28
Descripción
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.
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Empieza rastreando el renderizado del eje y de las etiquetas de las marcas de los gráficos de barras horizontales en plotly.js, usando como objetivo el comportamiento solicitado ticklabelposition="inside above". Compara las soluciones alternativas existentes de subplot y JavaScript con el ejemplo adjunto. Se considera completado cuando las etiquetas largas se renderizan en una línea separada para gráficos de barras horizontales estrechos, sin los problemas de memoria, posicionamiento, líneas de cuadrícula o reflejo del eje indicados.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript
- Área
- data-visualization
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100