Plotly Dash中如何实现垂直柱状图柱条顶部圆角效果

Plotly 目前未原生支持柱条圆角配置，以下两种方案均可实现目标效果：

方案一：自定义Shape绘制圆角柱（推荐，交互完整） #

隐藏原生柱状图的填充色，通过fig.add_shape逐个绘制带圆角的矩形作为柱体，完全保留原有标签、坐标轴配置，适配动态更新场景。
基于提供的基础代码，修改后的完整实现如下：

import pandas as pd
import plotly.express as px

df = pd.DataFrame({
    "Day": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"],
    "Amount": [4, 1, 2, 2, 4, 5,8],
})
# 柱宽与原有配置保持一致
bar_width = 0.1
# 圆角半径，可根据视觉效果调整
corner_radius = 0.05

fig = px.bar(df, x="Day", y="Amount",
             orientation="v",
             opacity=0.9,
             barmode='relative',
             # 将原生柱填充设为全透明，仅保留文本等附属元素
             color_discrete_sequence=["rgba(0,0,0,0)"],
             text='Amount',
             hover_data=None,
             template='none')

# 逐个添加带圆角的柱形
for idx, row in df.iterrows():
    # 计算单根柱的坐标边界
    x_left = idx - bar_width/2
    x_right = idx + bar_width/2
    y_bottom = 0
    y_top = row["Amount"]
    fig.add_shape(
        type="rect",
        x0=x_left, y0=y_bottom - corner_radius, # 底部延伸圆角半径的距离，隐藏底部圆角
        x1=x_right, y1=y_top,
        fillcolor="purple",
        opacity=0.9,
        line_width=0,
        rx=corner_radius,
        ry=corner_radius,
        layer="below" # 柱形放在图层下方，不遮挡顶部文本
    )

fig.update_layout({
'plot_bgcolor': 'rgba(0, 0, 0, 0)',
'paper_bgcolor': 'rgba(0, 0, 0, 0)',
})

fig.update_traces(texttemplate='%{text:.2s}',
                  hovertemplate=None,
                  hoverinfo='none',
                  textposition='outside',
                  width = [bar_width]*7
                 )

fig.update_layout(yaxis=dict(range=[0,10]))

上述代码通过将柱形底部延伸至y轴显示范围外，实现仅顶部可见圆角、底部为直角的效果，和参考示例样式完全一致。

对应的Dash组件代码无需修改，直接传入修改后的fig即可：

dcc.Graph(
    id='graph-4',
    figure=fig
)

方案二：CSS修改SVG柱条属性（轻量无侵入） #

Plotly渲染的柱状图柱体本质是SVG内的<rect>标签，静态图表场景下可以直接通过CSS给柱条添加圆角，无需修改绘图代码。
在Dash项目的全局CSS文件中添加以下规则即可：

/* 匹配对应ID图表下的柱形元素 */
#graph-4 .barlayer rect {
  rx: 4px;
  ry: 4px;
  /* 裁掉底部圆角，仅保留顶部圆角效果 */
  clip-path: inset(0 0 4px 0);
}

该方案缺点：如果图表存在加载动画、柱条动态更新的场景，CSS选择器可能匹配失效，仅适合纯静态展示的图表。

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