Core Interfaces Reference
This guide covers all the important interfaces and types used throughout the charting library. Understanding these will help you work with the API more effectively.
Data Feed Interfaces
IBasicDataFeed
The main interface your data feed must implement to provide data to the chart.
Required Methods:
interface IBasicDataFeed {
// Initialize and return configuration
onReady(callback: (config: DataFeedConfiguration) => void): void;
// Resolve symbol name to full metadata
resolveSymbol(
symbolName: string,
onResolve: (symbolInfo: SymbolState) => void,
onError?: (error: string) => void
): void;
// Fetch historical bars
getBars(
symbolInfo: SymbolState,
resolution: string,
from: number,
to: number,
onResult: (bars: Bar[], meta?: HistoryMetadata) => void,
onError?: (error: string) => void
): void;
}
Optional Methods:
searchSymbols()- Search for symbolssubscribeBars()- Subscribe to real-time updatesunsubscribeBars()- Unsubscribe from real-time updatessubscribeDepth()- Subscribe to depth/market datacreateWatchlist()- Create watchlistdeleteWatchlist()- Delete watchlistaddSymbolToWatchlist()- Add symbol to watchlistgetWatchlists()- Get all watchlistscreateAlert()- Create alertgetAlerts()- Get all alertsupdateAlert()- Update alertdeleteAlert()- Delete alert
Example Implementation:
const myDataFeed = {
onReady(callback) {
callback({
supported_resolutions: ['1', '5', '15', '1D', '1W'],
supports_search: true,
supports_group_request: false
});
},
resolveSymbol(symbolName, onResolve, onError) {
const symbolInfo = {
name: symbolName,
description: symbolName + ' Inc.',
type: 'stock',
session: '24x7',
timezone: 'America/New_York',
minmov: 1,
pricescale: 100,
has_intraday: true,
supported_resolutions: ['1', '5', '15', '1D', '1W']
};
onResolve(symbolInfo);
},
getBars(symbolInfo, resolution, from, to, onResult, onError) {
// Fetch bars from your API
fetch(`/api/bars?symbol=${symbolInfo.name}&from=${from}&to=${to}`)
.then(res => res.json())
.then(data => {
onResult(data.bars);
})
.catch(err => onError(err.message));
}
};
Data Types
Bar
Represents a single candlestick/bar on the chart.
Properties:
| Property | Type | Description |
|---|---|---|
time | number | Timestamp in milliseconds |
open | number | Opening price |
high | number | Highest price |
low | number | Lowest price |
close | number | Closing price |
volume | number? | Trading volume |
openInterest | number? | Open interest (for futures) |
Example:
const bar = {
time: 1234567890000, // milliseconds
open: 150.00,
high: 155.50,
low: 149.00,
close: 153.25,
volume: 1000000
};
SymbolState
Complete symbol information.
Properties:
| Property | Type | Description |
|---|---|---|
symbol_name | string | Symbol ticker (AAPL) |
token | string | Internal token |
exchange | string | Exchange name |
description | string | Full description |
ticksize | number | Minimum price movement |
lotsize | number | Lot size |
precision | number | Decimal precision |
type | string? | Type (stock, crypto, forex) |
session | string? | Trading session |
timezone | string? | Timezone |
supported_resolutions | string[]? | Available timeframes |
Example:
const symbol = {
symbol_name: 'AAPL',
token: 'AAPL_TOKEN',
exchange: 'NASDAQ',
description: 'Apple Inc.',
ticksize: 0.01,
lotsize: 1,
precision: 2,
type: 'stock',
session: '0930-1600',
timezone: 'America/New_York',
supported_resolutions: ['1', '5', '15', '1D', '1W']
};
DataFeedConfiguration
Configuration returned by datafeed's onReady method.
Properties:
| Property | Type | Description |
|---|---|---|
supported_resolutions | string[] | Available timeframes |
supports_search | boolean? | Enable symbol search |
supports_group_request | boolean? | Enable group requests |
supports_marks | boolean? | Enable chart marks |
supports_timescale_marks | boolean? | Enable timescale marks |
supports_time | boolean? | Enable time support |
exchanges | array? | Available exchanges |
symbols_types | array? | Symbol types |
Example:
const config = {
supported_resolutions: ['1', '5', '15', '30', '60', '1D', '1W', '1M'],
supports_search: true,
supports_group_request: false,
supports_marks: true,
exchanges: [
{ value: 'NASDAQ', name: 'NASDAQ', desc: 'NASDAQ Stock Exchange' },
{ value: 'NYSE', name: 'NYSE', desc: 'New York Stock Exchange' }
]
};
DepthData
Market depth (order book) data.
Properties:
| Property | Type | Description |
|---|---|---|
bids | DepthLevel[] | Buy orders |
asks | DepthLevel[] | Sell orders |
volume | number? | Total volume |
open | number? | Opening price |
high | number? | High price |
low | number? | Low price |
close | number? | Closing price |
Example:
const depth = {
bids: [
{ price: 150.00, quantity: 100, orders: 5 },
{ price: 149.90, quantity: 200, orders: 8 }
],
asks: [
{ price: 150.10, quantity: 150, orders: 6 },
{ price: 150.20, quantity: 250, orders: 10 }
]
};
Drawing Interfaces
DrawingType
Enumeration of all available drawing tools.
Available Types:
enum DrawingType {
TrendLine = "trend_line",
FibonacciRetracement = "fib_retracement",
Rectangle = "rectangle",
HorizontalLine = "horizontal_line",
ExtendedLine = "extended_line",
RayLine = "ray_line",
Circle = "circle",
Ellipse = "ellipse",
TrendChannel = "trend_channel",
Arrow = "arrow",
ArrowMarkUp = "arrow_mark_up",
ArrowMarkDown = "arrow_mark_down",
VerticalLine = "vertical_line",
CrossLine = "cross_line",
Path = "path",
Text = "text",
Note = "note",
OrderLine = "order_line",
PositionLine = "position_line",
// ... and more
}
DrawingPoint
A point on the chart for drawings.
Properties:
| Property | Type | Description |
|---|---|---|
time | number | Timestamp |
price | number | Price level |
barIndex | number | Bar index |
Example:
const point = {
time: 1234567890000,
price: 150.00,
barIndex: 100
};
DrawingOptions
Styling options for drawings.
Properties:
| Property | Type | Description |
|---|---|---|
color | string? | Primary color |
opacity | number? | Opacity (0-1) |
lineWidth | number? | Line width |
lineDash | number[]? | Dash pattern |
fillColor | string? | Fill color |
backgroundColor | string? | Background color |
text | string? | Text content |
fontSize | number? | Font size |
fontFamily | string? | Font family |
Example:
const options = {
color: '#ff0000',
lineWidth: 2,
opacity: 0.8,
fillColor: 'rgba(255, 0, 0, 0.2)'
};
IDrawing
Complete drawing object.
Properties:
| Property | Type | Description |
|---|---|---|
id | string | Unique ID |
type | DrawingType | Drawing type |
points | DrawingPoint[] | Drawing points |
options | DrawingOptions | Style options |
paneId | string | Pane ID |
locked | boolean | Is locked |
visible | boolean | Is visible |
createdAt | number | Creation time |
updatedAt | number | Last update time |
Indicator Interfaces
CustomIndicatorDefinition
Interface for defining custom indicators.
Properties:
| Property | Type | Description |
|---|---|---|
name | string | Unique indicator name |
displayName | string? | Display name |
description | string? | Description |
category | string? | Category |
inputs | CustomIndicatorInput[] | Input parameters |
calculate | function | Calculation function |
renderLayers | CustomIndicatorLayer[] | Render layers |
pane | 'main' | 'new'? | Pane placement |
categoryType | 'overlay' | 'oscillator'? | Category type |
Example:
const customIndicator = {
name: 'MySMA',
displayName: 'My Custom SMA',
description: 'Simple Moving Average',
category: 'Moving Averages',
inputs: [
{
name: 'period',
type: 'number',
defaultValue: 20,
min: 1,
max: 200,
description: 'Number of periods'
}
],
calculate: (getRealBar, getDerivedBar, index, options) => {
const { period } = options.inputs;
if (index < period - 1) return null;
let sum = 0;
for (let i = 0; i < period; i++) {
sum += getRealBar(index - i).close;
}
return sum / period;
},
renderLayers: [
{
type: 'line',
dataKey: 'value',
color: '#2196F3',
lineWidth: 2
}
],
pane: 'main',
categoryType: 'overlay'
};
CustomIndicatorInput
Input parameter for custom indicators.
Properties:
| Property | Type | Description |
|---|---|---|
name | string | Input name |
type | string | Type: 'number', 'string', 'boolean', 'color' |
defaultValue | any | Default value |
min | number? | Minimum value (for numbers) |
max | number? | Maximum value (for numbers) |
step | number? | Step value |
description | string? | Description |
RenderLayer
Defines how indicator data is rendered.
Properties:
| Property | Type | Description |
|---|---|---|
type | string | 'line', 'area', 'candle', 'column', 'scatter', 'histogram', 'bgcolor', 'fill' |
dataKey | string | Key in calculated data |
color | string | Color |
lineWidth | number? | Line width (for lines) |
fill | string? | Fill color (for areas) |
opacity | number? | Opacity (0-1) |
dashPattern | number[]? | Dash pattern |
Example:
const layer = {
type: 'line',
dataKey: 'value',
color: '#2196F3',
lineWidth: 2,
opacity: 1
};
IStoreIndicator
Internal indicator representation.
Properties:
| Property | Type | Description |
|---|---|---|
id | string | Unique ID |
name | string | Indicator name |
metaInfo | IndicatorMetadata | Metadata |
instance | any | Calculator instance |
seriesBinding | IndicatorSeriesBinding | Series binding |
| 455→ | inputs | IndicatorInputDefinition[] |
| 456→ | styles | IndicatorStyleDefinition[] |
| 457→ | options | IndicatorOptions |
| 458→ | visible | boolean |
| 459→ | ||
| 460→--- | ||
| 461→ | ||
| 462→## Indicator Style Interfaces |
Style configuration for built-in indicators.
ADXStyle
ADX (Average Directional Index) indicator style.
| Property | Type | Description |
|---|---|---|
color | string | Line color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
ATRStyle
ATR (Average True Range) indicator style.
| Property | Type | Description |
|---|---|---|
color | string | Line color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
AroonStyle
Aroon indicator style.
| Property | Type | Description |
|---|---|---|
upColor | string | Up line color |
downColor | string | Down line color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
BollingerBandsStyle
Bollinger Bands indicator style.
| Property | Type | Description |
|---|---|---|
middleBandColor | string | Middle band color |
upperBandColor | string | Upper band color |
lowerBandColor | string | Lower band color |
lineWidth | number | Line width |
fillOpacity | number | Fill opacity (0-1) |
lineStyle | "solid" | "dashed" |
CentralPivotRangeStyle
Central Pivot Range indicator style.
| Property | Type | Description |
|---|---|---|
cpColor | string | Central pivot color |
tcpColor | string | Top central pivot color |
bcpColor | string | Bottom central pivot color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
DonchianChannelStyle
Donchian Channel indicator style.
| Property | Type | Description |
|---|---|---|
upperColor | string | Upper channel color |
lowerColor | string | Lower channel color |
middleColor | string | Middle channel color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
fillColor | string | Fill color |
EMAStyle
EMA (Exponential Moving Average) indicator style.
| Property | Type | Description |
|---|---|---|
color | string | Line color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
EWMAStyle
EWMA (Exponentially Weighted Moving Average) indicator style.
| Property | Type | Description |
|---|---|---|
lineColor | string | Line color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
GatorStyle
Gator Oscillator indicator style.
| Property | Type | Description |
|---|---|---|
jawColor | string | Jaw color |
teethColor | string | Teeth color |
lipsColor | string | Lips color |
lineWidth | number | Line width |
lineStyle | "solid" | "dashed" |
HMAStyle
HMA (Hull Moving Average) indicator style.
571→| Property | Type | Description |
572→|----------|------|-------------|
573→| lineColor | string | Line color |
574→| lineWidth | number | Line width |
575→| lineStyle | "solid" | "dashed" | "dotted" | Line style |
576→
577→---