Dashboard example graph sometimes extends past edge of graph area

[audreyfeldroy]

It happens, I believe, the first time I load it in the browser. Then when I reload it seems fine.

[Isaac-Flath]

The chart doesn’t know the size of the parent container, but gets cached so it works on reload. Not sure how to the fix.

We need a good python plotting solution for fasthtml somehow. I should probably test all the approaches on the FastHTML gallery to see if any of them work more robustly.

To recreate: go to another page on monsterui docs, do a page refresh, then navigate back to dashboard

[UX0l0l]

Franken UI recently added a charts feature recently, I'd say that seems like a good solution/quick fix, but I don't know how well it works for complex functions

[Isaac-Flath]

We've added (thanks to a community contribution) frankenui chart support. It does not seem to solve this particular issue. TBD on whether we're doing something wrong, or whether this is something upstream

[lucasvw]

@audreyfeldroy @Isaac-Flath

I also ran into this issue, and found a fix/workaround/hack.

Here is some code that shows the problem (running in Jupyter):

import pandas as pd
import numpy as np
from datetime import datetime
import plotly.express as px

from fasthtml.common import *
from monsterui.all import *
from fasthtml.jupyter import JupyUvi, HTMX

def create_timeseries_figure():
        dates = pd.date_range(start='2025-01-01', end='2025-08-01', freq="MS")
        values = np.random.rand(len(dates))
        series = pd.Series(values, index=dates, name='timeseries')

        fig = px.bar(series, x=series.index, y=series.name, template='plotly_white', barmode='group')
        fig.update_layout(
            paper_bgcolor='hsl(0, 0%, 95%)',
            plot_bgcolor='hsl(0, 0%, 95%)',
            autosize=True,
            showlegend=False,
            height=250,
            yaxis_title='',
            xaxis_title='',
        )

        return fig.to_html(**{'include_plotlyjs': True, 'full_html': False, 'config': {'displayModeBar': False}})

app, rt = fast_app(hdrs=[Theme.blue.headers()])
port = 1234
server = JupyUvi(app, port=port)

@app.get('/')
def temp():
    
    ret = Titled('Hello, Jupyter!!!',
                 Button('Click me', hx_get='/figs', hx_target='#fig-container', hx_swap='innerHTML'),
                 Container(id='fig-container', cls=ContainerT.sm)
    )
    return ret

@app.get('/figs')
def figs():
    fig1 = create_timeseries_figure()
    fig2 = create_timeseries_figure()
    return Grid(Card(Safe(fig1)), Card(Safe(fig2)))

HTMX(port=port, height=400)

And the fix/workaround would be to change the container in which the grid and cards will be placed like this:

Container(id='fig-container', cls=ContainerT.sm)(
                     Grid(*[Card()]*10, style="visibility: hidden"))

So a hidden grid with some cards in it..

I have no idea whether this has other side effects, but so far it seems to work without any issues for me.

On the side: Initially I injected some (LLM written) js code to the frontend that triggers a resize(), but that leads to flicker (which shiny python also suffers from by the way). Here is that code for reference:

custom_js = Script("""
document.addEventListener('DOMContentLoaded', function () {                   
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        // Check added nodes only
        mutation.addedNodes.forEach(node => {
          // We need to confirm the node is an element
          if (node.nodeType === Node.ELEMENT_NODE) {
            if (node.querySelector('.js-plotly-plot')) {
              const plotlyCharts = document.querySelectorAll('.js-plotly-plot');
              
              plotlyCharts.forEach(chart => {
                Plotly.Plots.resize(chart);
              });
            }
          }
        });
      }
    }
  });
  // Start observing the entire document
  observer.observe(document.documentElement, {
    childList: true,    // watch for added/removed child nodes
    subtree: true       // watch inside all descendants, not just direct children
  });
});
""")