Market Depth chart using react-stockchart?

Question

Is it somehow possible to make depth chart as in the following image using react-stockchart library.

Any suggestions is welcome even if it is achievable by using any other charting library in react. This chart is using step area chart. But solution or idea using area chart would also be great.

Image Reference: https://www.gdax.com/trade/BTC-USD

Answer 1

Solution to this is multi series area chart. Here one series of data is related to sell orders and another series of data is related to buy orders(eg. the green chart resembles the data related to buy order and the red chart resembles the data related to sell orders.). In case they overlap the orders should be matched and executed.