area-chart.js

import React from 'react'
import { ClipPath, Defs, LinearGradient, Rect, Stop } from 'react-native-svg'
import { AreaChart, Path } from 'react-native-svg-charts'

class PartialAreaChartExample extends React.PureComponent {
    render() {
        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]

        const indexToClipFrom = 10

        const Gradient = () => (
            <Defs key={ 'defs' }>
                <LinearGradient id={ 'gradient' } x1={ '0%' } y={ '0%' } x2={ '0%' } y2={ '100%' }>
                    <Stop offset={ '0%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.8 }/>
                    <Stop offset={ '100%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.2 }/>
                </LinearGradient>
            </Defs>
        )

        const Clips = ({ x, width }) => (
            <Defs key={ 'clips' }>
                <ClipPath id={ 'clip-path-1' } key={ '0' }>
                    <Rect x={ 0 } y={ '0' } width={ x(indexToClipFrom) } height={ '100%' }/>
                </ClipPath>
                <ClipPath id="clip-path-2" key={ '1' }>
                    <Rect x={ x(indexToClipFrom) } y={ '0' } width={ width - x(indexToClipFrom) } height={ '100%' }/>
                </ClipPath>
            </Defs>
        )

        const Line = ({ line }) => (
            <Path
                key={ 'line' }
                d={ line }
                stroke={ 'green' }
                fill={ 'none' }
                clipPath={ 'url(#clip-path-1)' }
            />
        )

        const DashedLine = ({ line }) => (
            <Path
                key={ 'dashed-line' }
                stroke={ 'green' }
                d={ line }
                fill={ 'none' }
                clipPath={ 'url(#clip-path-2)' }
                strokeDasharray={ [ 4, 4 ] }
            />
        )

        return (
            <AreaChart
                style={{ height: 200 }}
                data={ data }
                contentInset={{ top: 30, bottom: 30 }}
                svg={{
                    fill: 'url(#gradient)',
                    clipPath: 'url(#clip-path-1)',
                }}
            >
                <Gradient/>
                <Clips/>
                <Line/>
                <DashedLine/>
            </AreaChart>
        )
    }
}

export default PartialAreaChartExample