python - Whitespace around dash plotly graphs - Stack Overflow

admin管理员组

文章数量:1126458

I am making a dash app with 3 graphs and 1 table in display.
There are 2 rows on screen, 1st row has 2 graphs, 2nd has 1 graph and 1 data table each taking 50% width of screen.
This is one of my graphs plotted-

this is the layout for the graph -

html.Div([
          dcc.Graph(id='category-bar-graph', responsive=True, className='graph')
         ], className='graph-div left-graph top-graph')

CSS-

.graph-div{
    width: 50%;
    display: inline-block;
    border-radius: 5px;
    box-shadow :  rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px ;
    margin:1.5%;
}

.left-graph{
    margin-right:0.75%
}

.top-graph{
    margin-bottom:0.75%
}

As you can see, there is too much extra white space all-around the actual chart due the which the chart isn't even covering 50% of the whole space it has. I tried to play around height-width but it affects the whole part, not just the bar-chart. I also tried to find if there is some unnecessary margin or padding somewhere but that's also not the case.

Is there any way that I can enlarge the actual bar-chart in the figure and remove some extra white space that's there?

I am making a dash app with 3 graphs and 1 table in display.
There are 2 rows on screen, 1st row has 2 graphs, 2nd has 1 graph and 1 data table each taking 50% width of screen.
This is one of my graphs plotted-

this is the layout for the graph -

html.Div([
          dcc.Graph(id='category-bar-graph', responsive=True, className='graph')
         ], className='graph-div left-graph top-graph')

CSS-

.graph-div{
    width: 50%;
    display: inline-block;
    border-radius: 5px;
    box-shadow :  rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px ;
    margin:1.5%;
}

.left-graph{
    margin-right:0.75%
}

.top-graph{
    margin-bottom:0.75%
}

As you can see, there is too much extra white space all-around the actual chart due the which the chart isn't even covering 50% of the whole space it has. I tried to play around height-width but it affects the whole part, not just the bar-chart. I also tried to find if there is some unnecessary margin or padding somewhere but that's also not the case.

Is there any way that I can enlarge the actual bar-chart in the figure and remove some extra white space that's there?

• python
• plotly-dash

Share Improve this question Follow asked 2 days ago SnowGirlSnowGirl 4377 bronze badges 1

• If this is in Python, then where is your Python code? Could you please provide a minimal reproducible example? Also it's likely your question is similar to this question and the answer could fix your problem: stackoverflow.com/a/70686888/16169432 – keventhen4 Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The Dash Graph component wraps the Plotly figure, so you also need to adjust the figure's layout :

• Reduce the margins (default 80).
• Hide the legend, or change its orientation and positioning. You can also reduce the size of legend items.
• Adjust the font settings.
• Adjust the plot title positioning.

本文标签： pythonWhitespace around dash plotly graphsStack Overflow