Multi-line and Rotated Chart Text labels

Multi-line and Rotated Axis Labels in JavaScript

Overview

This example demonstrates how to implement multi-line labels and rotated axis labels using SciChart.js with JavaScript. The chart visualizes 2022 market share data for mobile phone manufacturers and uses a custom TextLabelProvider to map data indices to descriptive labels. For more details, refer to the Text and Multi-Line Labels documentation.

Technical Implementation

The implementation starts by asynchronously creating a SciChartSurface and handling the underlying WebAssembly context as explained in the Creating a new SciChartSurface guide. The X-Axis leverages a TextLabelProvider configured with properties for maximum text length and rotation (e.g., TextLabelProvider.maxLength and TextLabelProvider.rotation properties) to ensure label clarity. This configuration is further elaborated in the Text / String Axis documentation. Additionally, gradient fill customization for the column series is applied using the PaletteFactory Helper Class, and a wave animation effect is integrated via the Animations API.

Features and Capabilities

The example features real-time update capabilities where label properties such as rotation and maximum length can be dynamically adjusted. It employs a high-performance FastColumnRenderableSeries to render the data efficiently, which is critical for handling complex chart visualizations. Performance optimization techniques can be explored further in the Performance Tips & Tricks documentation.

Integration and Best Practices

This implementation adheres to best practices for JavaScript integration by directly initializing chart components without reliance on a Builder API. Developers are encouraged to utilize the TextLabelProvider for versatile label formatting and to manage the WASM context effectively to ensure optimal performance. The approach presented here serves as a practical example of enhancing chart readability and visual appeal using advanced SciChart.js features.