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:
… and I’d like it to look like that:
(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)