plotly / plotly/react-plotly.js
Horizontal legend entrywidth does not adjust to font size on initial render
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 1.1k
- Forks
- 138
- Merge moyen
- 3 j 2 h
- PR mergées (30 j)
- 4
Description
When initially rendering the component, when set to orientation "h", the legend entries do not adjust their size correctly based on the font size set in the layout.
Example:
`
export const Test = (): ReactElement => {
const data : Data[] =[
{
x: [1, 2, 3],
y: [2, 6, 3],
name: "my example scatter chart",
type: 'scatter',
mode: 'lines+markers',
marker: {color: 'red'},
},
{type: 'bar', name:"my example bar chart", x: [1, 2, 3], y: [2, 5, 3]},
]
const layout = {
width: 1350,
height: 950,
hoverlabel: {
bgcolor: "#555555",
font: {
family: "Open Sans",
size: 14
}
},
legend: {
x: 0.25,
y: -0.35,
orientation: "h" as any,
font: {
family: 'Open Sans',
size: 24,
color: '#555555'
},
entrywidth:0,
},
xaxis: {
showline: false,
zeroline: false,
title: {
text: 'x',
font: {
family: 'Open Sans',
size: 14,
color: '#555555'
}
},
},
yaxis: {
showline: false,
zeroline: false,
title: {
text: 'y',
font: {
family: 'Open Sans',
size: 14,
color: '#555555'
}
}
}
}
return (<Plot
layout={layout}
data={data}
/>)
}
`

If I adjust the font size property of the layout object after the initial render, it corrects itself.

Any guidance or help would be greatly appreciated.
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
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 le chemin de rendu initial du composant et le comportement de dimensionnement horizontal de la légende décrit dans l’exemple. Reproduisez le graphique avec l’orientation "h" et une police de légende de 24px, puis comparez-le au résultat après avoir modifié la taille de la police ; le travail est terminé lorsque les largeurs des entrées correspondent à la police configurée lors du rendu initial.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react
- Domaine
- data-visualization, frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 38/100