Institutional Grade Charting Engine
High-performance, lightweight, and fully customizable financial visualization. Built with TypeScript to empower the next generation of trading platforms.
Demo Mode
This demo displays the chart with synthetic "XXXX" ticker data for demonstration. In production, connect your Alpaca Markets API keys for real-time stock and crypto data.
Engineered for Professional Trading
A comprehensive charting suite designed for developers who demand uncompromising performance and institutional-grade features.
Engine Performance
Ultra-low latency HTML5 Canvas rendering engine. Optimized for processing high-frequency data feeds with zero UI blocking.
Financial Intelligence
20+ professional indicators plus support for Smart Money Concepts (SMC) and Opening Range Breakouts (ORB) out of the box.
Universal Integration
Deep integration for React, Next.js, and Vue, alongside a robust Vanilla JS API for legacy and specialized environments.
Advanced Drawables
Precision drawing suite including Fibonacci tools, Gann fans, and multi-point annotation systems with persistence support.
Native Connectivity
Production-ready adapters for Alpaca Markets and Massive Data. Extensible API for connecting proprietary internal data feeds.
Real-time Monitoring
Institutional-grade price alert engine with integrated support for Browser Push, Telegram, and Webhook notifications.
Seamless Data Integration
Connect to your favorite data providers with our built-in adapters.
Real-time stock and crypto data streaming.
Institutional-grade historical and real-time feeds.
Developer First Experience
We believe charting should be easy. Our API is designed to be intuitive, type-safe, and highly extensible. Get up and running in minutes.
- TypeScript native for full IDE support
- Zero external dependencies (except D3 scales)
- Extensible Indicator API
- Custom Data Provider support
1import { StockChartWidget } from 'tickerflow';
2
3// 1. Initialize the widget
4const chart = new StockChartWidget({
5 container: document.getElementById('chart'),
6 ticker: 'XXXX', // Use 'XXXX' for simulated live data
7 connector: 'alpaca', // Default connector
8 theme: 'dark',
9 defaultTimeframe: '15m'
10});
11
12// 2. Add technical indicators
13chart.addIndicator('ema', { period: 50 });
14chart.addIndicator('rsi', { length: 14 });
15
16// 3. Listen for price updates
17chart.onPriceUpdate((price) => {
18 console.log(`Current Price: $${price}`);
19});* Note: Use ticker 'XXXX' to instantly enable the built-in live data simulation mode for demos.
Expandable Indicator Library
Utilize 20+ clinical-grade technical indicators or deploy your own proprietary logic using our extensible calculation engine.
Powerful Scripting Engine
Don't limit yourself to built-in indicators. Our new Custom Indicator API gives you full control.
- TALib IntegrationBuilt-in helpers for SMA, RSI, Crossovers, and more.
- RenderLib HelpersDraw arrows, circles, and text with simple one-liners. No complex canvas code needed.
1// Create a custom "Buy Signal" indicator
2chart.registerCustomIndicator({
3 name: 'My Strategy',
4 calculate: (bars, inputs, lib) => {
5 const close = bars.map(b => b.close);
6 const rsi = lib.rsi(close, 14);
7 // Return buy signal when RSI < 30
8 return bars.map((b, i) => ({
9 timestamp: b.timestamp,
10 signal: rsi[i] < 30 ? 'buy' : null,
11 price: b.close
12 }));
13 },
14 render: (ctx, { values, scale }, lib) => {
15 values.forEach(v => {
16 if (v.signal === 'buy') {
17 const x = scale.x(v.timestamp);
18 const y = scale.y(v.price);
19 // Draw a green arrow using RenderLib
20 lib.drawArrowUp(ctx, x, y + 20, '#00ff00');
21 }
22 });
23 }
24});Ready to build the next Bloomberg?
Join hundreds of developers building professional financial tools with TickerFlow.