Description
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;
`