Rounded Bar Corners

The radius prop on <Bar> adds rounded corners to bar rectangles using SVG arc commands.

Per-corner radius

Pass an array of four numbers for [topLeft, topRight, bottomRight, bottomLeft]:

Other patterns:

<!-- Uniform radius on all corners -->
<Bar data-key="value" fill="#f97316" :radius="8" />

<!-- Round only the bottom corners -->
<Bar data-key="value" fill="#f97316" :radius="[0, 0, 8, 8]" />

<!-- Pill shape (half the bar width) -->
<Bar data-key="value" fill="#f97316" :radius="[20, 20, 0, 0]" />

Stacked bars with radius

When bars are stacked, applying radius to all bars in the stack can cause visual artifacts — rounded corners in the middle of the stack create gaps. Apply radius only to the top bar:

Horizontal bars

For horizontal layouts (layout="vertical"), the corner order stays the same but the visual direction changes. Top-left/top-right become the right side of horizontal bars:

<BarChart :data="data" layout="vertical">
  <XAxis type="number" />
  <YAxis data-key="name" type="category" />
  <Bar data-key="value" fill="#f97316" :radius="[0, 8, 8, 0]" />
</BarChart>

Background bars with radius

Background bars also accept a radius via the background prop:

<Bar data-key="value" fill="#f97316" :radius="8" :background="{ fill: '#eee', radius: 8 }" />