如何从顶部创建带有圆角的MUI X图表，如enter image description here
`import { BarChart，LineChart，PieChart } from“@mui/x-charts”;
const users = [ { label：“bachir”，值：1730，}，{ label：“奥斯曼”，价值：1230，}，{ label：“巴达维”，价值：1030，}，{ label：“Achor”，数值：1930，}，{ label：“莫拉德”，数值：730，}，]
const App =（）=> { return（
你好

<PieChart
    series={[
      {
        data: users,
        innerRadius: 30,
        outerRadius: 60,
        paddingAngle: 5,
        cornerRadius: 5,
        startAngle: -100,
        endAngle: 360,
        cx: 150,
        cy: 190,
      },
    ]}
    width={400}
    height={400}
  />
  <BarChart
    height={200}
    series={[{ data: users.map((user) => user.value) }]}
    layout="vertical"
    slots={{
      bar: (props) => {
        const radius = 7;
        const { x, y, height, width, ownerState, ...restProps } = props;

        // Path of a rectangle with rounded corners
        const d = `M${x},${y} h${
          width - radius
        } a${radius},${radius} 0 0 1 ${radius},${radius}v ${
          height - 2 * radius
        } a${radius},${radius} 0 0 1 ${-radius},${radius} h${
          radius - width
        }z`;
        return <path d={d} fill="rgba(255, 122, 0, 0.8)" />;
      },
    }}
  />
</div>

）;
导出默认应用程序;`我尝试用这个代码，但这个代码使半径只是水平