React native svg chart graphs

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

As this is giving me a simple gradient but i am need a gradient like this. How can i get it in this gradient .

Let me know how can i draw it like this image so that each gradient have some borderradius at the top and and have a custom gradient colors as per image and also can be of small width instead of long.

Answer 1

You can give vertical gradient by this x2={'0%'} y2={'100%'} in Gradient function and for rounded corners you can try this

To change width of bar you may try spacingInner property. To give gradient to all bars, we should manage svg fill property of data array. here is the link of your barchart code demo. Please check if it helps.