JavaScript Multi-Pane Stock Charts using Subcharts

JavaScript Multi-Pane Stock Charts using Subcharts

Overview

This example demonstrates how to implement a high-performance multi-pane stock chart using JavaScript. It leverages the SciChart.js Sub-Charts API to render several synchronized panes—including a candlestick series, a MACD indicator with divergence and band series, and an RSI chart—on a single shared WebGL chart surface. This approach optimizes rendering performance while keeping interactions such as zooming, panning, and crosshair updates in sync across all panes.

Technical Implementation

The chart is constructed using the Builder API with JSON configuration via the call to chartBuilder.build2DChart(). This method initializes the primary SciChartSurface along with multiple sub-chart surfaces positioned dynamically using Rect definitions. For enhanced interactivity, custom chart modifiers and SVG annotations, such as the FinChartLegendModifier and FinChartLegendAnnotation, are implemented to provide real-time tooltips and interactive legends. These modifiers update dynamically based on mouse movements and are closely integrated with the axis synchronization logic, which is achieved by subscribing to the axis.visibleRangeChanged event on the x-axes of each sub-chart. For further technical details on creating custom annotations, refer to the Tutorial 06 - Adding Annotations.

Features and Capabilities

The example showcases a wide array of advanced features including:

• Sub-Charts API usage: All sub-charts share a single WebGL context, significantly boosting performance and ensuring synchronized interactions. More details on this approach can be found in the Creating Resizable Multi Pane Charts with SubCharts documentation.
• Axis Synchronization: Axis ranges across different panes are linked using event subscriptions, ensuring a unified zoom and pan experience as described in the Synchronizing Multiple Charts documentation.
• Custom Chart Modifiers and SVG Annotations: Interactive SVG legends are generated via custom modifiers that update in real-time based on pointer events.
• Dynamic Technical Indicator Calculation: The MACD and RSI values are computed on-the-fly using JavaScript, allowing for immediate feedback as the data updates.
• Custom Palette Providers: Conditional coloring is applied through custom palette providers to visually distinguish between rising and falling values. Developers may consult the The PaletteProvider API for further customization options.

Integration and Best Practices

This implementation is built entirely in JavaScript and follows best practices for high-performance charting with SciChart.js. The use of a shared WebGL context, efficient JSON-based Builder API configuration, and dynamically synchronized axes demonstrates a robust approach to trading chart applications. In addition, the example includes custom event handling for drag-resize logic, which allows users to adjust the sub-chart pane sizes on the fly. To learn more about optimizing performance, developers can review the Performance Tips & Tricks guide.