如何调整Plotly瀑布图宽高，提升多数据条可读性？

要放大Plotly图表的宽高，直接在update_layout中指定width和height参数即可，图表会按设定尺寸渲染，超出页面范围时可通过滚动查看。同时可调整x轴标签的旋转角度，避免标签重叠，进一步优化可读性。

修改后的完整代码 #

import plotly.graph_objects as go
import pandas as pd

L_y = [10000,2000,-1000,3000,500,-4000,1000,1000,1500,14000,2500,-1000,2000,0,-1000,1000,1500,1000,20000,-500,-2000,1000,-500,-1000,-2000,1000,1500,17500]

L_x = ["Amount 2019","A - 2020","B - 2020","C - 2020","D - 2020","E - 2020","F - 2020","G - 2020","H - 2020",
"Amount 2020","A - 2021","B - 2021","C - 2021","D - 2021","E - 2021","F - 2021","G - 2021","H - 2021",
"Amount 2021","A - 2022","B - 2022","C - 2022","D - 2022","E - 2022","F - 2022","G - 2022","H - 2022","Amount 2022"]

L_m = ["absolute","relative","relative","relative","relative","relative","relative","relative","relative","total",
       "relative","relative","relative","relative","relative","relative","relative","relative","total",
       "relative","relative","relative","relative","relative","relative","relative","relative","total"]


df = pd.DataFrame(
{
    "X" : L_x,
    "Y" : L_y,
    "Measure" : L_m,
    "Comment" : ["Comment to make"]*28
}
)

df["Text"] = df["Y"].apply(lambda x : "{:,.0f}€".format(x) if x<0 else "+{:,.0f}€".format(x))

fig  = go.Figure()
fig.add_trace(go.Waterfall(
               x = df['X'], y = df['Y'],
               measure = df['Measure'],
               base = 0,
               text = df['Text'],
               textposition = 'outside',
               decreasing = {"marker":{"color":"crimson"}},
               increasing = {"marker":{"color":"forestgreen"}},
               totals = {"marker":{"color":"mediumblue"}},
               hovertext = df['Comment'],
               ))

fig.update_traces(hovertemplate = "%{x}<br>%{text}<br>Comment : %{hovertext}<extra></extra>")

# 核心修改：自定义宽高+标题居中
fig.update_layout(
                   title_text = "Title of graph",
                   title_font = dict(size=15,color='black'),
                   width=1800,  # 根据数据量调整宽度
                   height=800,  # 根据需求调整高度
                   title_x=0.5  # 宽幅图表下保持标题居中
)

fig.update_layout({
            'plot_bgcolor': 'rgba(0,0,0,0)',
            'paper_bgcolor': 'rgba(0,0,0,0)',
        },
        hovermode = "x"
    )

# 优化x轴标签，避免重叠
fig.update_xaxes(showspikes=True, spikecolor = 'black', showline=True, linewidth=1,linecolor='black', 
                 ticks = "outside", tickwidth = 1, tickcolor = 'black',ticklen = 5,
                 tickangle=45)

fig.update_yaxes(showspikes=True, spikecolor = 'black', showline=True, linewidth=1,linecolor='black', ticks = "outside", tickwidth = 1, tickcolor = 'black',ticklen = 5)

fig.update_yaxes(title = 'Y title' , range = [9000,21000])
fig.update_xaxes(title = "X title")

fig.show()

关键说明 #

• 宽高自定义：通过width和height参数设置图表的像素尺寸，数据条越多可适当增大width，确保每个数据条有足够显示空间。
• x轴标签优化：添加tickangle=45让标签旋转45度，避免横向重叠，提升可读性。
• 标题适配：设置title_x=0.5保证宽幅图表的标题始终居中，避免视觉偏移。

渲染后的图表超出浏览器窗口时，页面会自动生成滚动条，可通过滚动查看完整内容。

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