Rounded Bar corners

Recharts by default renders square bars. There is more than one way to round Bar's corners.

Round all corners

Pass radius={10} prop to a Bar to round all corners equally. This creates a uniform rounded rectangle. Large radius makes the bars look more like pills.

Different radius for different corners

radius prop also accepts an array of four numbers. This way you can define specific radius for each corner.

Round a bar stack

In a stacked bar chart, you will run into some complications:

• Some data points may be smaller than the radius
• Some data points may be omitted

To fix these, you may want to use BarStack component. This allows you to set radius of the whole stack.