Background area

[meridPL]

Hi,

I want draw area the background from the top chart to the line. Do you have this option?

[aaronpropst]

I managed to build one by implementing my own custom area, the trick though, was that it needs to be named "Area" Because it is discovered by name by the chart here: https://github.com/N1ghtly/react-native-responsive-linechart/blob/master/src/Chart.tsx#L151

So once I removed the reference to the real Area and established my own, I could create an svg rectangle with a gradient in it.

One bummer about this method though is that it sits on top of the axis gridlines.

Here's the snippet for my area:

const Area = () => {
    return (
        <G>
            <Defs>
                <LinearGradient id={`bgAreaGradient`} x1="0%" y1="0%" x2="0%" y2="100%">
                    <Stop
                        offset="0"
                        stopColor="hsl(169, 100%, 32%)"
                        stopOpacity="1"
                    />
                    <Stop
                        offset="0.5"
                        stopColor="hsl(44, 100%, 56%)"
                        stopOpacity="1"
                    />
                    <Stop
                        offset="1"
                        stopColor="hsl(0, 100%, 62%)"
                        stopOpacity="1"
                    />
                </LinearGradient>
            </Defs>
            <Rect
                x="0"
                y="0"
                width="90%"
                height="75%"
                fill="url(#bgAreaGradient)"
                opacity=".3"
            />
        </G>
    );
};