Depth Chart

Hi Alex,

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.