title: react-native-svg-charts Areachart renders an extra bottom line
body: <p>I am using react-native-svg-charts to render some charts. In my case i use area chart (see image below). When the last data entries have same values, there is a bottom line appearing </p>
  
  <p><a href="https://i.stack.imgur.com/NUUzH.png" rel="nofollow noreferrer" title="actual"><img src="https://i.stack.imgur.com/NUUzH.png" alt="Actual" title="actual"></a></p>
  
  <p><a href="https://i.stack.imgur.com/WRPum.png" rel="nofollow noreferrer" title="expected"><img src="https://i.stack.imgur.com/WRPum.png" alt="Expected" title="expected"></a></p>
  
  <p>Here is how i render the area chart</p>
  
  <pre><code>&lt;AreaChart style = {{height: '100%', width: '100%' }} data = {Object.values(chartData)} curve={shape.curveBasis} 
             svg={{ fill: 'url(#gradient)', stroke: 'blue', fillOpacity: 0.8, scale: 1.002, strokeWidth: 0 }} 
             contentInset={{ top: scaleHeight(10), bottom: scaleHeight(10) }} animate &gt;
     &lt;Gradient/&gt;
  &lt;/AreaChart&gt;
  </code></pre>
  
  <p>The code for Gradient is as follows</p>
  
  <pre><code> const Gradient = ({ index }) =&gt; (
          &lt;Defs key={index}&gt;
              &lt;LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}&gt;
                  &lt;Stop offset={'0%'} stopColor="blue" stopOpacity={1}/&gt;                    
                  &lt;Stop offset={'100%'} stopColor="white" stopOpacity={1}/&gt;
              &lt;/LinearGradient&gt;
          &lt;/Defs&gt;
      )
  </code></pre>