Skip to Content
v1.1.4 Now Released 🎉Use Now  🐧

🔥 CandleView

Advanced Data Visualization Charts and Drawing Graph Engine for the Financial Industry

CandleView is a high-performance, feature-rich visualization engine built specifically for financial markets, quant trading, and professional charting platforms. It is not “just another chart component”—it is a full-stack charting engine with real-time rendering, advanced data processing, precision drawing tools, multi-layer interactions, and a fully modular architecture.

Accuracy, performance, extensibility—these are the core principles behind CandleView. This is not a better chart. This is what a chart engine is supposed to be.

🚀 Why CandleView?

⚡ Ultra-High Performance

  • Optimized render pipeline with incremental updates and 60+ FPS rendering
  • Virtualized data viewport supporting massive datasets (tested with 10,000+ data points)
  • Smooth zooming, panning, and timeline navigation with under 100ms response time
  • Zero-lag redraw on theme or timeframe changes
  • WebGL accelerated rendering for hardware-level performance

CandleView is engineered for real-time trading environments, not simple dashboards. Based on our source code analysis, the engine uses intelligent data virtualization through the ViewportManager class to only render visible data points, significantly improving performance.

🧩 A Fully Modular Engine Architecture

Every subsystem is designed as an independent module, as evidenced by the source code structure:

  • ChartManager → Core renderer & chart lifecycle management
  • ViewportManager → Intelligent data virtualization with visible time range tracking
  • DataManager → Advanced data processing with aggregation, normalization, and timezone handling
  • ChartEventManager → Unified interaction layer for all chart events
  • ChartMarkManager → Complete drawing tools engine with 60+ drawing tools
  • ToolConfig → Configurable tool palette with internationalization support
  • Theme & I18n Core → Fully dynamic light/dark themes with EN/zh-CN localization

This modularity allows CandleView to scale from a simple trading chart to a full institution-level multi-asset charting suite. The source code shows clear separation of concerns with dedicated managers for each functionality.

🤖 AI Integration Overview

CandleView features AI-powered analysis focused on OHLCV data processing and market insights:

Core AI Capabilities

  • OHLCV Pattern Recognition: AI analyzes Open/High/Low/Close/Volume data to identify market patterns and trends
  • Smart Signal Generation: Generates trading signals with confidence scores based on technical analysis
  • Automated Level Detection: Identifies support/resistance levels from price action
  • Market State Classification: Determines if market is trending, ranging, or breaking

Data Processing Features

  • Real-time Analysis: Processes live OHLCV data for immediate insights
  • Anomaly Detection: Flags unusual price or volume movements
  • Multi-timeframe Analysis: Correlates patterns across different timeframes
  • Risk Assessment: Evaluates market conditions based on historical data patterns

Integration Benefits

  • Seamless Workflow: AI insights directly overlay on your charts
  • No External Tools Needed: All analysis happens within CandleView
  • Performance Optimized: AI processing maintains charting performance
  • Customizable Models: Adjust AI sensitivity and analysis focus areas

The AI system enhances traditional chart analysis by providing data-driven insights directly from your OHLCV data.

🎨 Professional Drawing Tools Suite

Based on the Config.ts and ChartMarkManager.ts source code, CandleView includes an extensive set of 60+ professional drawing tools categorized into logical groups:

📏 Lines & Channels (9 Tools)

  • Line Segment (line-segment) - Basic straight line between two points
  • Horizontal Line (horizontal-line) - Price level reference lines
  • Vertical Line (vertical-line) - Time reference lines
  • Arrow Line (arrow-line) - Directional lines with arrowheads
  • Thick Arrow Line (thick-arrow-line) - Bold arrow lines for emphasis
  • Parallel Channel (parallel-channel) - Two parallel trend lines
  • Linear Regression Channel (linear-regression-channel) - Statistical price channels
  • Equidistant Channel (equidistant-channel) - Evenly spaced price channels
  • Disjoint Channel (disjoint-channel) - Independent parallel lines

🎯 Pitchforks & Forks (5 Tools)

  • Andrew’s Pitchfork (andrew-pitchfork) - Classic pitchfork analysis tool
  • Enhanced Andrew’s Pitchfork (enhanced-andrew-pitch-fork) - Extended version with additional features
  • Schiff Pitchfork (schiff-pitch-fork) - Alternative pitchfork variation
  • Internal Pitchfork (internal-pitchfork) - For internal market structure analysis
  • Wave Pitchfork (wave-pitchfork) - For wave analysis applications

🔺 Geometric Shapes (7 Tools)

  • Rectangle (rectangle) - Price/time rectangle tool
  • Circle (circle) - Perfect circle drawing tool
  • Ellipse (ellipse) - Oval shape tool
  • Triangle (triangle) - Triangular formations
  • Sector (sector) - Circular sector/arc tool
  • Curve (curve) - Bezier curve drawing
  • Double Curve (double-curve) - Parallel curves

📐 Fibonacci Analysis Tools (10 Tools)

  • Fibonacci Retracement (fibonacci-retracement) - Classic price retracement levels
  • Fibonacci Time Zones (fibonacci-time-zoon) - Time-based Fibonacci analysis
  • Fibonacci Arc (fibonacci-arc) - Circular arc Fibonacci tool
  • Fibonacci Circle (fibonacci-circle) - Circular Fibonacci levels
  • Fibonacci Spiral (fibonacci-spiral) - Golden spiral visualization
  • Fibonacci Wedge (fibonacci-wedge) - Angular Fibonacci analysis
  • Fibonacci Fan (fibonacci-fan) - Fan-based Fibonacci tool
  • Fibonacci Channel (fibonacci-channel) - Channel-based Fibonacci
  • Fibonacci Price Extension (fibonacci-extension-base-price) - Price projection tool
  • Fibonacci Time Extension (fibonacci-extension-base-time) - Time projection tool

📊 Gann Analysis Tools (3 Tools)

  • Gann Fan (gann-fan) - Gann angle analysis tool
  • Gann Box (gann-box) - Square of nine/Gann box tool
  • Gann Rectangle (gann-rectang) - Rectangular Gann tool

🧩 Pattern Recognition Tools (4 Tools)

  • XABCD Pattern (xabcd) - Harmonic pattern tool
  • Head and Shoulders (head-and-shoulders) - Classic reversal pattern
  • ABCD Pattern (abcd) - Basic harmonic pattern
  • Triangle ABCD (triangle-abcd) - Triangular harmonic pattern

🌊 Elliott Wave Tools (5 Tools)

  • Elliott Impulse (elliott-lmpulse) - Impulse wave patterns
  • Elliott Corrective (elliott-corrective) - Corrective wave patterns
  • Elliott Triangle (elliott-triangle) - Triangle wave patterns
  • Elliott Double Combo (elliott-double-combo) - Combined wave patterns
  • Elliott Triple Combo (elliott-triple-combo) - Complex wave combinations

🏷️ Annotation Tools (8 Tools)

  • Text (text) - Custom text annotations
  • Price Note (price-note) - Price-specific note tool
  • Bubble Box (bubble-box) - Text in callout boxes
  • Pin (pin) - Location markers
  • Signpost (signpost) - Directional indicators
  • Price Label (price-label) - Price level labels
  • Flag Mark (flag-mark) - Flag annotations
  • Image (image) - Image embedding tool

📏 Range & Measurement Tools (7 Tools)

  • Time Range (time-range) - Time period measurement
  • Price Range (price-range) - Price difference measurement
  • Time-Price Range (time-price-range) - Combined measurement tool
  • Heat Map (heat-map) - Market density visualization
  • Long Position (long-position) - Bullish trade markers
  • Short Position (short-position) - Bearish trade markers
  • Mock Kline (mock-kline) - Simulated candle testing tool

✏️ Pen & Brush Tools (5 Tools)

  • Pencil (pencil) - Freehand pencil drawing
  • Pen (pen) - Smooth pen drawing
  • Brush (brush) - Artistic brush strokes
  • Marker Pen (marker-pen) - Highlight marker tool
  • Eraser (eraser) - Intelligent eraser tool

🖱️ Cursor Styles (6 Tools)

  • Arrow (default) - Standard arrow cursor
  • Crosshair (crosshair) - Precision crosshair cursor
  • Circle (circle) - Circle cursor for precise targeting
  • Dot (dot) - Small dot cursor
  • Sparkle (sparkle) - Decorative sparkle cursor
  • Emoji (emoji) - Customizable emoji cursor

Total: 68 Professional Drawing Tools - If traders draw it, CandleView supports it.

📈 Advanced Technical Indicators

Based on the Config.ts source code, CandleView provides comprehensive technical analysis capabilities:

Main Chart Indicators

  • Moving Average (MA) - Simple moving average for trend identification
  • Exponential Moving Average (EMA) - Weighted moving average for faster response
  • Bollinger Bands - Volatility-based price channels with standard deviation
  • Ichimoku Cloud - Comprehensive Japanese trend indicator
  • Donchian Channel - Price channel based on highest high/lowest low
  • Envelope - Percentage-based price bands around moving average
  • Volume Weighted Average Price (VWAP) - Volume-adjusted average price
  • Heat Map (heatmap) - Market profile and price density visualization
  • Market Profile (market-profile) - Advanced market structure analysis

Sub-chart Indicators

  • Relative Strength Index (RSI) - Momentum oscillator (0-100 scale)
  • MACD - Moving Average Convergence Divergence trend indicator
  • Volume - Trading volume analysis with price correlation
  • Parabolic SAR (SAR) - Trend-following reversal indicator
  • KDJ - Stochastic oscillator variant with smoothing
  • Average True Range (ATR) - Volatility measurement indicator
  • Stochastic Oscillator - Momentum indicator comparing closing price to price range
  • Commodity Channel Index (CCI) - Cyclical trend indicator
  • Bollinger Bands Width - Volatility measurement from Bollinger Bands
  • Average Directional Index (ADX) - Trend strength measurement
  • On Balance Volume (OBV) - Volume flow indicator for trend confirmation

⏰ Comprehensive Timeframe Support

Based on the source code’s TimeframeEnum and getAllTimeframes() function, CandleView supports:

Seconds (Intra-second Trading)

  • 1 Second (1s)
  • 5 Seconds (5s)
  • 15 Seconds (15s)
  • 30 Seconds (30s)

Minutes (Intra-day Trading)

  • 1 Minute (1m)
  • 3 Minutes (3m)
  • 5 Minutes (5m)
  • 15 Minutes (15m)
  • 30 Minutes (30m)
  • 45 Minutes (45m)

Hours (Swing Trading)

  • 1 Hour (1h)
  • 2 Hours (2h)
  • 3 Hours (3h)
  • 4 Hours (4h)
  • 6 Hours (6h)
  • 8 Hours (8h)
  • 12 Hours (12h)

Days (Position Trading)

  • 1 Day (1d)
  • 3 Days (3d)

Weeks (Long-term Trading)

  • 1 Week (1w)
  • 2 Weeks (2w)

Months (Investment Horizon)

  • 1 Month (1M)
  • 3 Months (3M)
  • 6 Months (6M)

🌍 Global Timezone Support

CandleView’s DataManager and time handling system supports:

  • New York (EST/EDT)
  • London (GMT/BST)
  • Tokyo (JST)
  • Shanghai (CST)
  • Dubai (GST)
  • Sydney (AEST/AEDT)
  • UTC - Universal Time Coordinated

Timeframe and timezone switching is instant, thanks to the optimized data pipeline in DataManager.handleData().

🖼 Advanced Features

Screenshot & Export

  • One-click screenshot capture with canvas-based rendering
  • Fallback mode for compatibility with older browsers
  • Multiple formats - PNG, JPEG, WebP support
  • High-resolution export for professional documentation

Data Serialization

  • Complete state serialization - Save and restore all drawings and annotations
  • JSON-based format - Human-readable and machine-parsable
  • Partial serialization - Save only specific tools or timeframes
  • Import/Export - Share chart setups between users

Progressive Loading

  • Animated progress bar - Visual loading indicator
  • Intelligent data chunking - Load data in manageable segments
  • Background processing - Process data without blocking UI
  • Error recovery - Graceful handling of data loading failures

Custom UI Configuration

  • Optional top panel - Show/hide main control panel
  • Optional left tool panel - Show/hide drawing tools palette
  • Responsive layout - Adapts to any container size
  • Theme customization - Fully customizable color schemes

🚀 Quick Start Guide

Installation

Add CandleView to your project using npm or yarn:

npm install @your-org/candleview
# or
yarn add @your-org/candleview