如何为MUI X BarChart柱状图设置单个柱子的圆角？

我使用MUI X的BarChart创建了图表，导入代码如下：

import { BarChart } from '@mui/x-charts/BarChart';
import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';

我希望为每个柱子添加圆角，尝试在sx属性和series属性中设置borderRadius均未生效——sx仅为整个图表添加边框，而非单个柱子。当前代码如下：

<ThemeProvider theme={darkTheme}>
  <BarChart
    sx={[{p: 5, border: 1, borderRadius: 3}]}
    yAxis={[
      {
        id: 'barCategories',
        data: ['A', 'B', 'C', 'D', 'E'],
        scaleType: 'band',
      },
    ]}
    series={[
      {
        data: [50, 20, 85, 60, 20],
        color: '#fff',
      },
    ]}
    layout="horizontal"
  />
</ThemeProvider>

当前图表效果：

如何实现下图的柱子圆角效果？

解决方案 #

MUI X BarChart的单个柱子样式需要通过series的style属性或slotProps配置来设置，以下是两种可行方法：

方法1：通过series的style属性统一设置 #

在series数组的对象中添加style属性，直接为所有柱子指定圆角样式。由于你的图表是水平布局，需注意圆角方向：

series={[
  {
    data: [50, 20, 85, 60, 20],
    color: '#fff',
    style: {
      borderRadius: '0 8px 8px 0' // 水平柱状图，仅右侧添加圆角
    }
  },
]}

方法2：使用slotProps实现灵活定制 #

通过slotProps配置bar组件的样式，支持针对单个柱子做个性化设置：

<BarChart
  // 保留原有属性
  slotProps={{
    bar: {
      style: (context) => ({
        borderRadius: '0 8px 8px 0',
        // 可选：给指定索引的柱子设置不同圆角
        // ...(context.dataIndex === 2 ? { borderRadius: '8px' } : {})
      })
    }
  }}
/>

注意事项 #

• 水平布局下，borderRadius的四个值对应左上、右上、右下、左下；垂直布局则对应上下方向的圆角。
• 若需要仅给柱子的一端加圆角，调整borderRadius的数值组合即可，比如'8px 0 0 8px'对应左侧圆角。

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