Interactive JavaScript Financial Charting Library – FCS Chart

stioFCS Chart is a vanilla JavaScript financial charting library for interactive Forex, cryptocurrency, and stock market charts.

It includes nine chart types, technical indicators, drawing tools, and historical replay for web-based market analysis.

It loads historical candles through FCS API and can stream live price updates through WebSocket. Historical data limits and WebSocket access depend on FCS API credentials.

Features

• Candlestick, OHLC, line, area, Heikin-Ashi, Renko, and other financial chart views.
• Over 60 technical indicators, including RSI, MACD, moving averages, and Bollinger Bands.
• Trendlines, Fibonacci tools, patterns, shapes, and text annotations.
• Up to four charts in a shared layout, with separate symbols and timeframes.
• Historical replay and screenshot export.
• Dark and light themes, chart-only display, and configurable toolbars.
• Symbol search filters for markets, exchanges, and individual assets.
• Programmatic price lines, trade markers, and configurable broker ask/bid quotes.
• Chart settings, templates, and drawing undo/redo controls.

How To Use It

Installation

Load the stylesheet and core JavaScript from a CDN:

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

Basic Usage

Create two nested elements and set a height on the outer container. This example uses the free chart with no API key, which limits history to 300 candles and displays provider branding.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bitcoin Price Chart</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fcsapi/chart-js/src/fcsapi-chart.css">
  <style>
    #fcs_chartparent { width: 100%; height: 520px; }
  </style>
</head>
<body>
  <div id="fcs_chartparent">
    <div id="fcs_chart"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/gh/fcsapi/chart-js/src/fcsapi-chart.js"></script>
  <script>
    const chart = new FCSAPIChart({
      container: document.getElementById('fcs_chart'),
      parentid: 'fcs_chartparent',
      symbol: 'BINANCE:BTCUSDT',
      period: '1H',
      theme: 'dark',
      enableCache: false
    });
  </script>
</body>
</html>

Authenticate Market Data Requests

The free chart needs no credentials. For a deployed application, use an FCS API credential that matches your account and domain policy.

A domain-restricted publicKey is suitable for browser use when you configure Allowed Domains in the FCS API dashboard.

Use this initializer in place of the one in Basic Usage. Keep the HTML containers, stylesheet and script from that example.

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

The core constructor accepts four authentication configurations: an accessKey alone, a domain-restricted publicKey alone, both keys together, or a jwt_token alone. Supplying both keys hides the access key from network requests, not from page source. A server-issued JWT keeps the access key on your server and expires after a configured interval.

For JWT authentication, implement /api/chart-jwt on your own server. Its server-side request to https://api-v4.fcsapi.com/forex/jwt_token must include your private access_key and an expiry in seconds; the optional domain parameter can restrict the token to your site. Return the FCS response with status, response.jwt_token and response.expires_in to the browser. Never expose that upstream URL with your private access key in client-side code.

The following replaces the Basic Usage initializer. It obtains the first token before creating the chart and renews it for subsequent data requests. Call the returned dispose() when removing the chart.

async function mountSecureChart() {
  async function getToken() {
    const response = await fetch('/api/chart-jwt', {
      credentials: 'same-origin'
    });
    if (!response.ok) throw new Error('Token endpoint failed');
    const result = await response.json();
    const token = result.response?.jwt_token;
    const expiresIn = Number(result.response?.expires_in);
    if (!result.status || !token || !(expiresIn > 0)) {
      throw new Error(result.msg || 'Invalid token response');
    }
    return { token, expiresIn };
  }
  const first = await getToken();
  const chart = new FCSAPIChart({
    container: document.getElementById('fcs_chart'),
    parentid: 'fcs_chartparent',
    jwt_token: first.token,
    symbol: 'BINANCE:BTCUSDT',
    enableCache: false
  });
  let timerId;
  let disposed = false;
  function schedule(seconds) {
    timerId = setTimeout(renew, Math.max(10, seconds - 30) * 1000);
  }
  async function renew() {
    try {
      const next = await getToken();
      if (disposed) return;
      chart.updateJWTtoken(next.token);
      schedule(next.expiresIn);
    } catch (error) {
      console.error('Chart token refresh failed:', error);
      if (!disposed) timerId = setTimeout(renew, 10000);
    }
  }
  schedule(first.expiresIn);
  return {
    chart,
    dispose() {
      disposed = true;
      clearTimeout(timerId);
      chart.destroy();
    }
  };
}
mountSecureChart().catch(console.error);

Enable Live Market Updates

WebSocket updates require streaming access in addition to historical market data access. Supply your socketApiKey and keep enableSocket: true. This initializer uses a domain-restricted public key for the historical API; configure the keys for your FCS API account before using it.

const chart = new FCSAPIChart({
  container: document.getElementById('fcs_chart'),
  parentid: 'fcs_chartparent',
  publicKey: 'YOUR_PUBLIC_KEY',
  socketApiKey: 'YOUR_SOCKET_KEY',
  enableSocket: true,
  symbol: 'BINANCE:BTCUSDT',
  period: '1m',
  enableCache: false
});

Display a Compact Chart

displayMode: 'chartonly' hides the chart controls for article embeds and small market widgets.

const compactChart = new FCSAPIChart({
  container: document.getElementById('fcs_chart'),
  parentid: 'fcs_chartparent',
  symbol: 'NASDAQ:AAPL',
  period: '1D',
  displayMode: 'chartonly',
  enableCache: false
});

Limit Symbol Search

Restrict the symbol picker to the exchanges and assets available in your application.

const chart = new FCSAPIChart({
  container: document.getElementById('fcs_chart'),
  parentid: 'fcs_chartparent',
  symbol: 'BINANCE:BTCUSDT',
  enableCache: false,
  searchModalTabs: { fav: 'Favorites', crypto: 'Crypto' },
  searchAllowSymbols: ['BINANCE:BTCUSDT', 'BINANCE:ETHUSDT'],
  searchExcludeSymbols: ['BINANCE:DOGEUSDT'],
  searchAllowExchanges: { crypto: ['BINANCE'] },
  hideExchangeInOHLC: true
});

Display Indicators and Trade Markers

Use the chart instance from Basic Usage after its initial data has loaded. Place the button before the closing </body> tag, and add the event listener after chart initialization. addIndicator() returns a Promise resolving to an indicator ID or null for an unknown type.

<button id="add-rsi" type="button">Add RSI</button>

document.getElementById('add-rsi').addEventListener('click', async () => {
  const indicatorId = await chart.addIndicator({
    type: 'Rsi',
    length: 14
  });
  console.log('Indicator ID:', indicatorId);
});

Trade markers use a timestamp in Unix seconds (or a candle index) and a price from the loaded series. Substitute the correct candle timestamp and price for your data.

chart.addMarker({
  timestamp: 1791388800,
  price: 85200,
  type: 'buy',
  text: 'Entry',
  id: 'trade-entry-1'
});

Set Broker Price Lines and Spreads

Horizontal lines can mark take-profit, stop-loss, and entry levels. addHorizontalLine() returns a Promise resolving to the line ID. Use prices within the range of the symbol you are displaying.

async function addTradeLevels() {
  const takeProfitId = await chart.addHorizontalLine({
    price: 46000,
    label: 'Take Profit',
    color: '#16a34a',
    style: 'dashed'
  });
  chart.updateHorizontalLine(takeProfitId, { price: 47000 });
  return takeProfitId;
}

A broker spread changes the displayed ask and bid lines, not the underlying candles. For spreadPips, the value applies to each side of the quote. A value of 10 produces a total gap of 20 pips around a close-price base.

chart.setAskBid({
  base: 'close',
  spreadPips: 10,
  perSymbol: {
    'BINANCE:BTCUSDT': { spreadPips: 15 }
  }
});
// Restore the raw market quote.
chart.setAskBid(null);

Configuration Options

Containers, Data, and Authentication

Appearance and Layout

Search and Market Labels

Search tab keys: fav, all, forex, crypto, commodity, stock, dr, fund, futures, indices, dex. For searchAllowExchanges, exchange-based tabs such as crypto, forex, and dex accept arrays. Country-based tabs such as stock, fund, dr, and indices accept objects like { US: ['NASDAQ'], PK: '*' }.

Chart Controls and Drawing

`askBid` Fields

The option accepts a spread/markup object. It only changes the quote lines and labels. Direct price-unit fields take precedence over pips, which take precedence over percent when several units are supplied for one adjustment.

Symbol Formats

Supported Chart Types

Supported Timeframes

API Methods

// Markets, timeframe, and appearance.
chart.setSymbol('NASDAQ:AAPL');          // Display another symbol.
chart.setPeriod('4H');                   // Switch to a four-hour period.
chart.setTheme('light');                 // Change dark/light theme.
chart.setChartType('line');              // Change chart representation.
// Quotes, indicators, and markers.
chart.setAskBid({ base: 'close', spreadPips: 10 }); // Change ask/bid rule; null resets it.
const indicatorId = await chart.addIndicator({ type: 'Sma', len: 20 }); // Promise: indicator ID or null.
chart.removeIndicator(indicatorId);      // Remove an indicator by ID.
chart.addMarker({ timestamp: 1791388800, price: 85200, type: 'buy', id: 'buy-1' }); // Mark a candle.
chart.removeMarker('buy-1');             // Remove marker by ID or list position.
chart.clearMarkers();                    // Remove all trade markers.
// Programmatic horizontal lines.
const lineId = await chart.addHorizontalLine({ price: 45000, label: 'TP' }); // Promise: line ID.
chart.updateHorizontalLine(lineId, { price: 46000 }); // Change one line's properties.
chart.removeHorizontalLine(lineId);      // Remove one line by ID.
const lines = chart.getHorizontalLines(); // Array of programmatic lines.
const removedCount = chart.clearHorizontalLines(); // Number of removed lines.
// Export, authentication, and lifecycle.
const pngDataUrl = chart.exportImage();  // Base64 PNG data URL for image/download.
chart.updateJWTtoken('FRESH_JWT');       // Replace an expiring JWT.
chart.resize();                          // Recalculate dimensions after a size change.
chart.destroy();                         // Release DOM, listeners, socket, and other resources.

Indicator Input Examples

addIndicator({ type, ...inputs }) accepts a type and that study’s parameter names.

Marker Fields

addMarker() accepts an object describing a marker on a candle.

Horizontal Line Options

addHorizontalLine(options) returns a Promise for the ID. updateHorizontalLine(id, options) changes existing line properties.

Alternatives

• Lightweight Financial Chart JavaScript Library – lightweight-charts v5
• Intuitive Charting Library for Financial Data – DXCharts Lite
• Candlestick Chart With Technical Indicators – DojiChart