plotly / react-plotly.js

A plotly.js React component from Plotly 📈
MIT License
1.01k stars 135 forks source link

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

Open Moocowmike opened 1 year ago

Moocowmike commented 1 year ago

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.

alexcjohnson commented 1 year ago

Hmph, I'm not able to reproduce this in plain plotly.js, but we've definitely seen situations where rendering is attempted before the font has loaded, so we measure the size of the text for a fallback font, then the size is wrong once the right font loads. Might need to investigate font loading detection again...