Plot.ly/Dash: Remove all padding around a bullet chart
up vote
0
down vote
favorite
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)
python plotly padding plotly-dash
asked Nov 7 at 13:04
ebosi
227214
add a comment |
up vote
0
down vote
favorite
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)
python plotly padding plotly-dash
asked Nov 7 at 13:04
ebosi
227214
Question also asked on plot.ly community forum.
– ebosi
Nov 7 at 13:05
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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)
python plotly padding plotly-dash
asked Nov 7 at 13:04
ebosi
227214
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)
python plotly padding plotly-dash
python plotly padding plotly-dash
asked Nov 7 at 13:04
ebosi
227214
asked Nov 7 at 13:04
ebosi
227214
asked Nov 7 at 13:04
ebosi
227214
asked Nov 7 at 13:04
ebosi
227214
asked Nov 7 at 13:04
ebosi
227214
227214
Question also asked on plot.ly community forum.
– ebosi
Nov 7 at 13:05
add a comment |
Question also asked on plot.ly community forum.
– ebosi
Nov 7 at 13:05
Question also asked on plot.ly community forum.
– ebosi
Nov 7 at 13:05
Question also asked on plot.ly community forum.
– ebosi
Nov 7 at 13:05
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53190032%2fplot-ly-dash-remove-all-padding-around-a-bullet-chart%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Question also asked on plot.ly community forum.
– ebosi
Nov 7 at 13:05