How to use the layout.autosize?

[lucas-viewup]

Good day, I'm having problem with the attribute autosize of layout property, I set to true but is not working as the docs says:

Note: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use style or className to set the dimensions of the element (i.e. using width: 100%; height: 100% or some similar values) and set useResizeHandler to true while setting layout.autosize to true and leaving layout.height and layout.width undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/

What I want is have a container that defines the area of the charts like I highlighted in this image:

[lucas-viewup]

Ok, I did solve this using className in plot component and setting height: 100% and width: 100%, maybe would be good have already a css inline when you set autosize, thats the expected behaviour when autosize is enabled.

[lucas-viewup]

I reopened this issue because when the page is loaded, the charts fills perfectly in the screen, but when I resize the window, It begins to scroll horizontally. I am using create-react-app just to test this and to help if we need to make a specific test.

[zipzapp]

Hey, I think I'm running into this issue too. Maybe I don't understand the expected behavior, but what I'm looking for is the chart width to be responsive to its parent. @lucas-viewup did you land on a solution that worked for you?

[LimmaPaulus]

@athaax @lucas-viewup
I also had problems with responsive width behavior. Solution suggested in docs didn't worked when used with FlexLayout-docking manager. I succeeded to solve the problem with react-sizeme

const PlotContainer = (props) => {
    return <Plot data={...}
                 layout={{
                     autosize: false,
                     width: this.props.size.width
                 }}/>
};

export default sizeMe()(PlotContainer)

[nicolaskruchten]

This CodePen shows how to follow the existing documentation in the Readme: https://codepen.io/nicolaskruchten/pen/ERgBZX

The documentation states:

To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use style or className to set the dimensions of the element (i.e. using width: 100%; height: 100% or some similar values) and set useResizeHandler to true while setting layout.autosize to true and leaving layout.height and layout.width undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/

So that's exactly what this CodePen does, with the only caveat being that in order to demo a full-screen version I set CSS width/height on the parent div and the document itself also.

[LimmaPaulus]

Yes, but as documentation states, with useResizeHandler=true plot resizes only when whole window is resized because it reacts only to window.onresize-event. This is not enough if you have more dynamic layout, because parent of plot can change size independently of window.

[nicolaskruchten]

That's true. What would be a good way forward? A new prop that registers a callback or something to call resize for other events than window.resize?

[mohammedzamakhan]

Any updates?

[nicolaskruchten]

No updates at this time as I haven't gotten a lot of feedback from users about what would help here :)

[mohammedzamakhan]

I would suggest a method in the component, that can be fired from the Parent whenever the resize event occurs,

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('getAlert from Child');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

[mohammedzamakhan]

I actually was able to implement it without any changes in the library
https://codesandbox.io/s/18lxjp9ywl

I also have to have this implemented in my app, and see if this solutions covers all my requirements.

[ArcticTee]

@mohammedzamakhan
Could you please reupload the code? The Link is dead. Thanks

[mohammedzamakhan]

@ArcticTee Sorry I deleted that codesandbox example,

here is a working example https://codesandbox.io/s/35loxpjmq