FintaChart™ — Financial Charting Library

[![npm version](https://img.shields.io/npm/v/@fintatech/fintachart.svg)](https://www.npmjs.com/package/@fintatech/fintachart)

High-performance financial charting component for web applications. Designed for trading platforms, financial dashboards, and any HTML-based project that needs interactive market data visualization. ## Features - **19 chart types** — Candlestick, OHLC, Heikin Ashi, Renko, Kagi, Line Break, Point & Figure, Hollow Candle, Range Bar, Candle Volume, Equi Volume, Line, Area, and more - **130+ technical indicators** — RSI, MACD, Bollinger Bands, Ichimoku, EMA, SMA, Stochastics, and the full range of standard analysis tools - **Drawing and analysis tools** — Lines, channels, rectangles, circles, ellipses, polygons, freehand, arrows, text and image annotations - **Fibonacci tools** — Retracements, Fan, Extensions, Arcs, Ellipses, Time Zones - **Trend analysis** — Andrews' Pitchfork, Raff Regression, Error Channel, Gann Fan, Speed Lines, Quadrant Lines, Tirone Levels - **Pattern recognition** — Head & Shoulders, ABCD, XABCD, Elliott Wave, Triangle, Kings Crown - **Multiple data sources** — File, REST API, and WebSocket adapters with custom datafeed support - **10 built-in themes** — Dark, Light, Gray, Olive, Orange, Purple, Sky, Teal, Beet, Fintatech Dark - **Multi-chart layouts** — Multiple synchronized charts with shared toolbar - **Trading integration** — Orders, alerts, positions, SL/TP with full event system - **Calendar events** — Economic calendar overlay on chart - **Localization** — English and Ukrainian, extensible - **Touch support** — Mobile and tablet ready - **State management** — Save/restore workspace, indicators, shapes, templates ## Installation ```bash npm install @fintatech/fintachart ``` ## Quick Start ### HTML ```html

``` ### React + TypeScript ```tsx import { useEffect, useRef } from 'react'; interface ChartProps { instrument: FintaChart.IInstrument; } export function Chart({ instrument }: ChartProps) { const containerRef = useRef(null); const chartRef = useRef(null); useEffect(() => { if (!containerRef.current) return; FintaChart.ResourcePath.localization = 'node_modules/@fintatech/fintachart/localization/'; FintaChart.ResourcePath.htmlDialogs = 'node_modules/@fintatech/fintachart/htmldialogs/'; FintaChart.SvgLoader.path = 'node_modules/@fintatech/fintachart/img/svg-icons/'; chartRef.current = new FintaChart.Chart({ container: containerRef.current, datafeed: myDatafeed, instrument, timeFrame: { interval: 1, periodicity: FintaChart.Periodicity.MINUTE }, theme: defaultTheme, showToolbar: true, showScrollbar: true, supportedTimeFrames: ['1 Minutes', '5 Minutes', '15 Minutes', '1 Hour', '4 Hours', '1 Day'] }); return () => { chartRef.current?.dispose(); chartRef.current = null; }; }, [instrument]); return

; } ``` ## Documentation and Examples Full documentation, API reference, and 14 runnable examples live on GitHub: - **Docs:** https://github.com/fintatech/fintachart/tree/master/docs - **Examples:** https://github.com/fintatech/fintachart/tree/master/examples - **Repository:** https://github.com/fintatech/fintachart ## Browser Compatibility | Browser | Version | |---------|---------| | Chrome | 29+ | | Safari | 9+ | | Firefox | 28+ | | Opera | 17+ | | Edge | 17+ | | Android Browser | 5+ | ## License Copyright (c) Fintatech B.V. All rights reserved. Free to use in local development environments. A commercial license is required for any deployed or network-accessible use. See [LICENSE.md](https://github.com/fintatech/fintachart/tree/master/LICENSE.md) for full terms, or contact **sales@fintatech.com**.