JavaScript Market Depth Chart

JavaScript Depth Chart

Overview

This example demonstrates how to build a high-performance Market Depth Chart using JavaScript and SciChart.js. It visualizes cumulative buy and sell order book data with two mountain series and a bespoke custom modifier that enhances mouse interactions, annotations, and hit testing.

Technical Implementation

The chart is initialized via the drawExample function which creates a SciChartSurface, configures NumericAxis, and instantiates two FastMountainRenderableSeries for buy and sell data. The custom modifier, DepthCursorModifier, is implemented directly using the core SciChart.js API to manage mouse events, dynamic annotations, and coordinate transformations. Developers can explore advanced customization through the Custom Chart Modifier API, which is leveraged to handle tasks such as updating crosshair lines and markers based on real-time mouse movement. The implementation also employs accurate hit testing using the RenderableSeries Hit-Test API and transforms canvas coordinates to data coordinates using the Axis APIs - Convert Pixel to Data Coordinates.

Features and Capabilities

Key features include real-time updating of annotations, dynamic highlighting of data points, and robust mouse event handling that provides a seamless interactive experience. The chart efficiently computes the mid-price between buy and sell data points and highlights the interactive region with crosshair annotations.

Integration and Best Practices

This example follows best practices for resource management in JavaScript by providing a cleanup (destructor) function that disposes of the SciChartSurface when no longer needed. Additionally, performance optimizations are achieved through careful DPI scaling and efficient update routines as described in the Performance Tips & Tricks documentation. The implementation reinforces principles for developing high-performance, interactive charts while maintaining clear separation of concerns and robust handling of chart events.