demo code is not responsive

[kenchan13]

Hello. I modify react plotly.js demo code to make it responsive. It works when I changed the browser width but not the height. I check html code, height always be 450px no matter how I change style={{height: '100%', width: '100%'}}

<div class="user-select-none svg-container" style="position: relative; width: 100%; height: 450px;" >

env: "plotly.js": "^1.58.4", "plotly.js-basic-dist": "^1.58.4", "react": "^17.0.1", "react-dom": "^17.0.1", "react-plotly.js": "^2.5.1", "react-scripts": "4.0.1",

There is my code `// import './App.css'; import React from 'react'

import Plotly from "plotly.js-basic-dist"; import createPlotlyComponent from "react-plotly.js/factory"; const Plot = createPlotlyComponent(Plotly);

class App extends React.Component { render() { return ( <Plot config={{ displayModeBar: false, responsive: true }} data={[ { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+markers', marker: {color: 'red'}, }, {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]}, ]} layout={ {autosize: true, title: 'A Fancy Plot'} } useResizeHandler={true} style={{height: '100%', width: '100%'}} /> ); } }

export default App; `

[yustiks]

I have the same problem with width

[yustiks]

I added the 'width' to the 'style':

        var graphDiv = document.getElementById('div-plot')
        graphDiv['style']['width'] = '88vw';