Dashed Line Styling

Dashed Line Styling - JavaScript

Overview

This example demonstrates the use of SciChart.js to create high performance dashed line charts using JavaScript. The focus is on rendering series with advanced dashed and dotted line styles along with gradient fills, providing a clear illustration of custom styling capabilities.

Technical Implementation

The chart is initialized asynchronously using SciChartSurface.create() in a dedicated drawExample function. Numeric axes are configured with custom label formatting and precision. Several renderable series are added including a mountain (area) series with a gradient fill implemented using GradientParams as described in The Mountain (Area) Series Type and multiple line series with varying strokeDashArray values to achieve dashed and dotted effects (refer to Series Styling - Dash Line Patterns for more details). Interactive modifiers such as ZoomPanModifier, MouseWheelZoomModifier, and ZoomExtentsModifier further enhance user interaction, while the use of the WebAssembly context (wasmContext) aids performance as noted in Performance Tips & Tricks.

Features and Capabilities

The example highlights advanced styling techniques with a mountain series featuring a strokeDashArray: [10,5] dash pattern along with gradient fills, and additional line series using strokeDashArray: [5,5] and strokeDashArray: [3,3] patterns for dotted effects. A band series adds further visual context, and interactive modifiers provide real-time dynamic updates.

Integration and Best Practices

This JavaScript implementation exemplifies best practices for asynchronous chart initialization and resource management. Charts are created by invoking a single asynchronous method and are properly disposed of using sciChartSurface.delete(), in line with guidelines found in the Getting Started with SciChart JS and Memory Best Practices documentation.