Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Unable to adjust spacing for axis labels for subplots in Plotly

As an extension to my previous question, Ability to change layout for "Download plot as a png" , I tried an alternative way by plotting using subplots. When I do so, I am unable to change the position of the x-labels (reduce spacing between the label and the axis).

As you can see below, the x and y-label spacing are quite off for the subplots. Changing the margins affects the overall plot, but I could not figure out a way to control the margins for the subplot.

test2

Any ideas?

My basic objective is to be able to export the entire page as a static image, which can typically have multiple plots.

@empet Are you able to help me out on this? Thanks :slight_smile:

I moved this question to the Python API group as i think it should belong here. Any ideas would be appreciated. I tried using annotations, but its not as elegant, the reason being, I have enabled the plot configuration to be ‘editable’ by the user, and an annotation cannot be constrained in position.

Hi @vivekvs1,
It’s not possible to directly customize the spacing between the xaxis label and the xaxis, but here are two possibilities.

  1. If you’re using the plotly.tools.make_subplots function, you can increase the vertical spacing between subplots so that it’s more apparent which subplot the xaxis label belongs with. This is done using the vertical_spacing argument to make_subplots. From the docstring:

vertical_spacing (kwarg, float in [0,1], default=0.3 / rows):
Space between subplot rows.
Applies to all rows (use ‘specs’ subplot-dependents spacing)

  1. You can replace the xaxis labels with annotations in paper coordinates (See https://plot.ly/python/text-and-annotations/#adding-annotations-with-xref-and-yref-as-paper). This gives you complete freedom to place the text label whereever you want on the figure canvas.

Hope that helps!
-Jon

Thanks for your response Jon! The subplots look nice when I render them as three different divs in Dash. Is there a way a Dash Div can be exported as an image using orca or any other method? That way I can control the margins for each plot to control the spacing between the axis and the label.

Hi @vivekvs1,

Exporting dash layouts to static images isn’t supported through plotly.py right now, though I think it’s a good idea and will likely happen at some point. I believe that orca already supports this, but I haven’t tested it out myself yet.

-Jon

Thanks Jon. I know it might be a stretch to ask, but a rough direction/suggestion that I might take using orca would be really really appreciated :slight_smile: .

Hi @vivekvs1,

I gave this a try and here’s what I came up with:

# Imports
import requests
import subprocess
import time

# Launch orca server
PORT = '9998'
SERVER_URL = f'http://localhost:{PORT}'
orca_proc = subprocess.Popen(['orca', 'serve', '-p', PORT])
time.sleep(1)

# Request image conversion
dash_body = {
    'url': 'https://dash-recession-report.plot.ly/',
    'format': 'pdf',
    'timeout': 5,
    'pageSize': {
        'width': 1000, 'height': 1000
    }
}

r = requests.post(SERVER_URL + '/dash-preview', json=dash_body)
r

# Write pdf to file
with open('test-dash2.pdf', 'wb') as f:
    f.write(r.content)

# Shutdown orca server
orca_proc.terminate()
time.sleep(1)

So it looks like dash apps can only be converted to PDF reports, and you have to be serving the dash app from somewhere. And for this example it takes about 10 seconds for a single export.

-Jon

1 Like

Wow :smiley: :smiley: - thank you very much for the prompt response Jon. I haven’t gotten this to work yet- but I am going to dig a bit further. Its probably to do with using Python 3.7.

I had another thought: Would it be possible to render the dash div over a html Canvas and then save as png? I couldn’t get my head around how to convert the dash div to html and use html2canvas .

Thanks,
Vivek

Hi @vivekvs1,

It would be technically possible to save the dash layout to a png, but orca doesn’t support it right now. It would definitely be worth opening an orca feature request, but you would probably need to go a different route for the time being. You could start be researching how to export websites to PNG’s using Selenium.

Good luck!
-Jon

I see- very nice - I have heard about Selenium before. I will see if it works forks for me. Thanks very much Jon!!

Also created an orca feature request: