enable labels on separate line for horizontal bar charts
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 18.3k
- Forks
- 2k
- Merge moyen
- 2 j 12 h
- PR mergées (30 j)
- 28
Description
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.
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par suivre le rendu de l’axe et des étiquettes de graduation des graphiques à barres horizontales dans plotly.js, en prenant comme cible le comportement demandé ticklabelposition="inside above". Comparez les solutions de contournement existantes avec subplot et JavaScript à l’exemple joint. Le travail est terminé lorsque les longues étiquettes sont rendues sur une ligne distincte pour les graphiques à barres horizontales étroits, sans les problèmes signalés de mémoire, de positionnement, de lignes de grille ou de mise en miroir de l’axe.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript
- Domaine
- data-visualization
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100