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

Create plots with transparent background

I am embedding dash apps as i-frames on a WP blog. In order to style the posts in an aesthetic way, I am trying to build dash graphs with transparent backgrounds. This requires that the layout have a transparent background style.

Is this possible?

If so, I could place a properly styled graph app into the iframe on WP and it would work nicely with a dark WP theme.

Trying to do a dark style at the dash level with dcc elements is not straightforward and there are always some white showing through when you combine different components and set their backgrounds to 77,77,77 or something along those lines. This gets especially hard with responsive pages and apps.

Any ideas?

You can specify both the paper bgcolor and the plot bgcolor to transparent.

html.Div(dcc.Graph(
        figure={
        'data':data,
        'layout': go.Layout(
            paper_bgcolor='rgba(0,0,0,0)',
            plot_bgcolor='rgba(0,0,0,0)'
        )})
    )
3 Likes

Trying that right now. Thanks for the advice!

This div is invisible when I added the ‘layout’ section. It works when I comment layout section out.
This is a multi-tab app with the graphing inside a callback.

	if tab == 'tab-1':
    return html.Div(
		dcc.Graph(
		id='example-graph-1',
		figure={
		        'data': [
		        {'x': [1, 2, 3], 'y': [4, 1, 2],
		         'type': 'bar', 'name': 'SF','color':'rgb(77,77,77)'},
		        {'x': [1, 2, 3], 'y': [2, 4, 5],
		         'type': 'bar', 'name': u'Montréal'},
		    ],
				'layout':go.Layout(
					title = 'this is the Economic Slide',
					paper_bgcolor = 'rgba(0,0,0,0)',
					plot_bgcolor = 'rgba(0,0,0,0)'
			 )
			        }
		        )

    )

Forgot to import

import plotly.graph_objs as go

Working now.

Cheers!