Integrated dash-app (using django_plotly_dash) does not get enough space

Question

I am integrating a dash-app into django for the first time. I use django_plotly_dash for this.

I think I am doing it the standard way:

urls.py

from django.urls import path, include
from . import views

urlpatterns = [
    path('trial',views.trial,name='trial'),
]

views.py

from django.shortcuts import render
from django.http import HttpResponse
import my_first_dash_plotly_app.simple_dash_app
def trial(request):
    return render(request, 'my_first_dash_plotly_app/trial.html')

simple_dash_app.py

import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
from django_plotly_dash import DjangoDash
app = DjangoDash('SimpleExample1')


# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")


app.layout = html.Div(style={}, children=[


    dcc.Graph(
        id='example-graph-2',
        figure=fig
    )
])

trial.html

{%load plotly_dash%}

{%plotly_app name="SimpleExample1"%}

This is just the standard-example from the plotly/dash-introduction.

It works somehow but looks really ugly. You have to scroll to see the plot completely. If I remember correctly I have seen this behaviour before outside of the django-world.

Is there an easy fix? Should I file a bug-report on that or is it just me doing something completely wrong? I think this behaviour should not be default: The default should be that each graph gets the size it needs.

Answer 1

I had the same problem and I fixed it by adding ratio=1 into the plotly_app tag. In your case this would be:

{% plotly_app name="SimpleExample1" ratio=1 %}

The problem is that the child div of the tag has a height of 0. The ratio=1 fixes this problem.