LinearGradient/RadialGradient doesn't work for StackedAreaChart

[aniruddhashevle]

What is the problem?

LinearGradient or RadialGradient doesn't work for StackedAreaChart but it works on AreaChart!

What platform?

• [x] iOS
• [x] Android

React Native version: 0.61.4 react-native-svg-charts-version: 5.3.0

Code to reproduce

I referred this code for StackedAreaChart : https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-stack/with-y-axis.js

Defined Gradient as,

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

Used Gradient in StackedAreaChart

<StackedAreaChart
    style={{ flex: 1, }}
    data={areaData}
    contentInset={{ top: 10 }}
    keys={['x']}
    colors={['rgba(0, 0, 255, .2)']}
    svg={{ fill: 'url(#gradient)' }}
    curve={shape.curveNatural}
>
     <Grid />
     <Gradient />
</StackedAreaChart>

The above code doesn't show any Gradient effect, but the same Gradient effect works for AreaChart!

[scottwelz]

what about using the renderGradient prop?

export interface StackedAreaChartProps extends ChartProps { keys: ReadonlyArray; colors: string[]; offset?: OffsetFunction; order?: OrderFunction; renderGradient?: (props: { id: string, width: number, height: number, x: number, y: number, index: number, key: keyof T, color: string, }) => React.Component<LinearGradientProps | RadialGradientProps>;