Using the 'automargin' property for bar graphs?

Dash Python
1

Hello all,

I am generating graphs with:

f = {'data': [
                    {'x': df['x'], 'y': df['y'], 'text': df['y'], 'type': 'bar',
                        'name': 'Y', 'color': '#000099'},
                    {'x': df['x'], 'y': df['y2'], 'text': df['y2'], 'type': 'bar',
                        'name': 'Y2', 'color': '#800000'}
                    ],
            'layout': {
                'xaxis': {'autorange': True, 'title': 'X Axis', 'automargin': True, 'animate': True},
                'type': 'category',
                'title': 'My Title',
                'yaxis': {'autorange': True, 'title': 'Y Axis', 'automargin': True, 'animate': True}
                }
            }

dcc.Graph(id='my-graph', fig = f)

My x-labels are very long, and they get cut off by the x-axis title. Is there any reason why ‘automargin’ is not working?

2

That should work. Could you paste a complete reproducable example? That is, just replace df['x'] and df['y'] with some hardcoded data with long labels

3

Thanks for the quick reply - here you go:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import numpy as np
app = dash.Dash(__name__)

label = ['This is a very super long label','This is also a ridiculously long label',
'This is a very super long label2','This is also a ridiculously long label2',
'This is a very super long label3','This is also a ridiculously long label3',
'This is a very super long label4','This is also a ridiculously long label4',
'This is a very super long label5','This is also a ridiculously long label5',
'This is a very super long label6','This is also a ridiculously long label6'
'This is a very super long label7','This is also a ridiculously long label7'
'This is a very super long label8','This is also a ridiculously long label8'
'This is a very super long label9','This is also a ridiculously long label9'
'This is a very super long label10','This is also a ridiculously long label10'
'This is a very super long label11','This is also a ridiculously long label11'
'This is a very super long label12','This is also a ridiculously long label12'
'This is a very super long label13','This is also a ridiculously long label13'
'This is a very super long label14','This is also a ridiculously long label14'
'This is a very super long label15','This is also a ridiculously long label15']

y = np.random.randint(100, size=len(label))
y2 = np.random.randint(100, size=len(label))

df = pd.DataFrame({'x':label,
                    'y':y,
                    'x2':label,
                    'y2':y2})

f = {'data': [
                    {'x': df['x'], 'y': df['y'], 'text': df['y'], 'type': 'bar',
                        'name': 'Y', 'color': '#000099'},
                    {'x': df['x'], 'y': df['y2'], 'text': df['y2'], 'type': 'bar',
                        'name': 'Y2', 'color': '#800000'}
                    ],
            'layout': {
                'xaxis': {'autorange': True, 'title': 'X Axis', 'automargin': True, 'animate': True},
                'type': 'category',
                'title': 'My Title',
                'yaxis': {'autorange': True, 'title': 'Y Axis', 'automargin': True, 'animate': True}
                }
            }

app.layout = html.Div(dcc.Graph(id='my-graph', figure = f))
if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0')
4

Any suggestion on how to get this work?

5

Did anyone find a solution to this? We are having the same issue.
I suspect the x axis tick needs resizing horizontally, but automargin resizes vertically.
Is there a parameter you can pass to layout that handles this case, or is it a case of writing something that resizes the right margin if the tick text is above a certain length?

6

Looking at this example, I believe that the issue is that there isn’t enough room to display the labels and the chart.

The height of the dcc.Graph is always fixed. automargin will expand the margins (thereby shrinking the main graph area) to accomidate the labels. In this case, there isn’t enough room to display the labels at the default height, so the automargin resorts to the default margin size (80px).

However, if I make the graph height larger, e.g. 600px, then automargin will kick in:

image
image1366×768 66.5 KB

Vs the default size:

image
image1366×522 30 KB

Vs height 300

image
image1366×465 26.5 KB

7

Hello,

is this error I found today:

'automargin' is not allowed in 'xaxis'

something expected?

Thank you!