plotly / plotly/react-plotly.js
Horizontal legend entrywidth does not adjust to font size on initial render
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 1.1k
- Forks
- 138
- Merge medio
- 3 d 2 h
- PR fusionados (30 d)
- 4
Descripción
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.
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
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
Comienza con la ruta de renderizado inicial del componente y el comportamiento del tamaño horizontal de la leyenda descrito en el ejemplo. Reproduce el gráfico con la orientación "h" y una fuente de leyenda de 24px, y compáralo después con el resultado tras cambiar el tamaño de la fuente; se considera terminado cuando los anchos de las entradas coinciden con la fuente configurada en el renderizado inicial.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react
- Área
- data-visualization, frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100