Axis Types

Axis Types Example in JavaScript

Overview

This example demonstrates how to configure and integrate different axis types in SciChart.js using JavaScript. It combines a variety of axes including a CategoryAxis with string text labels provided by a TextLabelProvider, a NumericAxis for numerical data with prefix and postfix formatting, a DateTimeNumericAxis that auto-formats dates based on the date range, and a LogarithmicAxis for log-scaled data.

Technical Implementation

The chart is constructed by creating a new SciChartSurface along with a WebAssembly context using the function SciChartSurface.create(). Multiple axes are programmatically added by instantiating their respective classes, for example, the CategoryAxis and DateTimeNumericAxis (see DateTimeNumericAxis for details). A custom palette provider (AxisTypesPaletteProvider) is implemented by overriding methods such as overrideFillArgb, in line with the guidelines provided in the PaletteProvider documentation.

Features and Capabilities

The example emphasizes high-performance rendering using fast renderable series like FastColumnRenderableSeries and FastLineRenderableSeries; these components are optimized for large datasets as described in the FastColumnRenderableSeries documentation. It also demonstrates asynchronous data integration, where real-time data is fetched and appended to XyDataSeries (DataSeries Append/Update), ensuring the chart remains responsive. Additionally, interactive chart modifiers such as ZoomPanModifier, MouseWheelZoomModifier, and ZoomExtentsModifier are incorporated to support dynamic zooming and panning functions (refer to Adding Zooming, Panning Behavior for more information).

Integration and Best Practices

Although this example is implemented in JavaScript, it is designed to be easily integrated into other frameworks, as seen in the accompanying React integration via the <SciChartReact/> component. Developers are encouraged to follow performance optimization techniques such as leveraging WebGL and WebAssembly for rapid rendering—topics covered in the Performance Tips & Tricks documentation. Furthermore, custom axis labeling is achieved using the TextLabelProvider, enabling developers to fully customize how string labels are displayed on a CategoryAxis (see TextLabelProvider for additional context). Overall, the example illustrates advanced features like real-time updates and custom styling, providing a comprehensive foundation for building high-performance financial charting applications with SciChart.js.