Plotly sometimes interpreting percent as pixels

[etowahadams]

In an attempt to make my scatter plot responsive, I set my width and heights to percents. I did not get the intended effect however. Looking at the elements, I noticed that sometimes, the percent values I defined were being used as pixels.

Here is how I set height and width:

<Plot
        data={data}
        style={{ width: '98%', height: '89%' }}
        layout={{
          title,
      }}
  />

You can see here that sometimes we have 98% and sometimes we have 98px.

Since I am dynamically generating charts, my current hunch is that if the chart container width is 0 when plotly is trying to render, then plotly uses the percents as pixels. If this is the case, then I will have to try something else, but I would like to first confirm that what Plotly is doing here is not unexpected.

I am using

    "plotly.js": "^1.54.1",
    "plotly.js-basic-dist": "^1.54.1",

and am importing Plotly in this way

import Plotly from 'plotly.js-basic-dist'
import createPlotlyComponent from 'react-plotly.js/factory'

Thanks

[alexcjohnson]

Hah funny timing - that exact issue was addressed (at least partially) today plotly/plotly.js#4925 and released in v1.54.3 - with this patch you'll get a default-sized graph (700 x 450 px) so if you really want to dynamically size your graph proportionally to its container you may need a more involved solution - see for example what dash_core_components does with ResizeDetector