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

Remove all padding around bullet chart

Background:
I have a bullet chart in my app, and I’d like it to be “inline”. Thus, I want to display the bare minimum of information.

I have streamlined it a lot: no title, no legend, no interactive buttons.

Problem:
However, there is still large top and bottom paddings I cannot get rid of.

It currently looks like this:
Screenshot%20from%202018-11-06%2011-08-15

… and I’d like it to look like that:
png

(It works with the same settings on a basic bar plot, as shown in the MWE)

Question:

How to remove the top and bottom paddings in the bullet chart above?


MWE:

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.figure_factory as ff

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                html.Span('Foo |'),
                dcc.Graph(
                    id='example-graph',
                    figure=dict(
                        data=[
                            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
                        ],
                        layout=dict(
                            paper_bgcolor='#fcc',
                            height='42px',
                            margin=dict(
                                t=0,
                                r=0,
                                b=0,
                                l=0,
                            ),
                        ),
                    ),
                    style=dict(
                        border='solid 2px red'
                    ),
                    config=dict(
                        displayModeBar=False
                    ),
                ),
            ],
            style=dict(
                display='flex',
                margin='10px',
            )
        ),
        html.Div(
            [
                html.Span('Bar |'),
                dcc.Graph(
                    id='bullet-chart',
                    figure=ff.create_bullet(
                        orientation='h',
                        ranges='range',
                        measures='data',
                        data=[dict(
                            range=[.4, .5, 1],
                            data=[0, .42],
                        )],
                        paper_bgcolor='#fcc',
                        margin=dict(
                            t=0,
                            r=0,
                            b=0,
                            l=0,
                        ),
                        title=None,
                        width=500,
                        height=210,
                        hovermode=False,
                    ),
                    style=dict(
                        border='solid 2px red'
                    ),
                    config=dict(
                        displayModeBar=False
                    ),
                ),
            ],
            style=dict(
                display='flex',
                margin='10px',
            )
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

Might someone have more insight now?