React-native-svg-charts: question: Barchart rounded corner

[otusweb]

What is the problem?

I'm trying to round the corner of the bars in a barchart.
I found a solution online for D3, i'm wondering how i can use that within this library.

https://stackoverflow.com/questions/39842964/how-to-make-vertical-corners-on-a-bar-chart

I can't find where to start in the docs

[JesperLekland]

As of now the bars are rendered using a path, meaning there's no option for rounded corners. One possible solution for the future could be to render the bars with an svg rect instead. This is not something I will prioritise because of it's very narrow use case. Feel free to submit a PR :)
Closing issue as this isn't supported

[antoinerousseau]

Hi, still no easy way to have rounded bar corners?

[karlvd]

An easy workaround to get rounded corners in a bar chart is to add a SVG <Rect> on top of each bar and apply rounded corners to the <Rect>.
Though keep in mind that you may need to do adjustments to Grid and YAxis if you use those, the rect will increase the height of the bar since half of the Rect need to be above the existing bar.

The following function will add rounded corners and a label on top of each bar.

 const Labels = ({ x, y, bandwidth, data }) => (
      data.map((value, index) => (
        <G
          key={index}>
          <Text
            x={x(index) + (bandwidth / 2)}
            y={y(value) - 10}
            fontSize={8}
            fontWeight={'bold'}
            fill={'#ff0000'}
            alignmentBaseline={'middle'}
            textAnchor={'middle'}
          >
            {'$' + value}
          </Text>
          <Rect
            x={x(index)}
            y={y(value) - 5 } // Subtract Height / 2 to make half of the Rect above the bar
            rx={5} // Set to Height / 2
            ry={5} // Set to Height / 2
            width={bandwidth}
            height={10} // Height of the Rect
            fill={'#ff0000'}

          />
        </G>
      ))
    )

[lauridskern]

Hi, how is the status on this? Happy holidays

[aniruddhashevle]

@JesperLekland : We can use stroke-linecap="round" for path to make both the sides of the path rounded.

[DarbyBrown]

Another solution is to use a transparent fill on the bars themselves, and create a new path with rounded corners.
This way you don't have to consider this:

Though keep in mind that you may need to do adjustments to Grid and YAxis if you use those, the rect will increase the height of the bar since half of the Rect need to be above the existing bar.

gist for function creating a path with rounded corners https://gist.github.com/danielpquinn/dd966af424030d47e476

import React from 'react';
import { G, Path } from 'react-native-svg';

import { roundedRectData } from '../utils/roundedRectData';

// this is a hack to add rounded top to the chart
const RoundedBars = ({ x, y, bandwidth, data, height, contentInset }) => {
  return data.map((item, index) => (
    <G x={x(index)} y={y(item.value)}>
      <Path
        d={roundedRectData(
          bandwidth,
          height - y(item.value) - (contentInset?.bottom || 0),
          bandwidth / 2,
          bandwidth / 2
        )}
        fill={item.svg.fill}
      />
    </G>
  ));
};

export default RoundedBars;

Result