How to create a market depth chart

[longpq18]

[JesperLekland]

Check out the examples repo for partial charts and gradient decorators.

[Sandeep200995]

The above example repo is empty please suggest any svg for Market Depth Chart (same as above image)in react native .

[JesperLekland]

My bad, link was broken. Fixed now 👍

[thanhvk]

Recently I faced this challenge. I have resolved it by using the area chart.

• the result:
  
• fake data to test: https://raw.githubusercontent.com/thanhvk/tomox-sdk-dapp/master/src/components/DepthChart/data.js
• my code (details in here):

<View style={{ height: 200 }}>
    <AreaChart
        style={{ flex: 1 }}
        data={ data }
        contentInset={{ top: 30, bottom: 30 }}
        svg={{
            fill: 'url(#bid-gradient)',
            clipPath: 'url(#clip-path-bid)',
        }}
        curve={ shape.curveStep }
        yAccessor={ ({ item }) => item.total }
        xAccessor={ ({ item }) => item.price }
        xScale={ scale.scaleLinear }
    >
        <BidGradient/>
        <Clips/>
    </AreaChart>

    <AreaChart
        style={ StyleSheet.absoluteFill }
        data={ data }
        contentInset={{ top: 30, bottom: 30 }}
        svg={{
            fill: 'url(#ask-gradient)',
            clipPath: 'url(#clip-path-ask)',
        }}
        curve={ shape.curveStep }
        yAccessor={ ({ item }) => item.total }
        xAccessor={ ({ item }) => item.price }
        xScale={ scale.scaleLinear }
    >
        <AskGradient/>
        <Clips/>
        <BidLine/>
        <AskLine/>
    </AreaChart>
</View>

Hope it will be helpful for someone who is looking a solution to create depth chart with react-native-svg-charts.
Thank you for the great library.