Gaps between y axis and data with categorical x axis data

📊 Plotly Python
1

There are gaps between the y axes and the bar/line data in my graph (see screenshot). I have seen similar posts fixing this by changing the range of the x axis, but my x axis data is categorical (a string value) in this case. I’ve already tried setting fig.update_xaxes(type='category')

Is there a way to remove these gaps? Thanks

   fig = make_subplots(specs=[[{"secondary_y": True}]])
   
   fig.add_trace(
      go.Scatter(x=grouped['long_name'], y=grouped['avg_speed'], name="Average Speed", mode='lines+markers'),
      secondary_y=True
   )
   
   fig.add_trace(
      go.Bar(x=grouped['long_name'], y=grouped['num_trips'], name='Num Trips', marker={'color': barColour}),
      secondary_y=False
   )

   fig.update_xaxes(type='category')

image
image1662×411 32.1 KB

2

Hi @amp123 ,

If you provide us a sample data or dummy data that has identical both shape and value, it will be a big help to reproduce your current result.

But, let’s try to set layout padding to zero by adding update_layout after update_xaxes.
My suggestion solution will be:

fig = make_subplots(specs=[[{"secondary_y": True}]])
   
fig.add_trace(
      go.Scatter(x=grouped['long_name'], y=grouped['avg_speed'], name="Average Speed", mode='lines+markers'),
      secondary_y=True
   )
   
fig.add_trace(
      go.Bar(x=grouped['long_name'], y=grouped['num_trips'], name='Num Trips', marker={'color': barColour}),
      secondary_y=False
   )

fig.update_xaxes(type='category')

fig.update_layout(
    margin={'pad':0}
)

Hope this help.

3

Thanks for your reply. I added that line to change the padding but the plot is the same. Here is a sample of my data:

   long_name  avg_speed  num_trips
1   00011004  13.489319          4
51  01221003  14.571351          7
0   00010004  14.651578          8
52  01231001  15.516666          7
49  01220003  16.220646          5
57  01501003  16.321219          7
56  01500002  16.328130          7
79  083A1002  16.640603          1
50  01221001  17.188805          1
7   00091001  17.571923          8
6   00090001  17.983351          9
62  015B1007  18.016903          9
40  00G10001  18.126940          4
16  00401007  18.158284         13
53  01400003  18.252480          8

Is there anything else I could try?
Thanks again.

4

Hi @amp123 ,

Thanks for providing a sample data.

My suggestion solution is to set xaxis rangemode to "tozero" and define explicitly range value.

Set min range to(-1*custom_xaxis_pad) ,a negatif value so it will give left padding ,because data point will start from zero.

Set maxrange to len_x+(custom_xaxis_pad-1).
By adding custom padding to length of index , it will give right padding configuration.

# Get length of index (rows)
# Assuming `grouped` is pandas Dataframe
len_x = len(grouped.index)

# Set Custom Xaxis Padding
# you can adjust custom x axis padding by changing its value 
custom_xaxis_pad = 1

fig = make_subplots(specs=[[{"secondary_y": True}]])

fig.add_trace(
      go.Scatter(x=grouped['long_name'], y=grouped['avg_speed'], name="Average Speed", mode='lines+markers'),
      secondary_y=True
   )
   
fig.add_trace(
      go.Bar(x=grouped['long_name'], y=grouped['num_trips'], name='Num Trips', marker={'color': 'lightpink'}),
      secondary_y=False
   )


# Set rangemode to `tozero`, which data point will start from zero.
# Specify range explicitly using `range` keyword.
# Set min range to  `(-1*custom_xaxis_pad)` ,a negatif value so it will give left padding 
# because data point will start from zero.
# Set max range to `len_x+(custom_xaxis_pad-1)`, so it will set right padding .
fig.update_layout(
    xaxis = dict(
        rangemode= 'tozero',
        range=[(-1*custom_xaxis_pad),len_x+(custom_xaxis_pad-1)]

    )
)

fig.show()

This is if custom padding custom_xaxis_pad = 1

image
image1778×800 42.7 KB

To make sure padding adjustment works, this one if custom_xaxis_pad = 5

image
image1767×760 39.9 KB

Hope this help.

5

That worked. Thanks very much for the help!

1 Like