Plot not filling the height of the container/screen.

[jdbosser]

Hi! I am just getting started with plotly. I am using the example from the book. . I have modified the example to output an HTML file in out.html.
Here is the code

use plotly::common::Mode;
use plotly::{Plot, Scatter};

fn line_and_scatter_plot() {
    let trace1 = Scatter::new(vec![1, 2, 3, 4], vec![10, 15, 13, 17])
        .name("trace1")
        .mode(Mode::Markers);
    let trace2 = Scatter::new(vec![2, 3, 4, 5], vec![16, 5, 11, 9])
        .name("trace2")
        .mode(Mode::Lines);
    let trace3 = Scatter::new(vec![1, 2, 3, 4], vec![12, 9, 15, 12]).name("trace3");

    let mut plot = Plot::new();
    plot.add_trace(trace1);
    plot.add_trace(trace2);
    plot.add_trace(trace3);
    plot.write_html("out.html");
}

fn main() -> std::io::Result<()> {
    line_and_scatter_plot();
    Ok(())
}

Here is the Cargo.toml

[package]
name = "gp"
version = "0.1.0"
edition = "2021"

[dependencies]
plotly = "0.10.0"

This produces this result in chromium (Version 130.0.6723.69 (Official Build) snap (64-bit)), as seen in the screenshot.

It is rendered similarly in Firefox.

My problem is that I want it to extend to the whole height of the screen. I have tried to modify the plotly code to include

    // ....
    let mut plot = Plot::new();
    let c = plot.configuration(); 
    let c = c.clone().responsive(true);
    let c = c.autosizable(true);
   //....

as per suggestions in forums [1][2]
Yet, it did not scale as it should.

I found a comment suggesting to make sure that the parent is 100% . Indeed, modifying the inline CSS in the browser produces a correct plot. See the attached screenshot.

I have noticed that html, body, and the first div in the body all need this property set for it to work. Note that, I seem to need to resize the window or interact with the plot for the changes to take effect.

I am a bit skeptical though. I found no comments in this repository about people having this issue. I cannot imagine I am the first one, since I stumbled upon it as I was testing my first example. I rather assume I am doing something wrong. If so, can someone give me some guidance and/or update (or help me update) the docs? Alternatively, the behavior is intentional. In that case, would it be possible to include an option to opt out of the limited height?

If this truly is an error, then I have noticed that the fix should be to implement the styling in plot.html-template. . I can contribute with a PR if this is the right way to solve this issue.

Thank you for a nice crate! It seems well put together and I look very much forward to using it!

[andrei-ng]

Hi @jdbosser!

One way to solve it is by setting the Layout height, like below. Would that be sufficient for your use case?

use plotly::common::Mode;
use plotly::{common::Title, Layout, Plot, Scatter};

fn line_and_scatter_plot() {
    let trace1 = Scatter::new(vec![1, 2, 3, 4], vec![10, 15, 13, 17])
        .name("trace1")
        .mode(Mode::Markers);
    let trace2 = Scatter::new(vec![2, 3, 4, 5], vec![16, 5, 11, 9])
        .name("trace2")
        .mode(Mode::Lines);
    let trace3 = Scatter::new(vec![1, 2, 3, 4], vec![12, 9, 15, 12]).name("trace3");

    let l = Layout::new()
        .title(Title::with_text("my_plot"))
        .height(1200);
    let mut plot = Plot::new();
    plot.add_trace(trace1);
    plot.add_trace(trace2);
    plot.add_trace(trace3);
    plot.set_layout(l);
    plot.write_html("out.html");
}

[jdbosser]

This is definitely a solution! I will use it for development. Thank you!

More broadly though:

In this case, the plots would not scale with the size of the screen.

Since plotly is scaling with the width of the screen, and not the height, I interpret that this is intentional. Is this a correct interpretation?

If that is the case, you may close this issue.

Otherwise, given that you already have scaling with the width, I would suggest that plots are adaptive to the height as well. At least, I kind of expected them to be adaptive, hence I interpreted it as an error.

Are there any drawbacks associated with the fix I suggested to the template?

[andrei-ng]

@jdbosser Actually, sorry, there is a correct way, it escaped me when I wrote the first response. It was basically discussed here in #228

The correct way is to do plot.set_configuration(Configuration::default().responsive(true).fill_frame(true));

use plotly::common::Mode;
use plotly::{Plot, Scatter, Configuration};

fn line_and_scatter_plot() {
    let trace1 = Scatter::new(vec![1, 2, 3, 4], vec![10, 15, 13, 17])
        .name("trace1")
        .mode(Mode::Markers);
    let trace2 = Scatter::new(vec![2, 3, 4, 5], vec![16, 5, 11, 9])
        .name("trace2")
        .mode(Mode::Lines);
    let trace3 = Scatter::new(vec![1, 2, 3, 4], vec![12, 9, 15, 12]).name("trace3");

    let mut plot = Plot::new();
    plot.add_trace(trace1);
    plot.add_trace(trace2);
    plot.add_trace(trace3);
    plot.set_configuration(Configuration::default().responsive(true).fill_frame(true));
    plot.write_html("out.html");
}

In this case, the plots would not scale with the size of the screen.
Since plotly is scaling with the width of the screen, and not the height, I interpret that this is intentional. Is this a correct interpretation?

The above one liner should address your concerns.

Are there any drawbacks associated with the fix I suggested to the template?

Only one I can think of is if you have multiple plots in the same HTML file. Filling in the entire page with a single plot might not be the thing you want/expect, as you want to show multiple plots.

If the above is still not solving your issue, let's discuss further. If it is the solution you were looking for, feel free to close the issue.

[andrei-ng]

@jdbosser, feel free to reopen the issue if the the oneliner is not satisfactory for you.