react-native-svg-charts
react-native-svg-charts copied to clipboard
Linear gradient is not working in SVG belowChart.
What is the problem?
I am trying to set a background gradient to the graph, LinearGradient is now working inside the SVG with belowChart true.
When does it happen?
What platform?
- [x] iOS
- [x] Android
react-native version: 0.63.4
react-native-svg-charts version: 5.4.0
react-native-svg version: 12.1.0
Code to reproduce
<View style={{flex: 1, flexDirection: 'row'}}>
<LineChart
style={{flex: 1, marginLeft: 16}}
data={data}
svg={{stroke: '#0000001A', strokeWidth: 6}}
contentInset={contentInset}>
<Defs>
<LinearGradient id="background" x1="0" y1="0" x2="1" y2="1">
<Stop
offset="0"
stopColor="white"
stopOpacity="1"
/>
<Stop
offset="1"
stopColor="black"
stopOpacity="1"
/>
</LinearGradient>
</Defs>
<Svg belowChart={true}>
<Rect
x="0"
y="0"
height="100%"
width="100%"
fill="url(#background)"
/>
</Svg>
</LineChart>
</View>
```
<!--
### 🚨Bug reports without reproducible code will be closed
This is due the fact, that maintainers do this in their free time and without reproducible code, it's very time consuming to find a culprit of a bug.
-->
<!--
> Preferably use https://snack.expo.io to share reproducible code.
-->
```javascript
// put code here