Horizontal legend entrywidth does not adjust to font size on initial render
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Accessibilité débutants
- 38/100
- Type d'issue
- Bug
- Clarté
- Plutôt claire
- Activité
- À l'abandon
- Stack technique
- javascript, react
- Domaine
- data-visualization, frontend
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.
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.
- Langage dominant
- JavaScript
- Étoiles
- 1.1k
- Forks
- 138
- Merge moyen
- 3 j 2 h
- PR mergées (30 j)
- 4
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.
Autres issues de plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Difficulté 3/5 1-2 jours Accessibilité débutants 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Difficulté 3/5 1-2 jours Accessibilité débutants 65/100
plotly/react-plotly.js#380 · 7 commentaires ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 48/100
plotly/react-plotly.js#358 · 1 commentaire ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 35/100
plotly/react-plotly.js#354 ·
-
Difficulté 3/5 1-2 jours Accessibilité débutants 30/100
plotly/react-plotly.js#353 · 1 commentaire ·