如何调整Plotly多行图例的项目符号垂直对齐方式？

问题场景 #

使用以下代码生成的Plotly图表，图例中项目符号与多行文本默认垂直居中对齐，导致多行文本的视觉连贯性差，难以快速对应曲线：

import plotly.graph_objects as go

fig = go.Figure()
for i in range(4):
    fig.add_trace(
        go.Scatter(
            x = [1,2,3],
            y = [i]*3,
            name = 'A very long legend<br>which I break in<br>multiple lines'
        )
    )
fig.write_html('deleteme.html')

原图例效果：

期望实现的目标效果（符号与多行文本顶部对齐）：

解决方案 #

Plotly本身没有提供直接配置图例符号对齐的参数，但可以通过自定义CSS样式实现顶部对齐，具体步骤如下：

1. 在生成HTML文件时，注入自定义CSS规则，修改图例项的布局方式：

import plotly.graph_objects as go

fig = go.Figure()
for i in range(4):
    fig.add_trace(
        go.Scatter(
            x=[1,2,3],
            y=[i]*3,
            name='A very long legend<br>which I break in<br>multiple lines'
        )
    )

# 自定义CSS，强制图例项顶部对齐
custom_css = """
<style>
.legend .trace-group {
    display: flex;
    align-items: flex-start !important;
}
.legend .legendtext {
    margin-top: 2px; /* 微调文本与符号的垂直间距，让视觉更协调 */
}
</style>
"""

# 将自定义样式与图表HTML合并写入文件
with open('deleteme.html', 'w') as f:
    f.write(custom_css + fig.to_html(full_html=False))

2. 原理说明：
   • Plotly生成的图例中，每个图例项对应.trace-group类的元素，默认是垂直居中对齐；
   • 通过display: flex和align-items: flex-start强制让符号和文本顶部对齐；
   • 额外的margin-top是为了让文本和符号的视觉位置更匹配，可根据需求调整数值。

如果是在Jupyter Notebook中使用，同样可以通过注入自定义CSS的方式实现，比如在Notebook单元格中添加CSS代码块，或者使用fig.update_layout的template参数嵌入样式。

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