enable labels on separate line for horizontal bar charts
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 18.3k
- Fork
- 2k
- Merge medio
- 2g 12h
- PR unite (30g)
- 28
Descrizione
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.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia tracciando il rendering dell’asse e delle etichette dei tick dei grafici a barre orizzontali in plotly.js, usando come obiettivo il comportamento richiesto ticklabelposition="inside above". Confronta le soluzioni alternative esistenti con subplot e JavaScript con l’esempio allegato. Il lavoro è completato quando le etichette lunghe vengono renderizzate su una riga separata per i grafici a barre orizzontali stretti, senza i problemi segnalati di memoria, posizionamento, linee della griglia o rispecchiamento dell’asse.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript
- Ambito
- data-visualization
- Tipo di issue
- Funzionalità
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100