Auto size won't work in multi subplot graph

📊 Plotly Python
1

I have created python dash app, it has 2 sub plots in single dcc.Graph. I created JS script to force app go full screen, zoom out when user interact with web app.

Issue: when it go full screen , there is space that looks like padding on left side of graph appears. How to remove it ?
This issue does not appear if i use only 1 sub plot, if 2 sub plots created , issue is coming.

image
image1892×687 91.5 KB

Kindly help,

My Full screen script Loader.JS present in Asset folder. ( Needed to force user go full screen when interacting app):

document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen().then(() => {
                document.documentElement.style.transform = 'scale(0.8)';
                document.documentElement.style.transformOrigin = '0 0';
                document.documentElement.style.width = '125%';
                document.documentElement.style.height = '125%';
                document.documentElement.style.overflowX = 'hidden';
                document.documentElement.style.overflowY = 'auto';
            });
        }
    });
});

My python code which is not working:


layout = dbc.Container([
    dbc.Row([
        # Graph Row

        dcc.Tabs(children=[

            dcc.Tab(label='Quality', style={'padding': '5px'}, selected_style={'padding': '5px', 'fontWeight': 'bold', 'backgroundColor': '#446e9b', 'color': '#FFFFFF'},
                    children=[
                dbc.Row([
                    dbc.Col([
                        dcc.Graph(id='linePlot1_FM3TP', figure=blank_fig(), style={
                            'height': 500}),
                        dcc.Interval(
                            id='linePlot1_FM3TP-update', interval=3600000, n_intervals=0),

                    ], width=12),  # width=12
                ]),
            ]),
        ])])])


@app.callback(  # DDL selection
    [Output('linePlot1_FM3TP', 'figure'),
     Output('error_message1_FM3TP', 'children')],
    [
    Input('linePlot1_FM3TP-update', 'n_intervals'),
     Input('dtPicker1_FM3TP', 'date'),
     Input('dtPicker2_FM3TP', 'date')
     ]
    # prevent_initial_call=True
)
def update_graph(n,start_date, end_date):
    
    try:
    
        d1 = datetime.strptime(start_date, "%Y-%m-%d")
        d2 = datetime.strptime(end_date, "%Y-%m-%d")
        diff = relativedelta.relativedelta(d2, d1)
        
        if diff.years < 0 or diff.months < 0 or diff.days < 0:
            raise Exception("To date cannot be less than From date!")
        
        
        
        df = pd.DataFrame()
        if diff.years == 0 and diff.months == 0 and diff.days == 0:
            #print("HOURS DIFF")
            start_date = str(start_date)+" 00:00:00"
            end_date = str(end_date)+" 23:59:59"
            sqlquery1=f""
            #print(sqlquery1)
            df = pd.read_sql_query(sqlquery1, engine)
            dateColName=_dateColumnOfHourTbl
        else:
            #print("DATE DIFF")
            
            if d2.date() == date.today():
                dayTbl_startDate,dayTbl_endDate,hourTbl_startDate,hourTbl_endDate=getDayToHourTblTime(start_date,end_date)
                
                #dayCalc
                daySql=f""
                
                dayDF = pd.read_sql_query(daySql, engine)
                
                
                
                hourSql=f""
               
                hourDF = pd.read_sql_query(hourSql, engine)
                
               
                    
                #creating new row for Day Table from hour table values (LEFT SIDE DAY: RIGHT SIDE HOUR)
                rowX = {_dateColumnOfDayTbl: hourDF[_dateColumnOfHourTbl].max(),_finess: hourDF[_finess].mean(),_quality: hourDF[_quality].mean()} 
                
                dayDF = pd.concat([dayDF, pd.DataFrame([rowX])], ignore_index=True) #appending to day tbl
                df=dayDF 
                dateColName =_dateColumnOfDayTbl
                
            else:
                start_date = str(start_date)+" 00:00:00"
                end_date = str(end_date)+" 23:59:59"
                sqlquery1=f""
               
                df = pd.read_sql_query(sqlquery1, engine)
                dateColName =_dateColumnOfDayTbl
        
       
        fig = make_subplots(
            rows=1, cols=2, subplot_titles=("Param 1 (%)", "Param 2 (Cm<sup>2</sup>/g)"),
        )
        
        if df.empty:
            raise Exception("DataFrame is empty!")
        
         
        
        
        # Add traces
        fig.add_trace(go.Scatter(x=df[dateColName], y=df[_finess]), row=1, col=1)
        fig.add_trace(go.Scatter(x=df[dateColName], y=df[_quality]), row=1, col=2)
       

        # Update xaxis properties
        fig.update_xaxes(showgrid=False,title_text="Time",  row=1, col=1)
        fig.update_xaxes(showgrid=False,title_text="Time",  row=1, col=2)
        

        # Update yaxis properties
        fig.update_yaxes(showgrid=False, row=1, col=1)
        fig.update_yaxes(showgrid=False,row=1, col=2)
       

        # Update title and height
        fig.update_layout( 
                         
                          showlegend=False,
                          
                          margin=dict(
                                l=0,
                                r=0,
                                b=0,
                                t=30,
                                pad=0),
                          #modebar_remove=("lasso2d", "autoscale", "select","select2d", "lasso2d", "autoScale2d"),
                          paper_bgcolor='#E5ECF6',
                          )
        
        return fig,False
    
    except Exception as e: 
        raise
        #print("Exception 1")
        fig=blank_fig()
        if str(e) == 'To date cannot be less than From date!':
            err = error_generator(str(e))
        else:
            err = error_generator('Data not found!')
        return fig,err