Styling a JavaScript Chart in Code

Styling a Chart in Code (JavaScript)

Overview

This example demonstrates how to apply in-code chart styling using SciChart.js in a JavaScript environment. The code programmatically customizes various chart elements such as the chart background via sciChartSurface.background, NumericAxis properties (including axisTitleStyle, major/minorGridLinesStyle, major/minorTickLinesStyle, labelStyle, backgroundColor and axisBorder, as well as annotations and interactive modifiers. This approach provides a clear and flexible way to style charts without relying on external themes or frameworks.

Technical Implementation

The chart is initialized asynchronously using the SciChartSurface.create() method, which leverages WebAssembly for optimal performance. Developers can refer to the Creating a new SciChartSurface and loading Wasm documentation for more details on this initialization pattern. The implementation focuses on detailed custom axis styling, where NumericAxis properties are configured for both the X and Y axes. Specific styling options like axis bands, custom dashed line styles for grid lines, and bespoke tick settings are applied to enhance the visual presentation. The configuration of these properties is explained in the Axis Styling Documentation. Interactive modifiers such as ZoomPanModifier and MouseWheelZoomModifier are integrated to allow users to pan and zoom within the chart. More on these interactivity features can be found in Tutorial 03 - Adding Zooming, Panning Behavior.

Features and Capabilities

This example highlights several advanced features including:

• Detailed customization of axis styling with tailored fonts, colors, grid line dash patterns, and axis borders.
• The use of a text annotation, configured with relative coordinate modes, to serve as a watermarked chart title. For additional information on annotations, visit the TextAnnotation Documentation.
• Interactive chart modifiers that provide smooth zooming and panning functionality.
• A proper resource management strategy where the SciChartSurface is disposed of when no longer needed, ensuring optimal memory usage as discussed in Memory Best Practices.

Integration and Best Practices

By integrating SciChart.js directly with JavaScript, this example establishes a modular and maintainable approach without the overhead of additional frameworks. Developers can get started quickly by following guidance from the Tutorial 01 - Including SciChart.js in an HTML Page using CDN. Furthermore, the in-code styling method promotes a clear separation between configuration and presentation, ensuring that chart appearance can be easily updated without altering core functionality. For those interested in expanding the customization further, the Chart Styling - Creating a Custom Theme documentation provides additional insights on applying custom color schemes and theme settings.