FastChart Integration Guide

1. Overview

FastChart is a GPU-accelerated financial charting library. It is framework-agnostic — the entire chart is driven through a single class, FastChartWidget, so it works equally well inside React, Angular, Vue, a plain HTML page, or a mobile WebView.

This guide covers the SDK package: you receive a zip archive containing a prebuilt, self-contained SDK folder. Unzip it, serve the folder as static files, add one <script> tag, and the global FastChart object becomes available to your application.

1.1 What you receive

1.2 Technical characteristics

• Rendering backend is selected automatically: WebGPU → WebGL2 → Canvas2D. No configuration needed.
• Runs on any modern browser; heavy computation is moved off the main thread into workers and WebAssembly.
• Ships as a classic browser script (IIFE) — no bundler, no build step, no module loader required.
• 12 UI languages included; light and dark themes built in.

No bundler needed. The SDK is delivered as a prebuilt script. You do not need Webpack, Vite, Rollup or esbuild to consume it, and you do not need to add FastChart to your package.json.

2. Choosing your SDK tier

FastChart is licensed in three nesting tiers — each one is a strict superset of the tier before it. Your zip contains exactly one tier, agreed at the time of licensing.

Because the tiers nest, the integration steps in this guide are identical for all three. The only tier-specific step is serving the monaco/ folder, which exists in the FULL tier only (see section 4.3).

Graceful degradation. Calling a feature above your licensed tier does not crash the chart — the call becomes a logged no-op, and any user data saved under a higher tier is preserved untouched. A custom indicator saved on a licensed build reappears intact when that profile is later opened by a licensed build again.

3. Unpacking and deploying the SDK

3.1 Extract the archive

Unzip the archive you received. The extracted folder is already the complete, deployable SDK:

fastchart-full-0.2.0/
├── fastchart.js                  ← the library (global: FastChart)
├── fastchart.d.ts                ← global type declaration (section 18)
├── types/                        ← full TypeScript declaration tree
├── RELEASE-NOTES.md
├── assets/
│   ├── ComputeWorker.js
│   ├── IndicatorWorker.js
│   ├── fcs.worker.js             (fcs + full tiers)
│   ├── fcsValidate.worker.js     (full tier only)
│   ├── fastchart_wasm.js
│   ├── fastchart_wasm_bg.wasm
│   ├── fastchart_wasm.version.json
│   └── fc-icons/                 ← UI icon set
├── monaco/vs/                    (full tier only — FCScript IDE editor)
├── version.json
└── LICENSE.txt

Keep the folder intact. fastchart.js locates its workers and WebAssembly module relative to its own URL. Do not flatten the tree, rename assets/, or move fastchart.js away from it — if you must, configure the base URL explicitly as shown in section 4.2.

3.2 Copy it into your application

Place the extracted folder anywhere your web server publishes static files. Typical locations by stack:

Angular note: files under src/assets/ are copied to the build output automatically. If you place the SDK elsewhere, add it to the "assets" array in angular.json so it is published with your build.

3.3 Server requirements

FastChart is served entirely as static files, but three server behaviours matter:

Example Nginx snippet, if your server does not already know the WASM type:

types { application/wasm  wasm; }

3.4 Content-Security-Policy

Broker platforms typically run a strict CSP. FastChart needs: script-src 'self' 'wasm-unsafe-eval' (the WebAssembly module; older Chrome needs 'unsafe-eval' instead), worker-src 'self' (workers are same-origin module scripts loaded by URL — no blob: needed when assets/ is served from your origin), style-src 'self' 'unsafe-inline' (the chart and Monaco inject inline styles), img-src 'self' data:, and connect-src covering your datafeed endpoints. When the SDK is served from a CDN, add that origin to script-src, worker-src and connect-src, and enable CORS on the CDN (section 3.3).

Tip. Serving the SDK same-origin keeps the policy smallest — the checklist above assumes it.

4. Loading the SDK

4.1 Add the script tag

A single classic script tag loads the entire library and defines the global FastChart:

<script src="/vendor/fastchart/fastchart.js"></script>

Do not add type="module" and do not use import. The SDK build is a classic script; every export named in this guide is reached through the FastChart global — for example FastChart.FastChartWidget and FastChart.configureFastChartAssets.

For convenience, destructure once at the top of your bootstrap code:

const { FastChartWidget, configureFastChartAssets } = FastChart;

4.2 Asset resolution (workers and WebAssembly)

FastChart resolves its workers and WASM module from the URL of its own <script> tag. As long as assets/ sits beside fastchart.js, this works with zero configuration. Declare the base URL explicitly whenever that assumption does not hold — a CDN, a hashed/versioned asset path, or an assets folder deployed separately from the script. It is also simply good practice in production, because it removes all guesswork:

const { configureFastChartAssets } = FastChart;

// Call ONCE at bootstrap, BEFORE creating the first chart.
configureFastChartAssets({
  baseUrl: '/vendor/fastchart/assets/',
});

Icons follow baseUrl too. The toolbar and context-menu icon set (assets/fc-icons/) resolves from the configured baseUrl exactly like the workers and WASM module (SDK 0.2.0+). Without a configured base, icons resolve relative to the host page, which only works when the page sits beside the SDK folder.

Order matters. configureFastChartAssets must run before the first new FastChartWidget(...). Configuring it afterwards has no effect on charts that already exist.

4.3 Monaco editor — FULL tier only

The FULL tier ships a local copy of the Monaco editor under monaco/vs/ so the FCScript IDE works with no internet access. Point the library at it — note the path is the parent of vs, not vs itself:

configureFastChartAssets({
  baseUrl:       '/vendor/fastchart/assets/',
  monacoBaseUrl: '/vendor/fastchart/monaco/',   // contains vs/
});

• Omit monacoBaseUrl and the IDE falls back to loading Monaco from a public CDN — which fails in an air-gapped or offline deployment.
• The core and fcs tiers have no IDE, so this option is irrelevant to them.

5. Quick start — a working chart

A complete, self-contained page. Substitute your own datafeed and license key.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FastChart</title>
  <style>
    html, body { margin: 0; height: 100%; }
    #chart { width: 100%; height: 100vh; }
  </style>
</head>
<body>

  <div id="chart"></div>

  <!-- 1. Load the SDK -->
  <script src="/vendor/fastchart/fastchart.js"></script>

  <!-- 2. Your datafeed implementation (see section 6) -->
  <script src="/js/my-datafeed.js"></script>

  <script>
    const { FastChartWidget, configureFastChartAssets } = FastChart;

    // 3. Tell the library where its workers and WASM live.
    configureFastChartAssets({
      baseUrl: '/vendor/fastchart/assets/',
    });

    // 4. Mount the chart.
    const widget = new FastChartWidget({
      container:  document.getElementById('chart'),
      symbol:     'TCS',
      interval:   '5m',
      datafeed:   myDatafeed,
      theme:      'dark',
      autosize:   true,
      licenseKey: '<your license key>',
    });

    // 5. Run your code once the first data load completes.
    widget.onChartReady(() => {
      console.log('chart is ready');
    });
  </script>

</body>
</html>

The container must have height. FastChart fills its container. A <div> with no height renders a blank chart and reports no error. Give it an explicit height, or a sized parent when using autosize: true.

5.1 Loading inside a framework

Frameworks that compile your source still serve the SDK as a plain static script. Load it once in index.html, then reference the global from your component. A React example:

import { useEffect, useRef } from 'react';

export function Chart({ symbol }) {
  const hostRef   = useRef(null);
  const widgetRef = useRef(null);

  useEffect(() => {
    const { FastChartWidget, configureFastChartAssets } = window.FastChart;
    configureFastChartAssets({ baseUrl: '/vendor/fastchart/assets/' });

    widgetRef.current = new FastChartWidget({
      container:  hostRef.current,
      symbol,
      interval:   '5m',
      datafeed:   myDatafeed,
      autosize:   true,
      licenseKey: LICENSE_KEY,
    });

    // Always destroy on unmount — releases GPU buffers and workers.
    return () => widgetRef.current?.remove();
  }, []);

  return <div ref={hostRef} style={{ width: '100%', height: 600 }} />;
}

If your toolchain type-checks against window.FastChart, the SDK ships its declarations — add the package's fastchart.d.ts to your tsconfig and the global is fully typed (section 18).

6. Providing market data — the datafeed

FastChart never fetches data itself. You supply a plain object implementing the standard charting datafeed convention, and the chart calls into it. This is the main piece of integration work.

6.1 Methods to implement

6.2 Bar format

Note the unit: time is the bar's start in milliseconds since the Unix epoch, while periodParams.from/to are in seconds.

{
  time:   1720845000000,   // bar start — MILLISECONDS since epoch
  open:   2195.4,
  high:   2198.0,
  low:    2194.1,
  close:  2196.7,
  volume: 48210
}

Resolution notation. Whatever notation your application passes for intervals, the datafeed always receives the canonical suffix form in resolution — '1m', '5m', '1h', '1D', '1W' — never the TV-style numeric form. Custom resolutions the SDK does not recognise are passed through verbatim.

6.3 Live updates

• Updating the forming candle — call onTick with the same time and revised high/low/close/volume.
• Starting a new candle — call onTick with a new time; the chart appends it automatically.
• Returning from background — nothing to do. FastChart detects the visibility change and backfills the bars missed while the app was suspended.

6.4 Symbol search

The toolbar's search popup is fed by the onSearchSymbols widget option. Supply it, or the widget falls back to a built-in sample list of US tickers:

onSearchSymbols: async (query) => {
  const results = await myBackend.search(query);
  return results.map(s => ({
    symbol:   s.symbol,
    name:     s.name,
    type:     'stock',
    exchange: 'NSE',
  }));
},

7. Configuration options

Options passed to the FastChartWidget constructor:

Interval precedence at startup. An interval you pass explicitly wins on the first load: the chart opens on it and selects the matching range preset. Once the user has a persisted view — or when load_last_chart is true — their last choice wins over the constructor option, and the range bar's auto-linked interval takes over from there (SDK 0.2.0+; earlier packages always opened on the 5Y/1W preset).

8. Controlling the chart at runtime

Always call remove(). In a single-page app, failing to call widget.remove() when the view is destroyed leaks GPU buffers and worker threads across navigations.

9. Listening to user actions

Subscribe to chart events to connect the chart to the rest of your application:

widget.subscribe('buyClick', ({ symbol }) => {
  openOrderScreen({ side: 'BUY', symbol });
});

// Detach when you no longer need it.
widget.unsubscribe('buyClick', handler);

Typical flow: on buyClick or sellClick, your app opens its order screen for the active symbol. Combined with load_last_chart: true, the chart restores the user's latest symbol when they navigate back.

Alert events. chartContextAlert { price, symbol } fires when the user picks “Add Alert” from the chart context menu — open your alert-creation dialog with the price prefilled. Once alerts are on the chart (setAlerts, section 15.3): alertModified { alert, newPrice, oldPrice } fires when the user drags an alert line (call your edit API), alertRemoved { alert } on the pill's trash icon, alertEditRequested { alert } on double-click, and alertTriggered { alert } when the chart's local price check crosses the alert. Each alert object carries { id, price, meta } where meta is your own passthrough payload from setAlerts.

10. Theming

• Set the starting theme with the theme option; switch later with widget.changeTheme('Light') or changeTheme('Dark').
• Casing. Theme values are case-insensitive everywhere (theme: 'dark', changeTheme('Light') and changeTheme('DARK') all work); getTheme() always reports 'Light' or 'Dark'.
• The whole UI follows the theme — panels, dialogs, axes, minimap and the drawing toolbar.
• Use overrides for brand-specific colours. Because the SDK is a prebuilt bundle, overrides is the supported customisation path — do not edit fastchart.js by hand.

widget.applyOverrides({
  'mainSeriesProperties.candleStyle.upColor':   '#0EA371',
  'mainSeriesProperties.candleStyle.downColor': '#E0483B',
  'paneProperties.background':                  '#0B0E11',
});

11. Mobile and WebView checklist

Offline WebViews. A WebView with no network still works, but only if every asset is local: bundle assets/, and on the FULL tier bundle monaco/ and set monacoBaseUrl too — otherwise the IDE tries to reach a CDN.

12. Upgrading to a new SDK package

Because the SDK is a folder of static files, upgrading is a folder swap:

• 1. Read version.json in the new zip and record the version you are moving to.
• 2. Review RELEASE-NOTES.md inside the package for any breaking changes and upgrade notes.
• 3. Replace the whole folder — do not merge new files into the old one. Stale workers or a mismatched .wasm left behind from the previous version are a common source of subtle breakage.
• 4. Bust any caches: hard-reload the browser, or serve the SDK from a versioned path such as /vendor/fastchart-0.2.0/.
• 5. Verify the chart renders, live ticks arrive, and indicators compute — indicators exercise the worker and WASM path.

Versioned paths make rollback trivial. Deploying to /vendor/fastchart-<version>/ and switching the <script> src lets you roll back by changing one line, and sidesteps browser caching entirely.

13. Licensing

• License keys are issued by Teligenz and passed via the licenseKey widget option.
• A key encodes the permitted domain(s) and an expiry date. Features above your licensed tier degrade to a logged no-op rather than throwing.
• LICENSE.txt in your package records the tier and version you received; the SDK is proprietary and licensed per agreement.
• Do not redistribute, publish or re-host the SDK outside the terms of your agreement.
• To change tier — for example core → full — request a new package and a matching key; the integration code does not change.

14. Troubleshooting

14.1 Information to include in a support request

• The contents of version.json from your SDK folder.
• Your tier (core, fcs or full) and the browser plus OS version.
• The full browser console output and the Network tab, filtered to failing requests.
• How the SDK is served — URL path, same-origin or CDN — and your configureFastChartAssets call.

Support: info@teligenz.in

15. Trading and runtime APIs

The widget exposes a substantially larger API surface than the everyday methods in section 8. This section documents the parts a trading application typically needs. Widget-level methods are called on the widget instance; chart-level methods on widget.activeChart().

15.1 Orders on the chart

Order markers render at their price on the chart and follow the symbol: FastChart shows only the orders whose symbol matches the chart's current instrument, so you can pass your full blotter.

OrderMarker fields: id (string, your unique id), symbol (string — markers are filtered to the chart's symbol), side ('B' | 'S'), price (number), timestamp (ms epoch), and optionally label, quantity, status, color, tooltip.

15.2 Position, price band and last price

15.3 Alerts

widget.setAlerts(alerts) renders your server's alert list on the chart (bell badges at the alert price) and keeps every pane of a multi-chart layout in sync. The chart is display-only: creating, modifying and triggering alerts stays in your backend.

15.4 News, earnings, dividends and custom events

EventMarker fields: id, type, timestamp (ms epoch), label, and optionally description, color, icon, tooltip, url.

15.5 Indicators, programmatically

Built-in indicator ids (82): ADLine, ADX, ALMA, Aroon, ATR, AveragePrice, AwesomeOscillator, BollingerBands, BollingerBandwidth, BollingerPercentB, CCI, ChaikinOscillator, ChandeKrollStop, ChopZone, CMF, CMO, ConnorsRSI, Coppock, CumulativeVolumeDelta, DEMA, DonchianChannels, DPO, ElderRay, EMA, EMACross, EMV, Envelope, FisherTransform, ForceIndex, GuppyMMA, HistoricalVolatility, HullMA, Ichimoku, KAMA, KeltnerChannels, KST, LinearRegressionSlope, LinReg, MACD, MACross, MADouble, MajorityRule, MassIndex, MATriple, MAwithEMACross, McGinleyDynamic, MedianPrice, MFI, Momentum, NVI, OBV, ParabolicSAR, PivotPoints, PPO, PriceChannel, PVI, PVO, ROC, RSI, RVI, SMA, SMIErgodic, SMMA, SqueezeMomentum, StandardError, StandardErrorBands, StdDev, Stochastic, StochasticRSI, Supertrend, TEMA, TRIX, TSI, TypicalPrice, UltimateOscillator, Volume, VWAP, VWMA, WilliamsR, WMA, ZigZag.

15.6 Shapes and drawings

15.7 Data, viewport and screenshots

15.8 Chart events (in addition to section 9)

The chart API exposes subscription objects: each returns an object with subscribe(null, handler) / unsubscribe(handler).

15.9 Multi-chart and multi-timeframe layouts

Multi-chart (different symbols side by side) and multi-timeframe (one symbol at several intervals) are user-driven: the header's layout buttons switch layouts, per-pane symbol/interval state persists across reloads, and host-pushed orders, positions and alerts are automatically scoped to the matching pane (sections 15.1–15.3). There is currently no public API to switch layouts programmatically — widget.setLayout() is a compatibility stub — so treat layouts as an end-user feature. Both layout families are Enterprise-tier features.

16. Configuration reference

16.1 Feature flags (enabled_features / disabled_features)

Both options take an array of flag names. Everything below is ON by default; list a flag in disabled_features to turn it off. For example, disabled_features: ['header_buy_sell', 'left_toolbar'] hides the Buy/Sell header buttons and the drawing toolbar.

• Header toolbar: header_widget, header_symbol_search, header_resolutions, header_chart_type, header_settings, header_indicators, header_compare, header_undo_redo, header_screenshot, header_fullscreen_button, header_markers, header_buy_sell.
• Toolbars and panels: left_toolbar, control_bar, timeframes_toolbar, legend_widget, edit_buttons_in_legend, side_toolbar_in_fullscreen_mode.
• Context menus: context_menus, pane_context_menu, scales_context_menu, legend_context_menu, chart_crosshair_menu.
• Display and interaction: display_market_status, border_around_the_chart, main_series_scale_menu, star_some_intervals_by_default, chart_scroll, chart_zoom, countdown, caption_buttons_text_if_possible, adaptive_logo, go_to_date, high_density_bars, shift_visible_range_on_new_bar, right_bar_stays_on_scroll.
• Dialogs, templates and storage: property_pages, show_chart_property_page, study_dialog_search_control, show_object_tree, constraint_dialogs_movement, drawing_templates, study_templates, use_localstorage_for_settings, symbol_search_hot_key, datasource_copypaste, items_favoriting, compare_symbol, volume_force_overlay, create_volume_indicator_by_default.

Buy/Sell buttons. The floating Buy/Sell price-axis markers are separate from the header buttons: toggle them at runtime with widget.toggleMarkerVisibility('orders', false).

16.2 Overrides reference

applyOverrides / the overrides option accept the following keys (values are colors unless noted):

• Candles: mainSeriesProperties.candleStyle.upColor, .downColor, .wickUpColor, .wickDownColor, .borderUpColor, .borderDownColor.
• Line / area / bars / baseline: mainSeriesProperties.lineStyle.color, .linewidth (number); mainSeriesProperties.areaStyle.color1, .color2, .linecolor, .linewidth (number), .transparency (0–100); mainSeriesProperties.barStyle.upColor, .downColor; mainSeriesProperties.baselineStyle.topLineColor, .bottomLineColor.
• Pane: paneProperties.background, .backgroundType ('solid' | 'gradient'), .backgroundGradientStartColor, .backgroundGradientEndColor, .vertGridProperties.color, .horzGridProperties.color, .crossHairProperties.color, .crossHairProperties.width (number), .separatorColor.
• Legend: paneProperties.legendProperties.showSeriesTitle, .showStudyTitles, .showStudyValues (booleans).
• Scales and misc: scalesProperties.textColor, .lineColor, .fontSize (number); mainSeriesProperties.showPriceLine (boolean); volumePaneSize ('large' | 'medium' | 'small' | 'tiny').

17. Datafeed reference

17.1 Error handling

resolveSymbol and getBars each take an error callback after the success callback. Call it with a reason string when your backend fails — the chart stops the loading state and surfaces the failure instead of waiting forever:

HTTP errors. For a backend 500, catch it in your datafeed and invoke the error callback — do not call onResult with an empty array, which the chart reads as “no data exists” and caches as end-of-history.

periodParams fields. from and to (unix seconds) bound the requested window; countBack is the minimum number of bars the chart needs (honour it when your storage is sparse — return at least countBack bars ending at to); firstDataRequest is true on the first history request after a symbol or interval change, false for pagination requests.

17.2 resolveSymbol — full field reference

• Required fields: name, full_name, description, type, session (e.g. '0915-1530' or '24x7'), timezone (IANA name), exchange, listed_exchange, format ('price' | 'volume'), pricescale (e.g. 100 = 2 decimals), minmov (tick size in pricescale units — minTick = minmov / pricescale), supported_resolutions, has_intraday, has_daily, has_weekly_and_monthly.
• Optional fields: ticker, has_seconds, seconds_multipliers, intraday_multipliers, daily_multipliers, has_ticks, visible_plots_set, volume_precision, data_status, expired, expiration_date, sector, industry, currency_code, logo_urls.
• Per-symbol resolutions. supported_resolutions is per-symbol: the interval picker offers only what the resolved symbol supports.

17.3 Symbol search — which hook wins

The search popup (toolbar, Compare dialog, multi-chart pane search) is fed exclusively by the onSearchSymbols widget option; if it is absent but restApiBase is set, the widget calls GET {restApiBase}/search?q=. The datafeed's searchSymbols method exists for datafeed-convention compatibility but is not consulted by the UI — implement onSearchSymbols.

18. TypeScript declarations

The package ships its type declarations — no need to request them separately:

Add the SDK folder's fastchart.d.ts to your tsconfig “include” (or reference it from a declaration file). The section 5.1 workaround — declare const FastChart: any — is no longer needed.

A. Appendix A — Integration checklist

FastChart SDK Integration Guide — © Teligenz Tech Solutions. Proprietary and licensed per agreement. Support: info@teligenz.in