How to create a Rechart barchart with rounded edges

Question

I am using Rechart in React app. I'm trying to create a barchart like this. But when value = 1 bar not rounded.

my problem

Here's my code

                  <BarChart
                    data={data}
                    layout="vertical"
                  >
                   
                    <XAxis
                      type="number"
                      dataKey="total"
                      axisLine={false}
                      tickLine={false}
                    />
                    <YAxis
                      type="category"
                      dataKey="name"
                      axisLine={false}
                      tickLine={false}
                    />
                    <Bar
                      dataKey="total"
                      radius={100}
                      background={{
                        fill: "#eee",
                        radius: 100,
                      }}
                    />
                  </BarChart>          

Here my expect:

my expect

Answer 1

Please Add radius={[0, 10, 10, 0]} inside Bar tag.

         <BarChart
                data={data}
                layout="vertical"
              >
               
                <XAxis
                  type="number"
                  dataKey="total"
                  axisLine={false}
                  tickLine={false}
                />
                <YAxis
                  type="category"
                  dataKey="name"
                  axisLine={false}
                  tickLine={false}
                />
                <Bar
                  dataKey="total"
                  radius={[0, 10, 10, 0]}
                  background={{
                    fill: "#eee"
                  }}
                />
              </BarChart>