React native svg charts border radius from top

Question

import React from 'react'
import { BarChart, Grid } from 'react-native-svg-charts'
import { Defs, LinearGradient, Stop } from "react-native-svg";

class ColorBarExample extends React.PureComponent {

    render() {

        const data = [
            {
                value: 50,
            },
            {
                value: 10,
                svg: {
                    fill: 'rgba(134, 65, 244, 0.5)',
                },
            },
            {
                value: 40,
                svg: {
                    stroke: 'purple',
                    strokeWidth: 2,
                    fill: 'white',
                    strokeDasharray: [ 4, 2 ],
                },
            },
            {
                value: 95,
                svg: {
                    fill: 'url(#gradient)',
                },
            },
            {
                value: 85,
                svg: {
                    fill: 'green',
                },
            },
        ]

        const Gradient = () => (
            <Defs key={'gradient'}>
                <LinearGradient id={'gradient'} x1={'0'} y={'0%'} x2={'100%'} y2={'0%'}>
                    <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'}/>
                    <Stop offset={'100%'} stopColor={'rgb(66, 194, 244)'}/>
                </LinearGradient>
            </Defs>
        )

        return (
            <BarChart
                style={{ height: 200 }}
                data={data}
                gridMin={0}
                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                yAccessor={({ item }) => item.value}
                contentInset={{ top: 20, bottom: 20 }}
            >
                <Grid/>
                <Gradient/>
            </BarChart>
        )
    }

}

export default ColorBarExample

I am using this code. I need a help to make add border radius at the top of the charts bar. So i also see files of the animated-path.js and other in the svg charts. But didn't get how to make borders round in the code using d3 shape or anything else. Let me know if get an idea to make it round at the top.

Answer 1

You can use a custom decorator function to achieve this.

  const RoundedCorners = ({x, y, bandwidth, data}) => {
return data.map((item, idx) => item.data.map((value, index) => {
    return (
        <G>
            <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={'red'}
            />
        </G> 
    )
}))

}

And then, just add component as a BarChart Child:

        <BarChart
            style={{ height: 200 }}
            data={data}
            gridMin={0}
            svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
            yAccessor={({ item }) => item.value}
            contentInset={{ top: 20, bottom: 20 }}
        >
            <Grid/>
            <Gradient/>
            <RoundedCorners/>
        </BarChart>