How to create rounded bars in MUI X charts

Question

How I can create MUI X Chart With Rounded Corner from the top like this Image

import { BarChart, LineChart, PieChart 
} from "@mui/x-charts";

const users = [
{
 label: "bachir",
value: 1730,
},
{
label: "Othman",
value: 1230,
},
{
label: "Badawi",
value: 1030,
},
{
label: "Achor",
value: 1930,
},
{
label: "Morad",
value: 730,
},
 ];

const App = () => {
return (
  <div>
  <h1>Hello there </h1>

  <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>
);
};

export default App;

I tried with this code but this code make radius just horizontally

Answer 1

The Bars in the Bar Chart and Bar Plot are SVG <rect> elements, so you can control the radius of the corners using the rx attribute with MUI X's sx prop:

<BarChart sx={{ rx: 15 }} />

Here's a demo that shows it in action: https://codesandbox.io/s/sharp-julien-vjvddk

You can also use the class MuiBarElement-root which is applied to that <rect>, and apply CSS styles to it however you prefer: