Plotly graphs written in python to be responsive in React

plotly.js
1
  • I am rendering plotly graphs written in python on the front-end in a React app.
  • The graphs are not responsive when changing screen width

Here is my config in React

export const LinePlot: FC<{
  data: Data[] | PlotlyDataModel[];
  layout?: Partial<Layout>;
}> = ({ data, layout }) => (
  <Plot
    data={data as Data[]}
    debug
    layout={{
      ...layout,
      autosize: true,
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
    }}
    useResizeHandler={true}
    config={{
      // responsive: true,
      displayModeBar: false,
    }}
  />
);

I have tried the following solution:

Responsive fluid layout
Build responsive chart in React with Plotly

These solutions have not worked and want to know what I am missing? The graphs are fixed and maintaining the styles in Python which is desired but need to be responsive in the UI.

2

Hello @Miriam-Z
How do you obtain the plots in python to renderer in react frontend? I have a dash app and i need to send the plots to a frontend with react. Thanks