如何消除Plotly多trace图表中柱状图与Y轴间的多余边距？

原因说明 #

混合添加柱状图、散点图两种不同类型trace时，Plotly会默认给分类X轴的两端自动增加额外padding适配散点显示范围，因此会出现多余空白边距；仅存在柱状图trace时，X轴padding会自动匹配柱状宽度，所以显示正常。

解决方案 #

直接手动指定X轴的显示范围即可消除空白。分类轴的索引从0开始，共N个分类的情况下，范围设置为[-0.5, N-0.5]刚好可以让两端的柱状图紧贴Y轴和右边界，效果和单trace场景一致。如果X轴分类数量是动态的，也可以替换为range=[-0.5, len(my_x)-0.5]，不需要提前固定N值。

只需在fig.show()之前添加X轴配置即可：

fig.update_xaxes(range=[-0.5, N - 0.5])

完整修改后代码 #

import random
import plotly.graph_objects as go

N = 45
my_x = ['#' + str(random.randint(50, 999)) for _ in range(N)]
my_y1 = [random.randint(5, 20) for _ in range(N)]
my_y2 = [random.randint(10, 30) for _ in range(N)]

trace1 = go.Bar(name='Food',
                x=my_x,
                y=my_y1)

trace2 = go.Scatter(name='Water',
                    x=my_x,
                    y=my_y2,
                    mode='markers',
                    marker_size=12)

fig = go.Figure()
fig.add_trace(trace1)
fig.add_trace(trace2)
# 配置X轴范围消除两端空白
fig.update_xaxes(range=[-0.5, N - 0.5])
fig.show()

内容的提问来源于stack exchange，提问作者Anton