line-chart.js

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

class PartialLineChartExample 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 Clips = ({ x, width }) => (
            <Defs key={ 'clips' }>
                <ClipPath id="clip-path-1">
                    <Rect x={ '0' } y={ '0' } width={ x(indexToClipFrom) } height={ '100%' }/>
                </ClipPath>
                <ClipPath id={ 'clip-path-2' }>
                    <Rect x={ x(indexToClipFrom) } y={ '0' } width={ width - x(indexToClipFrom) } height={ '100%' }/>
                </ClipPath>
            </Defs>
        )

        // Line extras:
        const DashedLine = ({ line }) => (
            <Path
                key={ 'line-1' }
                d={ line }
                stroke={ 'rgb(134, 65, 244)' }
                strokeWidth={ 2 }
                fill={ 'none' }
                strokeDasharray={ [ 4, 4 ] }
                clipPath={ 'url(#clip-path-2)' }
            />
        )

        const Shadow = ({ line }) => (
            <Path
                y={ 3 }
                key={ 'shadow-1' }
                d={ line }
                stroke={ 'rgba(134, 65, 244, 0.2)' }
                strokeWidth={ 5 }
                fill={ 'none' }
            />
        )

        return (
            <LineChart
                style={{ height: 200 }}
                data={ data }
                contentInset={{ top: 20, bottom: 20 }}
                svg={{
                    stroke: 'rgb(134, 65, 244)',
                    strokeWidth: 2,
                    clipPath: 'url(#clip-path-1)',
                }}
            >
                <Clips/>
                <Shadow/>
                <DashedLine/>
            </LineChart>
        )
    }
}

export default PartialLineChartExample