QFChart - Demo

Full Featured QFChart Demo

What This Demo Showcases

This is the most comprehensive QFChart demo, demonstrating the library's full capabilities for building professional-grade financial charting applications. It combines multiple technical indicators, interactive drawing tools, and advanced chart controls in a single, production-ready interface. This demo serves as a reference implementation for developers building trading platforms, portfolio management tools, or financial analysis applications.

Featured Indicators

This demo calculates and displays three powerful technical indicators simultaneously:

Institutional Bias (Overlay) - Shows institutional sentiment with colored background zones and multiple EMAs plotted directly on the price chart
MACD (Separate Pane) - Displays the Moving Average Convergence Divergence indicator with MACD line, signal line, and histogram in its own dedicated pane
Squeeze Momentum (Separate Pane) - Shows squeeze conditions and momentum direction with color-coded histogram bars and squeeze markers

Interactive Features

The demo includes all of QFChart's interactive capabilities:

Measure Tool - Click and drag to measure price and time distances between any two points
Trend Line Tool - Draw custom trend lines with draggable endpoints for technical analysis
Fibonacci Tool - Draw Fibonacci retracement levels to identify support and resistance zones
Data Zoom - Scroll horizontally through historical data with the dataZoom slider
Pane Controls - Collapse, maximize, or minimize individual indicator panes
Fullscreen Mode - Expand the chart to fill the entire screen for better visibility
Responsive Databox - View real-time values for price and all indicators (adapts to mobile)

Technical Architecture

This demo demonstrates advanced integration patterns:

Parallel Data Loading - Uses Promise.all() to load multiple indicators simultaneously
Single Market Data Source - All indicators share the same 500 weekly BTC/USDT candles from Binance
Mixed Pane Layout - Combines overlay indicators (on price chart) with separate indicator panes below
Flexible Height Management - Main chart occupies 60%, indicator panes share remaining 40%
Plugin System - Drawing tools are registered as plugins, extending core functionality
Event System - Comprehensive event listeners for tracking user interactions with drawings

Code Structure

The demo follows best practices for organizing a multi-indicator chart application:

// 1. Load all indicators in parallel
const promises = [
    getIndicatorData(sqzmomIndicator, 'BTCUSDT', 'W', 500),
    getIndicatorData(macdIndicator, 'BTCUSDT', 'W', 500),
    getIndicatorData(institBiasIndicator, 'BTCUSDT', 'W', 500),
];
const results = await Promise.all(promises);

// 2. Extract market data and plots
const { marketData, plots: sqzmomPlots } = results[0];
const { plots: macdPlots } = results[1];
const { plots: institBiasPlots } = results[2];

// 3. Initialize chart
const chart = new QFChart.QFChart(container, {
    title: 'BTC/USDT',
    height: '800px',
    layout: { mainPaneHeight: '60%', gap: 5 },
    controls: { collapse: true, maximize: true, fullscreen: true }
});

// 4. Set data and add indicators
chart.setMarketData(ohlcvData);
chart.addIndicator('Institutional Bias', institBiasPlots, { isOverlay: true });
chart.addIndicator('MACD', macdPlots, { isOverlay: false, height: 14 });
chart.addIndicator('SQZMOM', sqzmomPlots, { isOverlay: false, height: 14 });

// 5. Register drawing tools
chart.registerPlugin(new QFChart.MeasureTool());
chart.registerPlugin(new QFChart.LineTool());
chart.registerPlugin(new QFChart.FibonacciTool());

Customization Options

This demo can be easily customized:

Timeframe - Change 'W' to '1d', '4h', '1h', etc.
Symbol - Replace 'BTCUSDT' with any Binance trading pair
Data Length - Adjust DATA_LENGTH to load more or fewer candles
Pane Heights - Modify height: 14 to change indicator pane sizes (percentage)
Colors - Set custom titleColor for each indicator
Controls - Enable/disable specific controls per indicator pane

Event System

The demo includes comprehensive event logging for drawing tool interactions. Check the browser console to see events triggered by hovering, clicking, selecting, moving, or deleting drawings. This event system allows you to build features like:

Persisting drawings to a database
Sharing drawings with other users
Undoing/redoing drawing actions
Showing drawing properties in a side panel
Implementing custom drawing tools

Performance Considerations

This demo is optimized for production use:

Parallel Loading - All indicators load simultaneously, reducing initial load time
Efficient Rendering - ECharts handles large datasets with GPU acceleration
Lazy Plugin Loading - Drawing tools only activate when user selects them
Responsive Design - Databox position adapts to screen size (right on desktop, floating on mobile)

Use Cases

Trading Platforms - Full-featured chart with technical analysis tools for retail or institutional traders
Portfolio Management - Track multiple assets with comprehensive indicator analysis
Educational Platforms - Teach technical analysis with interactive, multi-indicator charts
Research Tools - Analyze market behavior using multiple indicators simultaneously
Trading Bots UI - Visualize bot signals and performance with custom indicators

Browser Compatibility

This demo works in all modern browsers (Chrome, Firefox, Safari, Edge) and adapts to different screen sizes. The mobile-optimized databox automatically switches to floating mode on smaller screens, ensuring a great user experience across devices.

Full Featured Demo