JavaScript Chart with Central Axes

Central Axes JavaScript Chart

Overview

This example demonstrates how to create a high-performance chart with central axes using SciChart.js in a JavaScript framework. The chart positions the x and y axes to cross at the data value (0,0), producing an oscilloscope-like layout. It leverages the advanced customization available in SciChart.js for axis placement, as detailed in the Central Axis Layout documentation.

Technical Implementation

The implementation begins by initializing a SciChartSurface with an integrated WebAssembly context, following guidelines from the Tutorial 01 - Including SciChart.js in an HTML Page using CDN documentation. Both the x and y axes are configured as inner axes by enabling the axis.isInnerAxis property and aligned to the center by setting the sciChartSurface.layoutManager property equal to a CentralAxesLayoutManager instance with data value based positioning. A dynamically generated butterfly curve is rendered using the FastLineRenderableSeries and utilizes a fade animation as provided by the Animations API for performance and visual enhancement. Interaction is further enriched with modifiers such as ZoomPanModifier, MouseWheelZoomModifier, and ZoomExtentsModifier, which support smooth zooming and panning.

Features and Capabilities

This example showcases advanced chart capabilities such as real-time data rendering for complex curves and dynamic interactivity. The efficient use of WebAssembly ensures high performance even when visualizing large data sets. Additionally, the chart demonstrates clear separation of concerns by isolating initialization, axis configuration, data rendering, and user interaction, which allows for robust customization based on the application’s needs.

Integration and Best Practices

Integrating SciChart.js into a JavaScript application is streamlined by employing a modular approach where the chart initialization function is directly invoked with a designated root element. Resource cleanup is handled by returning a destructor function that calls the delete() method on the SciChartSurface, in line with best practices suggested in the Memory Best Practices documentation. Developers looking to extend or optimize their chart applications can also refer to the Getting Started with SciChart JS guide for additional insights on integration and performance optimization.