Dash viewport vertically very small

Dash Python
1

I have built a dash app and then integrated it within my overall Django project. The Dash app view window is coming out in a very small part i.e., only 20% of vertical screen is getting occupied by Dash app. Please help me with this.
Code for .py file under mydashapp folder of django project:

from dash import dcc, html, Input, Output
import dash
import plotly.express as px
import pandas as pd
from django_plotly_dash import DjangoDash

Load your data.csv into a DataFrame.

df = pd.read_csv(r’mypath.csv’)

df_categorical = pd.read_csv(r’mypath2.csv’)

app_correlation = DjangoDash(‘CorrelationApp’)

Prepare the dropdown options for the first graph

x_axis_options = [{‘label’: column, ‘value’: column} for column in df.columns if column != ‘Average Marks’]

Prepare the dropdown options for the second graph - for categorical variables

categorical_options = [{‘label’: col, ‘value’: col} for col in df_categorical.columns if col != ‘Average Marks’]

Define the full layout with elements for both graphs

app_correlation.layout = html.Div([

Elements for the first graph

html.H3(“Correlation Graph”),
dcc.Dropdown(
id=‘x-axis-dropdown’,
options=x_axis_options,
placeholder=“Select a variable for X-Axis”,
),
dcc.Graph(id=‘correlation-graph’),

Padding between the graphs

html.Div(style={‘height’: ‘50px’}),

Elements for the second graph

html.H3(“Categorical Analysis”),
dcc.Dropdown(
id=‘categorical-dropdown’,
options=categorical_options,
placeholder=“Select a categorical variable”,
),
dcc.Graph(id=‘categorical-graph’)
])

Callback to update the graph

@app_correlation.callback(
Output(‘correlation-graph’, ‘figure’),
[Input(‘x-axis-dropdown’, ‘value’)]
)
def update_graph(selected_y_axis):
# If a selection is made (i.e., it’s not None)
if selected_y_axis:
# Calculate the Pearson correlation coefficient
correlation_value = df[‘Average Marks’].corr(df[selected_y_axis])

    # Create the scatter plot with trendline
    fig = px.scatter(
        df,
        x='Average Marks',
        y=selected_y_axis,
        trendline="ols",  # Ordinary Least Squares regression line aka trendline
        title=f'Correlation between Average Marks and {selected_y_axis}'
    )
    
    # Add only one annotation for the correlation value (rounded to 2 decimal places)
    fig.update_layout(
        title=f"Correlation (r): {correlation_value:.2f}",  # Include correlation in title
        xaxis_title="Average Marks",
        yaxis_title=selected_y_axis
    )
    
    return fig
else:
    # Return an empty figure if no axis is selected
    return px.Figure()

New callback for the second graph - the box plot

@app_correlation.callback(
Output(‘categorical-graph’, ‘figure’),
[Input(‘categorical-dropdown’, ‘value’)]
)
def update_categorical_graph(selected_cat_var):
if selected_cat_var:
# Create the box plot
fig = px.box(
df_categorical,
x=‘Average Marks’,
y=selected_cat_var,
color=selected_cat_var,
title=f’Distribution of Average Marks by {selected_cat_var}’
)

    mean_values = df_categorical.groupby(selected_cat_var)['Average Marks'].mean()
    for cat, mean in mean_values.iteritems():
        fig.add_annotation(
            x=mean,
            y=cat,
            text=f"Mean: {mean:.2f}",
            showarrow=False,
            yshift=10
        )
    
    return fig
else:
    # Return an empty figure if no categorical variable is selected
    return px.Figure()

Code from html file under templates folder:

{% extends ‘base.html’ %}
{% load static %}
{% block content %}

{% load plotly_dash %}

Correlation Analysis

{% plotly_app name="CorrelationApp" %}

{% endblock content %}