Example of clipped area chart

clipped-area-chart-example.tsx

import React from 'react'
import { StyleSheet, View } from 'react-native'

import { AreaChart, XAxis, YAxis } from 'react-native-svg-charts'
import { Defs, ClipPath, Rect } from 'react-native-svg'

export interface ITimeValueChartDatapoint {
  value: number
  date: Date
}

interface IChartProps {
  data: ITimeValueChartDatapoint[]
}

const Clips = ({ y, width, firstPoint }: any) => {
  const y0 = y(firstPoint.value)
  return (
    <Defs key={'clips'}>
      <ClipPath id={'clip-path-1'} key={'path-1'}>
        <Rect x={0} y={'0'} width={width} height={y0} />
      </ClipPath>
      <ClipPath id={'clip-path-2'} key={'path-2'}>
        <Rect x={0} y={y0} width={width} height={'100%'} />
      </ClipPath>
    </Defs>
  )
}

const AccountValueHistoryChart = ({ data }: IChartProps) => {
  if (!data.length) return null
  const maxValue = Math.max.apply(
    null,
    data.map((point) => point.value)
  )
  const minValue = Math.min.apply(
    null,
    data.map((point) => point.value)
  )
  const yMax = 1.1 * maxValue
  const yMin = 0.85 * minValue


  return (
    <View style={chartStyles.chartView}>
      <YAxis />
      <View style={chartStyles.columnView}>
        <View style={[chartStyles.columnView, { flexDirection: 'row' }]}>
          <AreaChart
            style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
            data={data}
            yMax={yMax}
            yMin={yMin}
            svg={{
              clipPath: 'url(#clip-path-2)',
            }}
          >
            <Clips firstPoint={data[0]} />
          </AreaChart>
          <AreaChart
            style={{ flex: 1 }}
            data={data}
            svg={{
              clipPath: 'url(#clip-path-1)',
            }}
            yMax={yMax}
            yMin={yMin}
            start={data[0].value}
          >
            <Clips firstPoint={data[0]} />
          </AreaChart>
        </View>
        <XAxis/>
      </View>
    </View>
  )
}

const chartStyles = StyleSheet.create({
  chartView: {
    width: '100%',
    height: 280,
    flex: 1,
    flexDirection: 'row',
  },
  columnView: {
    height: 280,
    flex: 1,
  },
})

export default AccountValueHistoryChart