react-native-svg-charts icon indicating copy to clipboard operation
react-native-svg-charts copied to clipboard

Linear gradient is not working in SVG belowChart.

Open acollazomayer opened this issue 4 years ago • 0 comments

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

acollazomayer avatar Feb 08 '21 09:02 acollazomayer