Horizontal legend entrywidth does not adjust to font size on initial render

Abierto
  • ¿Algo no está bien?
#312 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react
Área
data-visualization, frontend

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.

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}
  />)

}
`
image

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

image

Any guidance or help would be greatly appreciated.

Lenguaje dominante
JavaScript
Estrellas
1.1k
Forks
138
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de plotly/react-plotly.js

Todos los issues de plotly/react-plotly.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.