index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>FCSAPI Chart - Full Configuration Example</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            font-family: Arial, sans-serif;
            background: #0d0e14;
            color: #d1d4dc;
            height: 100%;
            overflow: hidden;
        }
    </style>

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

</head>
<body>
        <!-- Chart container: the chart is drawn inside #fcs_chart, and the toolbar / sidebar are placed in #fcs_chartparent -->
        <div id="fcs_chartparent">
            <div id="fcs_chart"></div>
        </div>

    <!-- Load from GitHub CDN -->
    <script src="https://cdn.jsdelivr.net/gh/fcsapi/chart-js/src/fcsapi-chart.js"></script>

    <script>
        // ============================================================
        // MOBILE HEIGHT FIX
        // ============================================================
        // Gives the chart the real visible height of the screen, for mobile browsers that do not support the dvh unit.
        function setMobileHeight() {
            const vh = window.innerHeight;
            document.getElementById('fcs_chartparent').style.height = vh + 'px';
        }
        setMobileHeight();
        window.addEventListener('resize', setMobileHeight);


        // ##################################################################
        // #                                                                #
        // #                 FCSAPI CHART  -  CONFIGURATION                 #
        // #                                                                #
        // ##################################################################
        //
        // Every available option is listed below with a short description.
        // Remove or comment out any option you do not need, and its default value will be used.
        // To get started you only need sections 1 and 2.
        //
        //   1. REQUIRED               where the chart is drawn
        //   2. AUTHENTICATION         your API key (choose one of 3 ways)
        //   3. DATA & START           symbol, timeframe, candles, live prices, saved settings
        //   4. APPEARANCE             theme, chart type, grid, crosshair, price scale, on-chart info
        //   5. PRICE LINES & LABELS   current price, ask / bid, high / low and their colors
        //   6. ASK / BID ADJUSTMENT   add your own spread or markup
        //   7. INTERFACE              show or hide the sidebar, toolbar buttons and tools
        //   8. SYMBOL SEARCH          which tabs and symbols the search window shows
        //
        var engine;
        const chart = new FCSAPIChart({

            // ============================================================
            // 1. REQUIRED
            // ============================================================
            container: document.getElementById('fcs_chart'),   // Required: the element the chart is drawn in
            parentid: 'fcs_chartparent',                       // Required: id of the parent element that holds the toolbar and sidebar


            // ============================================================
            // 2. AUTHENTICATION  (choose ONE of the 3 options)
            // ============================================================

            // ---- Option 1: Access key (simplest) ----
            // Get your key from fcsapi.com. Leave it empty or commented out to use the free chart.
            // Note: the access key is visible in the browser's network requests.
            //accessKey: 'YOUR_ACCESS_KEY',

            // ---- Option 2: Public key (hides your access key from the network requests) ----
            // Get your public key from fcsapi.com and paste it below.
            //publicKey: 'YOUR_PUBLIC_KEY',
            //   A) Allow your website domain here:  https://fcsapi.com/dashboard/security
            //   B) If you do not want to allow your domain, set accessKey + publicKey together.
            //      The requests are then signed with the public key and the access key is not shown in the network.

            // ---- Option 3: JWT from your own server (best security) ----
            // No accessKey and no publicKey in the browser. The JWT (JSON Web Token) already holds your public key and its expiry.
            // A plain JWT works from any website while Allowed Domains (Dashboard > Security) is empty; if you saved Allowed Domains, the page must be on that list. A JWT locked with &domain= needs no list.
            //   1. Your server (never the browser) creates the JWT by calling:
            //        https://api-v4.fcsapi.com/forex/jwt_token?access_key=KEY&expiry=300
            //      Add &domain=yoursite.com to lock the JWT to your site (the exact host the browser sends as Origin, one host only; the default life is 3600 seconds, expiry accepts 30 to 86400).
            //      A browser on an Allowed Domain can also call  https://api-v4.fcsapi.com/forex/jwt_token?public_key=YOUR_PUBLIC_KEY  (the expiry then comes from Dashboard > Security).
            //   2. Give response.jwt_token to the chart with the option below. The chart sends only jwt_token=<jwt> with every API request, and the API server checks it.
            //   3. The JWT expires after response.expires_in seconds, so get a new one before that (any way you like) and pass it with:  chart.updateJWTtoken('new_jwt')
            // jwt_token replaces accessKey and publicKey. A ready-made auto-refresh example is in the "JWT TOKEN" part at the bottom of this page.
            //jwt_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.YOUR_PAYLOAD.YOUR_SIGNATURE",

            // ---- Extra API parameters (optional) ----
            // Sent with every API request, each one on its own: { abc: 1, xyz: 2 }  =>  &abc=1&xyz=2
            // url_params: { abc: 1, xyz: 2 },

            // ---- Live price WebSocket key (optional) ----
            // The default socket key updates every 2 seconds and allows only a limited number of connections per IP.
            // For faster updates and more connections you need to purchase a socket key.
            //socketApiKey: '',                       // WebSocket API key for live data
            //socketUrl: 'ws://localhost:4001/ws',    // Custom WebSocket URL (optional)


            // ============================================================
            // 3. DATA & START  (what loads when the chart opens)
            // ============================================================
            symbol: 'BINANCE:BTCUSDT',   // Symbol to load first (format: EXCHANGE:SYMBOL)
            period: '1H',                // Timeframe to load first: 1m, 5m, 15m, 30m, 1h, 4h, 1D, 1W, 1M
            length: 600,                 // Number of candles to load (the maximum depends on your API plan)
            timezone: 'local',           // 'local' | 'UTC' | or an offset such as '+05:00' or '-08:00'
            enableSocket: true,          // Live price updates through WebSocket
            enableCache: true,           // Remember the user's last symbol, timeframe and settings in the browser (localStorage)
            changeURL: true,             // Update the browser address with the symbol and timeframe (shareable links)


            // ============================================================
            // 4. APPEARANCE
            // ============================================================
            
            // ---- Theme & chart type ----
            displayMode: 'normal',                // 'normal' = full interface | 'chartonly' = only the chart, all other UI is hidden
            theme: 'light',                       // 'dark' | 'light'
            defaultChartType: 'candlestick',      // candlestick | bars | line | area | hollow | heikin-ashi | high-low | volume-candles

            // ---- Grid & crosshair ----
            enableGrid: false,                    // Grid lines on the chart
            enableCrosshair: true,                // Crosshair that follows the mouse
            enableCrosshairLabels: true,          // Price and time labels on the crosshair

            // ---- Price scale ----
            autoScale: true,                      // Fit the vertical price axis to the visible candles
            logScale: false,                      // Logarithmic price scale

            // ---- On-chart information & indicators ----
            enableOHLCBar: true,                  // Open / High / Low / Close values bar (top-left)
            enableIndicatorLabels: true,          // Indicator name labels on the chart
            indicatorPanelBgColor: null,          // Indicator panel background color (null = same as the chart theme background)

            // ---- Exchange name (BINANCE, NASDAQ, ...) ----
            // Two ways to hide the exchange (use one of them), for example when you fix the symbol,
            // when you only allow symbols from one exchange, or when users search but you do not want the exchange shown.
            hideExchangeAllPlaces: true,          // true = hide the exchange name EVERYWHERE: search window (badge, logo and Exchange filter), OHLC bar and symbol info panel
            hideExchangeInOHLC: false,            // true = hide the exchange name ONLY in the OHLC bar (top-left), the search window and symbol info panel still show it


            // ============================================================
            // 5. PRICE LINES & LABELS
            // ============================================================

            // ---- Show or hide ----
            enablePriceLine: true,                // Horizontal line and label for the current price
            enableAskBidLines: false,             // Ask / Bid price lines (needs the WebSocket)
            enableAskPriceLabels: true,           // Ask price label on the price axis
            enableBidPriceLabels: true,           // Bid price label on the price axis
            enableHighLowLabels: true,            // Highest / lowest price labels on the chart

            // ---- Colors (hex values) ----
            askLabelColor: '#00bcd4',             // Ask price label (cyan)
            bidLabelColor: '#ff9800',             // Bid price label (orange)
            lastPriceLabelColor: null,            // Last price label (null = same color as the up / down candle)


            // ============================================================
            // 6. ASK / BID ADJUSTMENT  (add your own spread or markup)
            // ============================================================
            // Examples (use ONE of them):
            //
            //   // Ask +10 pips and bid -10 pips on all symbols:
            //   askBid: { base: 'feed', spreadPips: 10 },
            //   askBid: { base: 'feed', spreadPercent: 0.01 },             // same idea, as a fraction of the price (0.01 = 1%)
            //   askBid: { base: 'feed', spreadPips: 10, markupPips: 5 },   // ask = ask + 10 + 5, bid = bid - 10 + 5
            //
            //   // Ask = close price + 10, bid = close price - 10:
            //   askBid: { base: 'close', spreadPips: 10 },
            //
            //   // No spread (spread-free trading):
            //   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 } } },
            //
            // You can also change it later while the chart is running:  chart.setAskBid({ base: 'close', spreadPips: 10 })
            //
            // Field reference (only if you need it):
            //   base        'feed'  = start from the market ask/bid and add your spread on top
            //               'close' = ignore the market ask/bid, YOU set the whole spread
            //   spreadPips  widens each side. 10 => ask +10 pips, bid -10 pips
            //   markupPips  moves both sides together (rarely needed). 10 => the whole quote moves up 10 pips
            //   perSymbol   different numbers for specific symbols (these override the values above)
            //   A pip adjusts automatically per symbol: EURUSD = 0.0001, BTCUSDT = 0.01.
            //   For crypto and other big prices, use `spread:` (a real price amount, e.g. spread: 15 = $15) instead of pips.
            askBid: { base: 'close', spreadPips: 0, markupPips: 0 },


            // ============================================================
            // 7. INTERFACE  (show or hide parts of the screen)
            // ============================================================

            
            // ---- Main areas ----
            enableSidebar: true,                  // Left sidebar with the drawing tools
            enableToolbar: true,                  // Top toolbar with all the controls
            enableRangeSelector: true,            // Time range bar at the bottom

            // ---- Toolbar buttons (set to false to hide a button) ----
            enableSearch: true,                   // Symbol search button
            enableIndicators: true,               // Indicators button and panel
            enableMultiChart: true,               // Multi-chart layouts button
            enableReplay: true,                   // Replay mode button and feature
            enableCapture: true,                  // Screenshot / export button
            enableUndoRedo: true,                 // Undo / Redo buttons (Ctrl+Z, Ctrl+Y)
            enableTemplates: true,                // Save and load templates
            enableSettings: true,                 // Settings (gear) button
            enableSymbolInfo: true,               // Symbol info button (shows profile and statistics)
            enableChartTypeSelector: true,        // Chart type dropdown
            enableTimeframeSelector: true,        // Timeframe dropdown

            // ---- Tools & features ----
            enableContextMenu: true,              // Right-click menu
            enableDrawingTools: true,             // Drawing tools
            defaultMagnetMode: false,             // Magnet mode when the chart starts (drawings snap to candle prices). Default is false


            // ============================================================
            // 8. SYMBOL SEARCH  (what the search window shows)
            // ============================================================
            // Tab keys: 'fav', 'all', 'forex', 'crypto', 'commodity', 'stock', 'dr', 'fund', 'futures', 'indices', 'dex'
            // searchModalTabs: {'fav':'Fav','all':'All List','forex':'Forex', 'crypto':'Crypto','commodity':'commodity','stock':'Stocks', 'fund':'Funds', 'futures':'Future', 'indices':'Indicies','dex':'Dex','dr':'Depositary Receipts'},   // Only show these tabs (null = all tabs)
            // searchAllowSymbols: ['BINANCE:BTCUSDT', 'ONA:EURUSD'],   // Only these symbols appear in the results (null = all symbols)
            // searchExcludeSymbols: ['BINANCE:DOGEUSDT'],              // These symbols are hidden from the results (null = hide none)
            // searchAllowExchanges: { crypto: ['BINANCE'], stock: { US: ['NASDAQ'], PK: '*' } },   // Limit search per tab: exchange tabs (crypto, forex, dex) take a list of exchanges, country tabs (stock, fund, dr, indices) take { COUNTRY: '*' | [exchanges] } (null = no limit)
            searchModalTabs: {'fav':'Fav','all':'All List','forex':'Forex', 'crypto':'Crypto','stock':'Stocks','dr':'Drs', 'fund':'Funds', 'futures':'Future', 'indices':'Indicies','dex':'Dex'},

        });
        window._chart = chart;
        engine = window._chart.engine;


        // ============================================================
        // CHART METHODS  (uncomment a line to use it)
        // ============================================================

        // --- Symbol & timeframe ---
        // chart.setSymbol('NASDAQ:AAPL');       // Change the symbol
        // chart.setPeriod('4h');                // Change the timeframe

        // --- Theme & chart type ---
        // chart.setTheme('light');              // 'dark' | 'light'
        // chart.setChartType('line');           // candlestick, bars, line, area, etc.

        // --- Export ---
        // chart.exportImage();                  // Returns the chart as a base64 image

        // --- Resize ---
        // chart.resize();                       // Recalculate the size after the container size changed

        // --- Cleanup ---
        // chart.destroy();                      // Remove the chart and free its resources


        // ============================================================
        // JWT TOKEN  (only needed when you use the jwt_token option)
        // ============================================================
        // chart.updateJWTtoken('new_jwt');      // Give the chart a fresh JWT, the next API request will use it
        //
        // Example: get a new JWT with an AJAX call, give it to the chart, and repeat shortly before it expires.
        // async function refreshJWT() {
        //     const r = await (await fetch('https://api-v4.fcsapi.com/forex/jwt_token?public_key=YOUR_PUBLIC_KEY')).json(); // a page on an Allowed Domain can call it directly, or use the URL of your own backend (it calls ...jwt_token?access_key=KEY&expiry=300)
        //     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();


        // ============================================================
        // DEBUGGING  (optional, you can delete everything below this line)
        // ============================================================
        window._chart = chart; // Makes the chart available in the browser console as _chart
        console.log('Chart initialized:', chart);

        // Prints some information to the console 2 seconds after the page loads, when the data has arrived.
        setTimeout(() => {
            console.log('=== Chart Debug Info ===');
            console.log('Data length:', chart.engine.data.length);
            console.log('Socket status:', chart.engine.socketManager?.getConnectionStatus());
            console.log('PRICESCALE:', chart.engine.PRICESCALE);
            console.log('Theme:', chart.engine.themeManager?.currentTheme);
        }, 2000);

        

    </script>
</body>
</html>