JavaScript Candlestick Chart

Candlestick Chart Example using JavaScript

Overview

This example demonstrates a high-performance candlestick chart built with SciChart.js using JavaScript. It visualizes financial data using candlestick and OHLC series, complemented by moving averages and volume bars to provide a comprehensive view of market trends.

Technical Implementation

The chart is initialized by creating a SciChartSurface with WebAssembly rendering for optimal performance, following the guidelines from the Performance Tips & Tricks documentation. It sets up a DateTimeNumericAxis for time-based data and multiple NumericAxis for price and volume, with the latter serving as a secondary axis for additional data visualization. Data is fetched and mapped directly into the appropriate series types without using additional builder APIs, ensuring full control over the chart’s configuration.

Features and Capabilities

The example integrates both candlestick and OHLC series, as detailed in the OHLC Series Type documentation, allowing users to toggle between the two views. It further applies moving average filters using the XyMovingAverageFilter to smooth data trends, and implements a custom IFillPaletteProvider to dynamically color volume bars based on price movements, as described in the PaletteProvider API documentation. Additionally, interactive modifiers such as zooming, panning, and custom SVG tooltips enhance user engagement, with tooltip customization techniques available in this guide.

Integration and Best Practices

By using JavaScript, this implementation avoids reliance on framework-specific constructs, offering a lean and direct approach to building high-performance financial charts. Best practices for setting up axes, integrating multiple series, and enabling smooth interactivity are followed rigorously, as highlighted in the interactive zooming and panning documentation. This example serves as a solid foundation for developers looking to leverage SciChart.js in JavaScript environments without additional abstraction layers.