Chart Axis Image labels

Image Labels on Axis Example - JavaScript

Overview

This example demonstrates how to integrate SciChart.js using JavaScript to create a high-performance column chart with custom image labels replacing traditional text labels on the X-axis. The chart visualizes mobile phone market share data by mapping numeric indices to asynchronously loaded images, creating an engaging and visually appealing representation.

Technical Implementation

The chart initialization is performed procedurally by creating a SciChartSurface with a images instead of axis labels, as described in the Image Labels Documentation. A numeric X-axis is configured using the NumericAxis and its label provider is customized by overriding the LabelProvider.getLabelTexture and LabelProvider.getLabelTextureAsync methods. This customization leverages the asynchronous helper function createImagesArrayAsync to load images efficiently and use the TextureManager for dynamic texture creation. Furthermore, a gradient fill is applied to the column series using the PaletteFactory, which enhances visual transitions and overall aesthetics.

Features and Capabilities

Key features include the real-time animation of the column series using WaveAnimation and the implementation of custom palette providers for dynamic gradient colors. The asynchronous image loading and deferred texture creation optimize performance, ensuring that the chart runs smoothly even with multiple custom label textures.

Integration and Best Practices

This example follows best practices for JavaScript chart integration by using a procedural, step-by-step initialization approach instead of relying on framework-specific hooks or the Builder API. Developers benefit from explicit control over chart customization, as each component—from the axis configuration to the advanced label rendering—is directly managed. For further details on custom label rendering and performance optimization, consult the Image Labels Documentation and review the Performance Tips & Tricks in the SciChart.js documentation.