JavaScript Fan Chart

Fan Chart Example in JavaScript

Overview

This example demonstrates how to create a sophisticated fan chart using SciChart.js with JavaScript. The chart visualizes actual data alongside forecast variance by combining a spline line series with multiple SplineBandRenderableSeries, providing an intuitive visualization of trend and variance data over time.

Technical Implementation

The chart is initialized asynchronously using SciChartSurface.create(), ensuring that the WebGL-based rendering engine and the underlying WebAssembly context are set up efficiently. This asynchronous approach is detailed in the Getting Started with SciChart JS guide. The fan chart effect is achieved by rendering an actual data line via SplineLineRenderableSeries and overlaying it with progressively opaque band series using SplineBandRenderableSeries, as described in The Fan Charts Type documentation.

Features and Capabilities

The implementation incorporates interactive modifiers such as ZoomPanModifier and MouseWheelZoomModifier, enabling smooth zooming and panning interactions. Additionally, it applies a WaveAnimation for smooth transition effects, while the use of XyyDataSeries enables rendering of the band charts that illustrate forecast variance. For a deeper understanding of the data series used, developers can refer to the XyyDataSeries API documentation.

Integration and Best Practices

Best practices such as efficient resource management are observed by encapsulating the chart creation in an asynchronous function and ensuring proper cleanup using sciChartSurface.delete(). Performance optimization is a key consideration, with high-performance WebAssembly rendering capabilities that are further explained in the Performance Tips & Tricks and Memory Best Practices guides. These practices help maintain responsiveness even when handling complex chart rendering and dynamic data updates.