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 accessKey are required - 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

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

Indicator Settings

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

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();
});

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

Full Working Example

A complete, production-ready example showing all features: configuration, theme switching, symbol search, and responsive layout.

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.