Redraw function seems to be broken

[andrei-ng]

Reported by @Ionizing in #141

I just migrated to the latest plotly.rs (v0.9.0) [...]

However, after the migration, I find something unexpected:

1. The height of the graph seems to be fixed to several px instead of 100% of browser window;
2. The redraw on resize function is broken, I have to refresh the page after the resize to get the graph rendered with new width.

Here are two HTML files: dos.zip

• the old one is produced by old plotly.rs with plotly.js of v2.2.1;
• the new one is produced by the latest plotly.rs with plotly.js of v2.12.1.

My machine:

• macOS 13.5.1 (x86_64)
• Chrome 127.0.6533.99 Official Build x86_64

[Ionizing]

It seems that the "responsive": true is missing in the latest plotly.rs. The redraw function will work if "config": {} is rewrote as "config": { "responsive": true }. This correction can be accomplished by setting

plot.set_configuration(Configuration::new().responsive(true))

However, the height of the plot is still fixed to some value and cannot fit the height of the window.

[Ionizing]

Finally get the redraw work by adding these lines to the tail of html:

function resizeGraph() {
  Plotly.relayout("plotly-html-element", {
    width: window.innerWidth,
    height: window.innerHeight
  });
}
window.addEventListener('resize', resizeGraph);
resizeGraph();

It means we re-implemented the responsive function to replace the original one, and the config: { responsive: true } is no longer needed.

[Ionizing]

I just added this function to templates/plot.html. I don't think it is an elegant patch but if it does solves the problem without breaking anything else, I'd like to open a PR. Improvements are welcome.

[rmburg]

[...]

However, the height of the plot is still fixed to some value and cannot fit the height of the window.

I managed to make it fit to the size of the window by using

plot.set_configuration(Configuration::default().responsive(true).fill_frame(true));

[Ionizing]

[...] However, the height of the plot is still fixed to some value and cannot fit the height of the window.

I managed to make it fit to the size of the window by using

plot.set_configuration(Configuration::default().responsive(true).fill_frame(true));

Great job! It resolves my problem.

@andrei-ng I think this issue can be closed. Maybe it's a good idea to mention this issue or add an example in the documentation in case someone need automatic redraw and window filling function.

[andrei-ng]

@andrei-ng I think this issue can be closed. Maybe it's a good idea to mention this issue or add an example in the documentation in case someone need automatic redraw and window filling function.

Agreed. Will close it when I add an example in the examples/book.

[andrei-ng]

Added the solution above to an example in the examples subdirectory in PR https://github.com/plotly/plotly.rs/pull/257