content: 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
  