Django_plotly_dash responsive

Dash Python
1

Hi,

I’m using django_plotly_dash for a webapp project but the plotly graph isn’t really responsive, so the view on mobile is terrible. I’m wondering is it possible to make it more responsive?

Below is my code.
test_plotly.py

import dash_core_components as dcc
import dash_html_components as html
from django_plotly_dash import DjangoDash
import plotly.graph_objects as go

app = DjangoDash('test_plotly',
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"}
    ]
)

xaxis = [50000,60000,70000,80000,90000,100000,120000,
                140000,160000,180000,200000,220000,240000,260000,280000, 300000]

yaxis = ['L1', 'L2','L3','L4','L5','L6','L7','L8','L9','L10','L11','L12','L13','L14','L15','L16']

fig2 = go.Figure(data = [go.Bar(name = 'Total', y = yaxis, x = xaxis, orientation='h')])

app.layout = html.Div(
    style={'backgroundColor':'white', 'fontFamily': ["Segoe UI",]}, 
    children=[
        html.Div([
            dcc.Graph(
                id = 'test',
                figure = fig2
            )
        ])
    ])

test-plotly.html

{% extends 'survey/base.html' %}
{% load plotly_dash %}

{% block content %}
    <H1 style ="text-align: center">Test</H1>
    <hr>
    <h2 style ="text-align: center">Plotly</h2>
    {% plotly_app name="test_plotly" ratio=1 %}


{% endblock content %}

base.html is using basic bootstrap

<body style ='background-color:white'> 
    <main role="main" class="container">
      <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">  
      
        <div class = 'container' style = 'background-color:#ffffff'>
          <div class="row justify-content-center">   
            <div class="col-12">     
                {% block content %}
                {% endblock %}
            </div>
          </div>
        </div>
      </div>
    </main>
</body>

The above looks great on a computer screen but when viewing on mobile, a scroll bar shows up on the plotly chart, see below. AND the graph doesn’t shrink proportionally. In this example, it seems like the graph is being squeezed horizontally.

image
image431×598 11.6 KB

If I change test-plotly.html to have a larger ratio, e.g.
{% plotly_app name="test_plotly" ratio=3 %}
that scroll bar will go away but it will also leave a very large white space below the chart, especially when viewing on a computer screen.

Is there anyway to make the graph more responsive (i.e. no scrolling bar and shrink proportionally, etc.) while not leaving a big white space?

Thanks!

2

There is a plotly_app_bootstrap template tag that inserts a responsive component. See this demo showing it in use.

Documentation can be found here.

3

Thank you @delsim. You were always quick to provide an answer!
Using the plotly_app_bootstrap template tag did get rid of the white space view on a computer screen. However the scrollbar still shows up when viewing on a mobile device even with aspect =1by1…
My code:

test-plotly.html

{% extends 'survey/base.html' %}
{% load plotly_dash %}

{% block content %}
    <div class="container">
            <div class="row"> 
                <div class="col-sm-12">
                    <H1 style ="text-align: center">Test</H1>
                    <br>
                    <h2 style ="text-align: center">Plotly</h2>
                    <div class="{% plotly_class name='test_plotly' %}">
                        {% plotly_app_bootstrap name="test_plotly" aspect="1by1" %}
                    </div>
                </div>
            </div>
        </div>
{% endblock content %}

image
image623×723 19.3 KB

Any alternative solution to this? Much appreciated!

4

It will depend to some extent on why the scrollbar is there as to what the best solution is - it seems in your example that there is content out of sight off the bottom of the screen, for example - but you can control it with css. Something along the lines of

.some-class-name {
    overflow: hidden; /* rather than scroll or inherit */
}

should do the trick; this is a not uncommon problem so you should be able to search out solutions that are more relevant if needed.

5

Thank you @delsim for the pointer! I’m really a newbie at css & js, but will do some research on that front!

6

Hello @iwannasee

I have the same problem, could you solve it?

Another thing, I see that you have been able to use a Dash application with the name test_plotly, I have not been able to use a name other than SimpleExample, could you help me or share a little about how you did it? I have asked the question here.

Thanks!

7

@sguerrero
@iwannasee
in …\django_plotly_dash\templates\django_plotly_dash
modify the file: plotly_app.html
delete style=“{{dstyle}}” in div label

8

(This is a pure Dash response, not a Django-Dash one, but I don’t think that makes any significant difference)

(tl;dr In test_plot.py you may need to wrap your Graph in a DBC Layout object (Row/Col))

I’ve been playing around with Plotly/Dash display on mobiles on and off, and I’ve just made a simple sandbox public at GitHub - dh3968mlq/responsive-plotly-sandbox: A simple sandbox program to explore how well a Plotly figure and a Dash AG Grid can display on a mobile. (Also for a short while deployed at https://dh3968mlq-plotly-sandbox-6cbf2111f5eb.herokuapp.com/). This solves some of the mobile display issues but not all of them. It doesn’t show the unwanted inner scrollbar that you’re experiencing

Some things that (I think) can help:

  • Wrap graphs etc. in DBC layout object, so that they stack and flex on small screens
  • Don’t show the legend on a Plotly figure
  • Leave a margin on one side of a graph or table so the user isn’t locked out of browser-level scrolling
  • Don’t show the modebar. (Or else make it always visible and choose which buttons get shown on it)
  • Choose dragmode on Plotly figures (I’ve gone for ‘pan’ since I think it’s what users will expect)
  • and (obviously) don’t overdo the amount of content in a Figure

Some things work well:

  • Hover text shows on click on a mobile
  • The width (but not the height) of a Plotly figure adjusts to the viewport width
  • The size of an AG grid can be kept within the viewport size by using style=…

But there are some things I’d like to do but don’t know how:

  • Adjust the height of a Plotly figure to fit within the viewport height (I think this may be possible with callbacks)
  • Filtering on AG-Grid is not working for me on a mobile (I’m using Safari on a 1st Gen iPhone SE)
  • Have the legend of a Plotly figure pop up on pressing a hamburger button or similar
  • Two-finger zoom

If anything in the sandbox can be improved, I’ll welcome suggestions