Data Labels

Data Labels - JavaScript

Overview

This example demonstrates advanced customization of data labels in a SciChart.js chart using JavaScript. The implementation sets up a SciChartSurface with numeric axes and multiple renderable series to showcase how dynamic label styling and metadata-driven text labels can enhance data visualization.

Technical Implementation

The chart is constructed by first creating a SciChartSurface and adding numeric X and Y axes. Three renderable series are configured: a column series with dynamic label colors using a custom function in the DataLabelProvider, a spline series that extracts label text from metadata via a custom metaDataSelector (see Getting Labels from Metadata), and a line series that conditionally displays labels only at peak values using a customized getText function as detailed in Custom DataLabel Formatting with getText(). Interactive modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier are incorporated to enable smooth zooming and panning, which can be explored further in Adding Zooming, Panning Behavior.

Features and Capabilities

The example illustrates several advanced features including conditional label styling based on data values, metadata-driven labels, and performance optimizations achieved by showing labels only when there is sufficient space. In addition, custom point markers like EllipsePointMarker are used to clearly highlight data points. Dynamic color styling is applied using the parseColorToUIntArgb() function, aligning with techniques described in Data Label Colouring.

Integration and Best Practices

This implementation adheres to best practices in resource management by encapsulating chart creation within an asynchronous function that returns a cleanup mechanism for disposing of the SciChartSurface. Developers leveraging JavaScript can refer to the Getting Started with SciChart JS guide to understand proper initialization and disposal of chart resources. The example’s modular approach ensures that chart configuration remains maintainable and scalable while enabling advanced interactive visualization through integrated chart modifiers.