JavaScript Chart with Logarithmic Axis Example

Logarithmic Axis Example (JavaScript)

Overview

This example demonstrates how to create a high-performance SciChart.js chart featuring LogarithmicAxis configuration using JavaScript. The implementation plots exponential curves on both the X and Y axes while allowing runtime toggling between logarithmic and linear axis configurations.

Technical Implementation

The chart is asynchronously initialized using SciChartSurface.create, which loads the WebAssembly context and applies a custom theme for styling. Two LogarithmicAxis are configured with properties such as logBase, labelFormat, and labelPrecision; details of these configurations can be found in the Logarithmic Axis Documentation. Renderable series are created using FastLineRenderableSeries in combination with XyDataSeries to plot exponential curves, and each series is enhanced with a SweepAnimation for smooth visual transitions.

Features and Capabilities

The example showcases real-time update capabilities by enabling users to seamlessly switch between logarithmic and linear axis states at runtime. It integrates interactive modifiers such as RubberBandXyZoomModifier and MouseWheelZoomModifier to facilitate intuitive zooming and panning. Additionally, the application of custom theming—including grid line brushes and title styling—illustrates how visual aspects can be tailored to meet specific design requirements. For additional context on building high-performance charts, refer to Getting Started with SciChart JS.

Integration and Best Practices

Despite being a JavaScript example, the implementation follows best practices in asynchronous initialization, interactive behavior, and dynamic configuration. The runtime axis switching is handled by toggling the visibility and primary status of the axes, ensuring that the currently active axes are correctly bound to the series data; this approach is in line with the guidance provided in the SciChart.js Documentation. Developers looking to optimize performance and customize their charts further can benefit from exploring the available Performance Tips & Tricks provided by SciChart.js.