Using Theme Manager in JavaScript Chart

Themeing JavaScript Charts with SciChart.js

Overview

This example demonstrates how to leverage SciChart.js in a JavaScript environment to initialize and render multiple chart surfaces, each with its own distinct theme. The implementation showcases the use of built-in themes such as Navy (SciChartJsNavyTheme), Light (SciChartJSLightTheme), and Dark (SciChartJSDarkv2Theme) alongside a customTheme created by merging properties from a built-in theme (see IThemeProvider) using the spread operator. This approach is ideal for developers looking to customize chart appearances while maintaining high performance in data visualization projects.

Technical Implementation

The code uses asynchronous programming with async/await to create multiple chart surfaces concurrently via Promise.all(). Each chart is initialized using the SciChartSurface.create() method, which accepts a theme object (for example, SciChartJsNavyTheme, SciChartJSLightTheme, or a custom theme) and returns a chart instance. Animated line series are rendered using the EAnimationType.Sweep animation option, and annotations (like TextAnnotation with relative coordinate modes) are used to add titles to the charts. For further details on initializing charts with specific themes, see Chart Styling - ThemeManager API, and for asynchronous setup, refer to Getting Started with SciChart JS.

Features and Capabilities

The example illustrates several advanced capabilities including animated line series, custom theming, and efficient resource management through proper clean-up of SciChartSurface instances. The custom theme creation leverages JavaScript’s spread operator to extend a built-in theme with new properties, an approach detailed in Chart Styling - Creating a Custom Theme. Additionally, performance optimization techniques, such as asynchronous surface creation and proper disposal of resources, are important for maintaining optimal performance; more information is available in Performance Tips & Tricks.

Integration and Best Practices

This example integrates SciChart.js directly into a JavaScript application without relying on frameworks like React, managing DOM elements and resource disposal explicitly. Developers are encouraged to adopt best practices for memory and resource management, as outlined in the Memory Best Practices documentation, to ensure that chart surfaces are properly disposed of when no longer needed.

By following these techniques, the example provides a comprehensive guide to creating themed, animated, and high-performance charts with SciChart.js using JavaScript.