We’ve created a live demo of a Market Depth Chart here. There’s a description of the example & links to source code in the example page above.
The Depth Chart is rendered as two mountain series back to back, after transforming bid/offers into cumulative sums.
Interaction is provided by a custom modifier. The DepthCursorModifier has to manage 8 different annotations to make all this work. That sounds a bit scary, but consider that you have the ability to customise every aspect of all of those annotations. I haven’t added configuration properties for them all to the main modifier, but you could. The way it works is to hit-test each series and then do another hit-test on the other series the opposite side of the mid line.
I also implemented custom x-Axis tick labels so they only show where there are large jumps in the volume profile.
Note that this modifier probably will not work as is if you try to use it in a vertical chart. It would just requires a bit of swapping of x and y.
Hi. I’m more interested in the hovering behavior. is it possible to implement behavior like here
Hi Alex, David from our JS team is working on an example to show how to do this. Will publish something soon!
hi Andrew! thanks. i’m excited and looking forward to the example
- You must login to post comments
David, hello again. I’m having trouble again, can you please advise me. For unknown reason – textAnnotation does not update at all
Please login first to submit.