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