Chart Legends API

Chart Legends API Example (JavaScript)

Overview

This example demonstrates how to integrate an interactive legend into a high performance 2D chart using SciChart.js in a JavaScript environment. The example sets up a SciChartSurface with numeric axes, multiple line series, and a dynamic legend that can be customized through properties like placement, orientation, checkboxes, and series markers. Developers can get started with this approach by exploring the LegendModifier Documentation documentation.

Technical Implementation

The chart is initialized by calling SciChartSurface.create(), which returns a WebAssembly context (wasmContext) used to optimize rendering performance. Numeric axes are configured using the NumericAxis class with custom label formatting and precision. Multiple FastLineRenderableSeries are added each using an XyDataSeries. dataSeriesName is set which is passed through to the legend. The dynamic legend is created by instantiating a LegendModifier and adding to sciChartSurface.chartModifiers collection with configurable properties such as placement (using ELegendPlacement) and orientation (using ELegendOrientation), enabling advanced legend customization as detailed in the Legend Modifier docs.

Features and Capabilities

This example highlights several advanced features including the ability to dynamically update legend properties such as visibility, checkbox display, and series markers. Additionally, the configuration of chart theming through appTheme indicates how developers can maintain consistent styling across the chart, as described in the Chart Styling - Creating a Custom Theme guide.

Integration and Best Practices

Although this example is implemented using JavaScript, it follows best practices by encapsulating chart creation logic within a dedicated function and leveraging modular design for setting up axes, series, and modifiers. The integration of WebAssembly to enhance rendering performance is a key strategy for efficient real-time data visualization, as explained in Creating a new SciChartSurface and loading Wasm. Developers are encouraged to explore these techniques to build responsive and high performance chart applications.