2

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

Actual

Expected

Here is how i render the area chart

<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 >
   <Gradient/>
</AreaChart>

The code for Gradient is as follows

 const Gradient = ({ index }) => (
        <Defs key={index}>
            <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
                <Stop offset={'0%'} stopColor="blue" stopOpacity={1}/>                    
                <Stop offset={'100%'} stopColor="white" stopOpacity={1}/>
            </LinearGradient>
        </Defs>
    )
user2564429
  • 260
  • 2
  • 11
  • 2
    The issue was with the stroke used in svg prop. with stroke, bottom margin is also drawn. Replacing that with Path component helped solved the issue. (taken from this example: https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-chart/with-line.js) – user2564429 Dec 12 '18 at 16:18

0 Answers0