JavaScript Chart with Multiple X Axes

Multiple X Axes Example in JavaScript

Overview

This example demonstrates how to create a high-performance chart with multiple X and Y axes using JavaScript and SciChart.js. Its purpose is to showcase the configuration of two independent pairs of numeric axes along with binding data series via unique axis IDs, while integrating interactive modifiers and custom annotations for an enhanced user experience.

Technical Implementation

The implementation begins by initializing a SciChartSurface with a custom theme. Two sets of NumericAxis are added: the primary (blue) set aligned using axis.alignment = EAxisAlignment.Bottom and EAxisAlignment.Left, and the secondary (orange) set aligned to the EAxisAlignment.Top and EAxisAlignment.Right. Data is generated through a random walk generator, and each data series is bound to its corresponding axis by setting a unique on axis.id. Series can then be registered on a specific axis by setting FastLineRenderableSeries.xAxisId and yAxisId. Interactive modifiers, including YAxisDragModifier, XAxisDragModifier as well as zoom, pan, mouse-wheel zoom and zoom-extents are then added. Developers seeking further details on multi-axis configuration may refer to the Tutorial 08 - Adding Multiple Axis and for interactivity see the Tutorial 03 - Adding Zooming, Panning Behavior.

Features and Capabilities

The chart offers several advanced features:

• Multiple Axes Styling: Each numeric axis is customized with properties such as axis.alignment, axis.axisBorder, and background styling via axis.backgroundColor, providing distinct visual themes. More details can be found in the Axis Styling docs.
• Axis Binding: By assigning axis IDs to renderable series, each series is rendered within its designated axis pair, ensuring clear separation and accurate scaling.
• Interactive Modifiers: Modifiers like XAxisDragModifier, YAxisDragModifier, ZoomPanModifier, and MouseWheelZoomModifier enable dynamic interaction, helping users adjust the view in real time.
• Annotations: Both native and text annotations are used to overlay contextual information on the chart.
• WASM Performance: Utilizing a WebAssembly (wasm) context provides superior rendering performance, ensuring the chart remains efficient even with complex datasets. Additional insights are available at Pushing the Boundaries of JavaScript Chart Dashboard Performance.

Integration and Best Practices

Although this example is implemented using JavaScript, it illustrates best practices for resource cleanup and the management of the SciChartSurface lifecycle, as outlined in the Memory Best Practices guide. Even though a React component wrapper is provided for integration into larger applications, the core functionality relies solely on JavaScript, making it adaptable across various frameworks. This approach ensures that developers can easily integrate and expand upon the chart in different environments without the overhead of additional abstraction layers.