Basic Demo

Loading Data ...

Basic QFChart Demo

What This Demo Shows

This is the simplest possible QFChart implementation, demonstrating how quickly you can get a professional financial chart up and running. With just a few lines of code, you can display candlestick market data and a custom indicator. This demo is perfect for developers who want to understand the minimal setup required to integrate QFChart into their application.

Minimal Code Example

The entire chart is created with less than 20 lines of JavaScript. No complex configuration, no external data loading, just pure QFChart functionality: 

// 1. Parse pre-loaded data (in production, fetch from API)
const indicatorData = JSON.parse(/* MACD data */);
const ohlcvData = JSON.parse(/* BTC/USDT market data */);

// 2. Initialize chart with default options
const chart = new QFChart.QFChart(container, {
    title: 'BTC/USDT'
});

// 3. Set market data (candlesticks)
chart.setMarketData(ohlcvData);

// 4. Add indicator to separate pane
chart.addIndicator('Indicator', indicatorData, {
    isOverlay: false,
    height: 20,
    titleColor: '#ffffff'
});

What's Included

Even in this minimal demo, QFChart provides essential features out of the box:

Data Format

QFChart expects data in a simple, intuitive format:

Market Data (OHLCV)

[
    {
        time: 1748217600000,  // Unix timestamp in milliseconds
        open: 109004.2,       // Opening price
        high: 110718,         // Highest price
        low: 103068.55,       // Lowest price
        close: 105642.93,     // Closing price
        volume: 116099.819    // Trading volume
    },
    // ... more candles
]

Indicator Data

{
    "Histogram": {
        "data": [
            {
                "time": 1748217600000,
                "value": 513.11,
                "options": { "color": "#26A69A" }
            },
            // ... more data points
        ],
        "options": {
            "title": "Histogram",
            "style": "histogram",
            "color": "#FF5252"
        }
    },
    "MACD": {
        "data": [ /* ... */ ],
        "options": { "title": "MACD", "color": "#2962FF" }
    }
}

Default Behavior

When you don't specify options, QFChart uses sensible defaults:

Next Steps

Once you've mastered this basic setup, explore more advanced features:

Common Use Cases

Performance

This demo loads 30 weekly BTC/USDT candles with MACD indicator (histogram, MACD line, and signal line). The chart renders instantly and handles user interactions smoothly. QFChart is built on Apache ECharts, one of the most performant charting libraries available, capable of rendering thousands of data points without lag.

Data Source

In this demo, market data and indicator values are embedded directly in the HTML for simplicity. In a production application, you would typically:

  1. Fetch market data from an API (e.g., Binance, Coinbase, Yahoo Finance)
  2. Use PineTS to calculate indicator values from the market data
  3. Pass the results to QFChart for visualization

See the Full Featured Demo for an example of this workflow.

Browser Support

QFChart works in all modern browsers:

Learn More