Rotated Axis Labels and Alignment

Rotated Axis Labels and Alignment in JavaScript

Overview

This example demonstrates how to customize and rotate axis labels using SciChart.js in a pure JavaScript setting. The main objective is to rotate the X-Axis labels by 90 degrees and apply custom date formatting, which allows more labels to be displayed without overlap when visualizing time series data.

Technical Implementation

The chart is asynchronously initialized by creating a SciChartSurface along with its WebAssembly context. A NumericAxis is configured for the X-Axis with properties such as axis.labelFormat (using the date format ENumericFormat.Date_DDMMYYYY), increased tick counts, and a axis.rotation value set to 90 degrees. Dynamic time series data is generated and rendered using a SplineMountainRenderableSeries that incorporates both gradient fills and a wave animation effect. Developers looking for advanced axis customization can refer to the Rotating Axis Labels documentation, while additional details about date formatting are available in The DateTimeNumericAxis guide.

Features and Capabilities

The implementation highlights several advanced features, including real-time chart updates due to dynamic data generation, visually appealing gradient fills, and smooth transition animations provided by the wave animation effect. For more insights into how such spline mountain charts are constructed, you can review the JavaScript Spline Mountain Area Chart documentation.

Integration and Best Practices

In this JavaScript example, the asynchronous initialization not only enhances performance through WebAssembly integration but also ensures proper resource management. A destructor function is provided to clean up the SciChartSurface when the chart is no longer needed, aligning with best practices detailed in Getting Started with SciChart JS. Moreover, developers interested in configuring animation effects will benefit from the Animations API, which explains how to fine-tune parameters such as duration and fade effects for an optimal display.