Datapoint Metadata Tooltips on JavaScript Chart

MetaData Labels, Tooltips and Rendering Example - JavaScript

Overview

This example, demonstrates how to create an interactive line chart using SciChart.js with JavaScript. It visualizes a dataset where each Xy data point is augmented with metadata that drives customizations such as point colors, dynamic labels, and interactive tooltips.

Technical Implementation

The chart is set up by asynchronously initializing a SciChartSurface with configured X and Y axes using the NumericAxis class and a defined growBy range via NumberRange. An XyDataSeries is created by mapping the provided X and Y values and attaching a metadata object (a custom JavaScript object) for each Xy data point. Customizations are applied through a custom PaletteProvider that adjusts the color of each point marker based on metadata. This is achieved using the helper function parseColorToUIntArgb for color conversion. Additionally, a custom DataLabelProvider extracts labels from metadata with a metaDataSelector, following concepts from Getting Labels from Metadata. A RolloverModifier is employed to provide interactive tooltips, enabling dynamic adjustments of marker and tooltip colors based on the underlying data. Text annotations are added using the TextAnnotation class, which supports relative coordinate modes for flexible placement.

Features and Capabilities

This example showcases metadata-driven customization where additional properties within each data point dictate not only the visual styling (such as point marker color via a custom palette provider) but also the data labels and tooltips. Such an approach allows each data point to be individually styled and can support features like highlighting or selection. Developers seeking to further understand the concepts can read about the DataSeries Metadata API here.

Integration and Best Practices

The implementation follows best practices for asynchronous initialization and resource cleanup in JavaScript, as shown by returning a destructor function that disposes of the SciChartSurface when no longer needed. This pattern is recommended in the Getting Started with SciChart JS guide. Although a React wrapper is provided in the project, the core implementation uses plain JavaScript, making it highly adaptable to various environments. By leveraging these techniques, developers can build highly interactive charts with a focus on performance and maintainability.