You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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%'}}
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 changestyle={{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;
`
The text was updated successfully, but these errors were encountered: