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]" />

<!-- Rounded top (half of a 40 px bar) -->
<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 array still means [top-left, top-right, bottom-right, bottom-left] on screen; the corners do not rotate. To round the end of a horizontal bar, use [0, r, r, 0]:

<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 }" />