Plotly chart changes position after updating the chart. about nicegui HOT 10 CLOSED

There is a conflict in philosophies at play: in general, plotly plots determine their size from their parent container unless you set a manual height, while nicegui is structured so that elements like row don't specify a height and are sized to their content. The css height of the body element is not specified in a nicegui app, nor any of its children; I think this is an intentional design choice from nicegui, making it easy to create scrolling apps where the total height is determined by the content, but it makes it challenging to create single-page apps that fit responsively into the height of the browser window.

If no height can be determined from the parent, I think plotly sets a default height (450px?) but only during the draw - when the plot is cleared as part of the redraw, it reverts briefly to its natural height (which is 0 in this case).

One quick solution to your problem is to set a fixed height for your plot, like this:
(using class h-full does not work, because that translates to height: 100%;, relative to its parent, which has no height defined)

import plotly.graph_objects as go
from nicegui import ui
from random import random


fig = go.Figure()
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
plot = ui.plotly(fig).classes('w-full').style('height: 450px;')

def add_trace():
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[random(), random(), random()]))
    plot.update()

ui.button('Add trace', on_click=add_trace)

ui.run()

For an app I was working on that fills the height of the page, I had to add some global CSS, overriding the default styling of internal nicegui components:

import plotly.graph_objects as go
from nicegui import ui
from random import random

ui.add_head_html('''
    <style>
        #app {
            height: 100%;
            width: 100%;
        }

        main.q-page, div.nicegui-content {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex: 1 1 0;
        }

        div.plot-container.plotly, div.js-plotly-plot {
            height: 100%;
        }
    </style>
''')
                 
fig = go.Figure()
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
plot = ui.plotly(fig).classes('w-full flex-1')

def add_trace():
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[random(), random(), random()]))
    plot.update()

ui.button('Add trace', on_click=add_trace)

ui.run()

from nicegui.

I just created a draft PR #2957 to develop a solution. It's still work in progress.

from nicegui.

Thank you so much for reporting this issue, @drummerboy2543!

With your minimal reproduction I could narrow it down to PR #2516, which switched from Plotly.newPlot to Plotly.react. And I think this stale bug report explains the behavior: plotly/plotly.js#4856

@bmaranville @platinops, you do - by any chance - have an idea how we could work around this bug?

from nicegui.

I've had a similar issue while clicking on the trace in the plot legend. Sometimes the plot completely disappeared from the view. I worked around it by making the traces in the legend unclickable.

from nicegui.

Ok, that's very unfortunate. Of course we could require a fixed height for the Plotly element. But it worked out-of-the-box before PR #2516, using the default height of 450px.

A (hacky) solution might be adding

.js-plotly-plot {
  height: 450px;
}

to nicegui.css. I still think it is a Plotly bug (plotly/plotly.js#4856), but this way we wouldn't need to wait for it to get fixed.

from nicegui.

Agreed that the bug is still there.

from nicegui.

I just noticed that the Plotly element at https://nicegui.io/documentation/plotly#plotly_element is too large when using Plotly.react, even though h-40 is set:

The chart simply overflows the element, which has the correct height of 10rem (160px).

And my potential fix from above

.js-plotly-plot {
  height: 450px;
}

doesn't change anything.

Update: As soon as we resize the window, the chart jumps back into its element.

from nicegui.

I was about to revert PR #2516. But the size problem on https://nicegui.io/documentation/plotly#plotly_element persists. I bisected it and found commit 328fbab which seems to break the layout for the Plotly demo (given a reverted PR #2516).

from nicegui.

Thank you for taking the time for looking at this! Looking forward to the next release!

Is there anything you want me to test or validate this change on?

from nicegui.

@drummerboy2543 We tested manually and successfully ran all automated tests. So it's looking pretty good so far. But if you like, you can try the current main branch with your code to verify it doesn't break anything.

from nicegui.