FCS Advanced Chart Library

Get Started in 3 Steps

Start displaying professional financial charts in minutes. Just include our library, create a container, and initialize the chart.

Step 1: Include the Library

Add the CSS and JavaScript files to your HTML:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fcsapi/chart-js/src/fcsapi-chart.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/fcsapi/chart-js/src/fcsapi-chart.js"></script>

Step 2: Create Chart Container

Add a container element for the chart:

<div id="fcs_chartparent">
    <div id="fcs_chart"></div>
</div>

Step 3: Initialize the Chart

Create a new chart instance with your configuration:

const chart = new FCSAPIChart({
    container: document.getElementById('fcs_chart'),
    parentid: 'fcs_chartparent',
    accessKey: 'YOUR_API_KEY',
    symbol: 'BINANCE:BTCUSDT',
    period: '1H'
});

Library Installation

Download and include the FCS Chart library files in your project. The library consists of a CSS file for styling and a JavaScript file for functionality.

CDN (Recommended)

Include from GitHub CDN - no download required:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fcsapi/chart-js/src/fcsapi-chart.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/fcsapi/chart-js/src/fcsapi-chart.js"></script>

Container Setup

The chart requires two nested containers:

<div id="fcs_chartparent" style="width: 100%; height: 600px;">
    <div id="fcs_chart"></div>
</div>

Important: The parent container (fcs_chartparent) must have a defined height. The inner container (fcs_chart) will be managed by the chart library.

Mobile Height Fix

For full-height charts on mobile devices, use this JavaScript:

function setMobileHeight() {
    const vh = window.innerHeight;
    document.getElementById('fcs_chartparent').style.height = vh + 'px';
}
setMobileHeight();
window.addEventListener('resize', setMobileHeight);

Chart Configuration Options

Configure your chart with these options. Only container, parentid, and one way to authenticate are required: accessKey, or publicKey (with your domain added in Dashboard > Security), or a jwt_token created on your server (sent alone, no keys in the page). All other options have sensible defaults.

Required Settings

Core Chart Settings

Display Mode

Appearance

UI Layout Toggles

Control which UI elements are visible on your chart. Disable elements you don't need to create a cleaner interface or reduce memory usage.

Main Layout Elements

Toolbar Controls

Symbol Search Filters

Control which tabs and symbols appear in the symbol search modal. Use these options to limit the search to specific asset classes or a curated list of symbols.
Example 1: I want to display only Commodity symbols hide all other stocks forex. use `searchModalTabs`
Example 2: I want only Major currencies and Few stocks. use `searchAllowSymbols`

Search Filter Options

Available Tab Keys

Use these keys in searchModalTabs to control which category tabs are shown:

Usage

const chart = new FCSAPIChart({
    container: document.getElementById('fcs_chart'),
    parentid: 'fcs_chartparent',
    accessKey: 'YOUR_KEY',

    // Only show these tabs (key: label)
    searchModalTabs: {
        'fav': 'Fav',
        'all': 'All List',
        'forex': 'Forex',
        'crypto': 'Crypto',
        'stock': 'Stocks'
    },

    // Only allow these symbols (null = all)
    searchAllowSymbols: ['BINANCE:BTCUSDT', 'ONA:EURUSD'],

    // Hide these symbols (null = none)
    searchExcludeSymbols: ['BINANCE:DOGEUSDT']
});

Chart Features Configuration

Enable or disable specific chart features like real-time updates, drawing tools, grid lines, and price labels.

Core Features

Grid & Crosshair

Price Labels & Lines

Ask / Bid Adjustment (Broker Spread)

The askBid option changes the ask and bid the chart shows, so you can display your own dealable quote instead of the raw market quote: add a spread, add a markup, or show a spread-free price. It only changes the ask/bid lines and labels, the candles are never changed. Leave it out (default null) to show the raw feed quote.

Pick one recipe and use it as the askBid option:

// Ask = ask + 10 pips, bid = bid - 10 pips (built on the market quote)
askBid: { base: 'feed', spreadPips: 10 }

// Ask = close + 10 pips, bid = close - 10 pips (ignores the market ask/bid)
askBid: { base: 'close', spreadPips: 10 }

// 1 percent on each side (percent values are a fraction of the price: 0.01 = 1%)
askBid: { base: 'feed', spreadPercent: 0.01 }

// 10 pips spread plus a 5 pips markup on both sides
askBid: { base: 'close', spreadPips: 10, markupPips: 5 }

// No spread: ask and bid sit on the same line
askBid: { base: 'close', spreadPips: 0 }

// 15 pips on BTCUSDT and 10 pips on every other symbol
askBid: {
    base: 'close',
    spreadPips: 10,
    perSymbol: { 'BINANCE:BTCUSDT': { spreadPips: 15 } }
}

If the same value is given in more than one unit, the most specific wins: price, then pips, then percent. Change the rule while the chart is running with chart.setAskBid() (see API Methods).

Indicator Settings

Exchange Name

Hide the exchange name (BINANCE, NASDAQ, ...) when you do not want your users to see it, for example when you set a fixed symbol, allow symbols from one exchange only, or let users search but do not want the exchange shown. Use one of the two options.

Scale Settings

Drawing Settings

Chart API Methods

Control your chart programmatically using these API methods. Change symbols, timeframes, themes, and more at runtime.

Symbol & Period

// Change symbol
chart.setSymbol('NASDAQ:AAPL');

// Change timeframe
chart.setPeriod('4H');

// Both at once
chart.setSymbol('BINANCE:ETHUSDT');
chart.setPeriod('1D');

Theme & Chart Type

// Switch theme
chart.setTheme('light');  // 'dark' | 'light'

// Change chart type
chart.setChartType('line');
// Options: candlestick, bars, line, area,
// hollow, heikin-ashi, high-low, volume-candles

Ask / Bid (spread)

// Change the spread rule while the chart is running
chart.setAskBid({ base: 'close', spreadPips: 10 });

// Different spreads per symbol, for example loaded from your own API
chart.setAskBid({ perSymbol: spreads });

// Back to the raw market quote
chart.setAskBid(null);

// Always use setAskBid(). Changing chart.options.askBid in place does not refresh the rule.

Indicators

// Add an indicator. type is the indicator name, the other fields are its inputs.
// Returns a Promise with the indicator id, or null when the type is unknown.
const id = await chart.addIndicator({ type: 'Sma', len: 20 });

// The input names are the ones in the indicator settings window, they differ per indicator:
//   Sma  len, outColor              Ema   length1, length2, length3
//   Rsi  length                     Bb    length, mult
//   Macd fast_length, slow_length, signal_length

// Remove it again
chart.removeIndicator(id);

Markers

// Put a marker on a candle: timestamp (seconds) or candle index, plus the price
chart.addMarker({ timestamp: 1791388800, price: 85200, type: 'buy', color: '#26a69a', text: 'Order 1', id: 'order-1' });

// Remove one marker by its id (or its position in the list)
chart.removeMarker('order-1');

// Remove all markers
chart.clearMarkers();

// type examples: buy, sell, long, short, entry, exit, tp, sl, arrow-up, arrow-down, star, flag

Export & Capture

// Get chart as base64 image
const imageData = chart.exportImage();

// Use the image
const img = new Image();
img.src = imageData;
document.body.appendChild(img);

// Or download
const link = document.createElement('a');
link.download = 'chart.png';
link.href = imageData;
link.click();

Resize

// Recalculate dimensions after container resize
chart.resize();

// Example: call after window resize
window.addEventListener('resize', () => {
    chart.resize();
});

JWT Token

// Only when you use the jwt_token option.
// Give the chart a fresh token, the next request uses it
chart.updateJWTtoken('new_token');

// Small example: get a new token, set it,
// and repeat shortly before it expires
async function refreshJWT() {
    // your own backend URL works here too
    const r = await (await fetch('https://api-v4.fcsapi.com/forex/jwt_token?public_key=YOUR_PUBLIC_KEY')).json();
    if (!r.status) return console.error(r.msg);
    chart.updateJWTtoken(r.response.jwt_token);
    setTimeout(refreshJWT, Math.max(10, r.response.expires_in - 30) * 1000);
}
refreshJWT();

Cleanup

// Remove chart and cleanup resources
chart.destroy();

// Important: Call this when removing chart from page
// to prevent memory leaks

Response Format

Horizontal Line API (for Brokers)

Programmatically add, update, and remove horizontal price lines on the chart. Perfect for displaying Take Profit (TP), Stop Loss (SL), and Entry price levels for trading orders.

addHorizontalLine(options)

Add a horizontal line at a specific price. Returns a Promise with the line ID:

// Add Take Profit line (async/await)
const tpLine = await chart.addHorizontalLine({
    price: 45000,
    color: '#00ff00',
    label: 'TP',
    style: 'dashed'
});

// Add Stop Loss line (Promise.then)
chart.addHorizontalLine({
    price: 42000,
    color: '#ff0000',
    label: 'SL',
    style: 'dashed'
}).then(slLine => {
    console.log('SL Line ID:', slLine);
});

// Add Entry line with all options
const entryLine = await chart.addHorizontalLine({
    price: 43500,
    color: '#2196f3',
    label: 'Entry',
    style: 'solid',        // 'solid' | 'dashed'
    lineWidth: 2,
    textPosition: 'above-left',
    textColor: '#ffffff',
    textSize: 12,
    id: 'my-entry-line'    // Optional custom ID
});

Line Options

updateHorizontalLine(lineId, options)

Update an existing line (e.g., when user drags an order):

// Move TP line to new price
chart.updateHorizontalLine(tpLine, { price: 46000 });

// Change color and label
chart.updateHorizontalLine(slLine, {
    price: 41500,
    color: '#ff5722',
    label: 'SL (adjusted)'
});

removeHorizontalLine(lineId)

Remove a line (when order is filled/cancelled):

// Remove single line
chart.removeHorizontalLine(tpLine);

// Remove by custom ID
chart.removeHorizontalLine('my-entry-line');

getHorizontalLines()

Get all programmatic lines:

const lines = chart.getHorizontalLines();
console.log(lines);
// [{id: 'abc', price: 45000, color: '#00ff00', label: 'TP', ...}, ...]

clearHorizontalLines()

Remove all programmatic lines:

const count = chart.clearHorizontalLines();
console.log('Removed', count, 'lines');

Response Format

Available Chart Types

FCS Chart supports 9 different chart visualization types. Each type offers a different way to view price data, suitable for different analysis needs.

Chart Types

Usage

// Set default chart type on initialization
const chart = new FCSAPIChart({
    container: document.getElementById('fcs_chart'),
    parentid: 'fcs_chartparent',
    accessKey: 'YOUR_KEY',
    defaultChartType: 'candlestick'  // Set default type
});

// Change chart type at runtime
chart.setChartType('heikin-ashi');
chart.setChartType('line');
chart.setChartType('area');

Available Timeframes

FCS Chart supports multiple timeframes from 1 minute to 1 month, plus custom timeframes. Choose the appropriate timeframe for your analysis needs.

Supported Timeframes

Usage

// Set default timeframe on initialization
const chart = new FCSAPIChart({
    container: document.getElementById('fcs_chart'),
    parentid: 'fcs_chartparent',
    accessKey: 'YOUR_KEY',
    period: '1H'  // Default to 1 hour
});

// Change timeframe at runtime
chart.setPeriod('1D');  // Switch to daily
chart.setPeriod('15m'); // Switch to 15 minutes
chart.setPeriod('4H');  // Switch to 4 hours

Examples You Can Download

Ready-to-run examples for clients, from a basic chart to broker spread and secure keys, and a complete page with all features.

Download the ready-to-run examples, unzip them and open any .html file in your browser. No server and no installation are needed. They run on the free chart; to use your own key, remove the // in front of accessKey in the file and paste your key. Every example uses enableCache: false, so the examples never share the saved symbol, timeframe or theme with each other.

Download Examples (ZIP)

The full list of every option and method is in this documentation. The file index.html in the live demo lists all options with a short description.

Common Issues & Solutions

Quick solutions to common chart setup and usage issues.

Common Issues

Terms & Disclaimer

Important legal information about chart data usage, accuracy, and limitations.

Data Accuracy

Chart data is sourced from multiple exchanges and liquidity providers. While we strive for accuracy, data may not be 100% accurate or suitable for high-frequency trading decisions.

Trading Disclaimer

Charts, indicators, and signals displayed are for informational and educational purposes only. They are NOT intended as trading advice. We bear NO responsibility for any trading losses incurred from using this chart library.

Technical Indicators

All technical indicators are mathematical calculations based on historical price data. Past performance does not guarantee future results. Always use multiple sources of analysis.