How to adjust pyplot to screens

[Guilhermwn]

Question

Hello to everyone, firstly thank you for such an amazing GUI library.

I'm working on an app that allows users to create plots. The user inputs the data for the plot, and I process this data using pyplot. However, I'm having trouble with the placement of the plot on the screen. I want to achieve the same resizing effect that Streamlit has when plotting with pyplot, where the plot adjusts its size dynamically to fit the space, similar to how an image would resize.

The code i'm using to create and update the plot is in a class

def update_plot(self):
    with self.plot:
        self.ax.clear()
        
        if self.graph_type == self.graph_options[0]:
            self.ax.plot(
                self.x_axes, 
                self.y_axes, 
                color = self.color_map[self.data_color],
                linestyle = self.line_style_map[self.line_style]
                )
            
        elif self.graph_type == self.graph_options[1]:
            self.ax.scatter(
                self.x_axes, 
                self.y_axes,
                color = self.color_map[self.data_color],
                marker = self.markers_style_map[self.markers_style]
                )
        
        self.ax.set_xlabel(self.x_label)
        self.ax.set_ylabel(self.y_label)
        self.ax.set_title(self.graph_title)
    ui.update(self.plot)

And this is the code calling the class and showing the plot on nicegui:

with ui.element('div').classes('w-full flex flex-col items-center'): 
    with ui.element('div').classes('w-full flex flex-col items-center my-5'):
        with ui.pyplot(close=False)as plot:
            pyplot_manager.set_pyplot(plot)
        
    with ui.element('div').classes('w-full flex flex-col items-center'):     
        with ui.row():
            ui.button('Baixar JPG')
            ui.button('Baixar PDF')

This is the result when open in a wide screen browser such as a notebook or pc, it is perfect

But this is the result on mobile, the plot is not resized to the screen properly

And this is the result i'm trying to achieve, that streamlit offers, as you can see the plot was kind of resized like an image to fit the space of the mobile screen

[falkoschindler]

Hi @Guilhermwn,

The plot looks fine to me, as it nicely fits the width of the mobile screen. The other elements are a bit narrow though. But I probably don't get what you're trying to achieve. 🤔

Apart from that, can you, please, try to create a minimum reproducible code example? This would allow us and the community to help more efficiently. Thanks!
Why is it important to provide a minimal reproducible example?

[Guilhermwn]

Hello @falkoschindler, sorry for the slow response.

this is simple code i created to show:

@ui.page('/testes')
def testes():
    # enabling dark mode to better view
    ui.dark_mode().enable()

    # custom component using ui.header
    header_layout()
    
    # using column in full width to display all content
    with ui.column().classes('w-full bg-red-200'):
        ui.markdown('# Space reserved for content').classes('text-black')
        
        # creating a div for the content of the matplotlib plot
        with ui.element('div').classes('w-full bg-green-200'):
            ui.markdown('### Original matplotlib plot inserted using ui.pyplot()').classes('text-black')

            # matplotlib plot initiated
            with ui.pyplot(close=False) as plot:
                ax = plot.fig.add_subplot()
                ax.plot(
                    [1,2,3,4], 
                    [1,2,3,4], 
                    color = 'green',
                    linestyle = '-.'
                    )

PC View

In the wide view using a PC, everything looks fine. The red border represents the column container, and the green border is the div for the plot container. There is sufficient space for the plot within the designated area.

Mobile View

However, on mobile devices, the plot does not respect the container's width. The following image shows the default zoom on mobile, with no zooming in or out applied. The plot appears to ignore the container's constraints, causing layout issues.

Minimal Zoom on Mobile

This screenshot shows the plot with the minimal zoom applied on mobile. The plot still exceeds the container's width.

Summary

The plot generated by ui.pyplot() appears to disregard the width constraints of its container on mobile devices, leading to an oversized display that disrupts the overall layout. I would appreciate any guidance or solutions to ensure the plot fits within the container on mobile devices.

[python-and-novella]

Before ui.pyplot changed,you could achieve it by other way like this:

from nicegui import ui
from matplotlib import pyplot
from lxml import etree
@ui.page('/')
def index():
    with ui.column().classes('w-full bg-red-200'):
        ui.markdown('# Space reserved for content').classes('text-black')
        with ui.element('div').classes('w-full bg-green-200'):
            ui.markdown('### Original matplotlib plot inserted using ui.pyplot()').classes('text-black')
            with ui.pyplot(close=False) as plot1:
                ax = plot1.fig.add_subplot()
                ax.plot(
                    [1,2,3,4], 
                    [1,2,3,4], 
                    color = 'green',
                    linestyle = '-.'
                    )
            def set_svg_size(plot: ui.pyplot=None, width :str='100%', height: str='100%') -> None:
                if plot is None:
                    pass
                else:
                    e = etree.fromstring(plot._props['innerHTML'].encode())
                    e.set('width', width)
                    e.set('height', height)
                    plot._props['innerHTML']=etree.tostring(e).decode()
                    plot.update()
            # way 1:
            # set svg's width and height to 100%.
            set_svg_size(plot1)
            # way 2:
            # save as file,and display it by imgage.
            # Before image,should hide pyplot.
            # Here just shows two ways,without hiding.
            plot1.fig.savefig('./plot.svg')
            #plot1.set_visibility(False)
            ui.image('./plot.svg')
ui.run()

[falkoschindler]

Ah, now I understand! The question is, how to automatically shrink ui.pyplot to its container width. Minimum reproduction:

with ui.card().classes('w-[400px]'):
    with ui.pyplot() as plot:
        plot.fig.gca().plot()

[Guilhermwn]

Thank you very much. In my next questions, I will try to make the question clearer and provide a better MRE

[falkoschindler]

Here's a workaround adding "width:100%;height:100%" to the inner HTML:

with ui.card().classes('w-[400px]'):
    with ui.pyplot() as plot:
        plot.fig.gca().plot()
    plot._props['innerHTML'] = plot._props['innerHTML'].replace('<svg', '<svg style="width:100%;height:100%"')
    plot.update()

But I think we can add these attributes by default so that the SVG automatically fills the size of the ui.pyplot element.

[falkoschindler]

Great idea, @Guilhermwn @moi90! I wasn't aware of this bug. Minimum reproduction:

with ui.card().classes('w-80'):
    with ui.matplotlib().figure as fig:
        fig.gca().plot([1, 2, 3], [1, 4, 3])

Would you like to create a pull request similar to PR #3289? 🙂

[evnchn]

Wait a moment, please.

Please don't straight-up follow the implementation in #3289.

Checking #3843, use this implementation instead: 7008177

[falkoschindler]

Great catch, @evnchn! Using default_classes is definitely the right way to add - well - default classes. 👍🏻

[moi90]

@falkoschindler I'm assuming that you wanted to `@ me instead of Guilhermwn.

But I see that @evnchn already worked on this: #4595

Thanks!

[falkoschindler]

@moi90 Oh, sorry, I accidentally picked the wrong GitHub handle.
Yes, the fix has already been implemented and released in version 2.14.1. 🏎️