FullChartConfig.md

FullChartConfig

The main configuration file for chart-core. Includes all components' configurations, global configs like dateFormatter, and colors.

| Property | Description | Type | | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------- | ------------ | ---------------- | ------------- | -------------- | ------------------- | ------------------- | ------ | -------- | -------- | ---------- | --------------- | ---------------- | | scale | Controls how chart series are positioned horizontally and vertically. | | Other configurations like: inverse, lockRatio etc. | ChartScale | | components | Group of component configurations. Chart component is a single visual object on chart. | | Examples: chart itself, events, x-axis, highlights, cross tool. | ChartComponents | | colors | All colors in chart-core are configured here. | FullChartColors | | dateFormatter | Date and time formatting configuration. | DateFormatter | | timezone | Timezone to use on chart X axis labels and any other timestamps. | | Examples: Africa/Accra, Europe/Moscow, Asia/Tehran. | string | | fixedSize | If set - chart canvas will have fixed size always. | { width: number; height: number; } | | rtl | Right to left mode. Used in drawings (like text drawing) calculation. | boolean | | drawingOrder | Initial visual order of chart drawers. Reorder to put volumes on top of candles for example. | ("MAIN_BACKGROUND" | "MAIN_CLEAR" | "HIT_TEST_CLEAR" | "YAXIS_CLEAR" | "SERIES_CLEAR" | "OVER_SERIES_CLEAR" | "HIT_TEST_DRAWINGS" | "GRID" | "X_AXIS" | "Y_AXIS" | "HIGH_LOW" | ... 11 more ... | "CROSS_TOOL")[] | | intlFormatter | | IntlFormatter | | useUTCTimeOverride | | boolean | | animation | | AnimationConfig | | devexpertsPromoLink | | boolean | | shortDays | | string[] | | shortMonths | | string[] |

ChartScale

Controls how chart series are positioned horizontally and vertically. Other configurations like: inverse, lockRatio etc.

Property	Description	Type
auto	Auto scale will always fit whole chart series in viewport.	boolean
zoomToCursor	True - will zoom to cursor on mouse wheel. False - zoom to last candle.	boolean
lockPriceToBarRatio	Locks the ratio between price/time, so when zooming it will feel like google maps.	boolean
inverse	Inverses the Y scale vertically.	boolean
autoScaleOnCandles	Do auto scale (even if it's not enabled in config) after instrument change.	boolean
autoScaleDisableOnDrag	When dragging chart under specific angle - will automatically disable auto-scale.	AutoScaleDisableOnDrag
zoomSensitivity		{ wheel: number; }
defaultViewportItems	Defines how much items (candles) will be in viewport when chart applies basic scale	number
keepZoomXOnYAxisChange	Adjust x viewport when y-axis width is changed, so x zoom remains the same	boolean
disableAnimations	Disable all scale process animations	boolean

AutoScaleDisableOnDrag

When dragging chart under specific angle - will automatically disable auto-scale.

Property	Description	Type
enabled		boolean
edgeAngle	The angle of mouse movement. Default - Math.PI / 9.	number
yDiff	Distance that mouse should travel vertically in px. Default - 80.	number

ChartComponents

Group of component configurations. Chart component is a single visual object on chart. Examples: chart itself, events, x-axis, highlights, cross tool.

Property	Description	Type
chart		ChartConfigComponentsChart
xAxis		ChartConfigComponentsXAxis
yAxis		YAxisConfig
grid		GridComponentConfig
volumes		ChartConfigComponentsVolumes
offsets		ChartConfigComponentsOffsets
waterMark		ChartConfigComponentsWaterMark
events		ChartConfigComponentsEvents
highLow		ChartConfigComponentsHighLow
crossTool		ChartConfigComponentsCrossTool
highlights		ChartConfigComponentsHighlights
navigationMap		ChartConfigComponentsNavigationMap
baseline		ChartConfigComponentsBaseline
paneResizer	Horizontal resizer between panes	ChartConfigComponentsPaneResizer

ChartConfigComponentsChart

Property	Description	Type
type	The type of chart. Candle, bar, area and others.	keyof BarTypes
showCandlesBorder	Shows the border of candle. Useful for hollow-candles and to increase contrast on thin candles.	boolean
showActiveCandlesBorder	Shows the border for active candle (tapped by finger on mobile devices).	boolean
showWicks	Shows candle wicks - high and low.	boolean
candleLineWidth		number
barLineWidth		number
lineWidth		number
areaLineWidth		number
minCandles	The minimum amount of candles in viewport. It will not be possible to make fewer than that by using zoom.	number
defaultZoomCandleWidth		number
minWidth		number
zoomStep		number
candlePaddingPercent		number
highlightActiveCandle		boolean
cursor		string
selectedWidth		number
minCandlesOffset		number
histogram		ChartConfigComponentsHistogram
maxYAxisScalesAmount	The maximum amount of Y axis scales on a single chart	number
applyBackgroundToAxes	Background color will be also applied to the chart axes	{ x: boolean; y: boolean; }
sortCandles		(candles: Candle[]) => Candle[]

ChartConfigComponentsHistogram

Property	Description	Type
barCapSize		number

ChartConfigComponentsXAxis

Property	Description	Type
visible		boolean
cursor		string
formatsForLabelsConfig		Record<TimeFormatWithDuration, string>
padding		{ top?: number; bottom?: number; }
fontSize		number
fontFamily		string
fontStyle		string

YAxisConfig

Property	Description	Type
visible		boolean
type	Type of Y axis. Currently supported 'regular', 'percent', 'logarithmic'.	PriceAxisType
align	Align Y axis left or right.	YAxisAlign
labels	Configures the labels on Y axis.	YAxisLabels
typeConfig	Override appearance of different label types. Useful to change all labels of the same type.	YAxisTypeConfig
labelHeight	The height of the single label in pixels.

Used during calculation step between labels. You can make it smaller to fit more labels on Y axis. Or less to fit less labels.|number| |zeroPercentLine|Always show zero line for percent scale.|boolean| |customScale|Allow to scale chart vertically by dragging Y axis with mouse.|boolean| |customScaleDblClick|Allows to double-click on Y axis to turn on auto-scale.|boolean| |cursor||string| |resizeDisabledCursor||string| |labelBoxMargin||{ top: number; bottom: number; end: number; start: number; }| |fontSize||number| |fontFamily||string| |treasuryFormat|Treasury format for price values (1/32 tick format for bonds)|YAxisConfigTreasuryFormat|

YAxisLabels

Configures the labels on Y axis.

Property	Description	Type
descriptions		boolean
settings	Settings contains required labels ('lastPrice', 'countDownToBarClose')
and optional labels ('bidAsk', 'highLow', 'prevDayClose', 'prePostMarket').	Record<string, YAxisLabelConfig>

YAxisConfigTreasuryFormat

Treasury format for price values (1/32 tick format for bonds)

Property	Description	Type
enabled		boolean

GridComponentConfig

Property	Description	Type
visible		boolean
vertical	Shows vertical grid lines.	boolean
horizontal	Shows horizontal grid lines.	boolean
width	Width of grid lines in pixels.	number
dash	Line dash configuration like [1,2].	number[]
color		string

ChartConfigComponentsVolumes

Property	Description	Type
visible		boolean
showSeparately	Show volumes in overlaying mode or as sub-chart like a study.	boolean
volumeFillColor		string
valueLines		number
barCapSize		number
volumeBarSpace		number

ChartConfigComponentsOffsets

Property	Description	Type
visible		boolean
top	Top offset, measured in percents of chart height.	number
left	Left offset, measured in amount of candles.	number
right	Right offset, measured in amount of candles.	number
bottom	Bottom offset, measured in percents of chart height.	number

ChartConfigComponentsWaterMark

Property	Description	Type
visible		boolean
position	Position on the screen.	WaterMarkPositionType
offsetX		number
offsetY		number
logoWidth		number
logoHeight		number
fontFamily		string
firstRowFontSize	Font size for first text line.	number
firstRowBottomPadding	Padding after first text line.	number
secondRowFontSize	Font size for second text line.	number
secondRowBottomPadding	Padding after second text line.	number
thirdRowFontSize	Font size for third text line.	number
thirdRowBottomPadding	Padding after third text line.	number

ChartConfigComponentsEvents

Property	Description	Type
visible	Toggle events visibility.	boolean
eventsVisibility	Toggle specific event type visibility (for example: dividends, splits, earnings).	Record<EventType, boolean>
height	Height of events area in pixels	number
cursor	Configure events cursor type.	string
xAxisLabelFormat	Configure x axis labels	DateTimeFormatConfig[]
icons	Configure icons, the format is string which contains svg tag, for example:

' '|ChartConfigComponentsEventsIcons| |line|Configure the event type vertical line appearance|ChartConfigComponentsEventsLine|

ChartConfigComponentsEventsIcons

Configure icons, the format is string which contains svg tag, for example: ' '

Property	Description	Type
earnings		CustomIcon
dividends		CustomIcon
splits		CustomIcon
conference-calls		CustomIcon

CustomIcon

Property	Description	Type
normal		string
hover		string

CustomIcon

Property	Description	Type
normal		string
hover		string

CustomIcon

Property	Description	Type
normal		string
hover		string

CustomIcon

Property	Description	Type
normal		string
hover		string

ChartConfigComponentsEventsLine

Configure the event type vertical line appearance

Property	Description	Type
earnings		{ width: number; dash: number[]; }
dividends		{ width: number; dash: number[]; }
splits		{ width: number; dash: number[]; }
conference-calls		{ width: number; dash: number[]; }

ChartConfigComponentsHighLow

Property	Description	Type
visible		boolean
font	Font config of high/low labels.	string
prefix		{ high: string; low: string; }

ChartConfigComponentsCrossTool

Property	Description	Type
type	The type of cross tool. Visibility is also contolled by type, set 'none' to hide the cross tool.	string
lineDash	Line dash for cross tool.	number[]
discrete	When discrete is ON - the cross tool X coordinate will always be at the middle of candle.	boolean
magnetTarget	Cross tool Y coordinate can magnet to OHLC values of candle.	MagnetTarget
xAxisLabelFormat	Format of X label config for different periods.	DateTimeFormatConfig[]
xLabel	X label appearance.	{ padding: { top: number; bottom: number; right: number; left: number; }; margin: { top: number; bottom?: number; }; }
yLabel	X label appearance.	{ padding: { top: number; bottom: number; end: number; start: number; }; type: YAxisLabelAppearanceType; }

ChartConfigComponentsHighlights

Property	Description	Type
visible		boolean
border	Border of highlights (session breaks for example).	{ width: number; dash: [number, number]; }
fontFamily		string
fontSize		number

ChartConfigComponentsNavigationMap

Property	Description	Type
visible		boolean
allCandlesHistory		boolean
timeLabels		{ visible: boolean; dateFormat: string; fontFamily: string; fontSize: number; padding: { x: number; y: number; }; }
cursors		{ chart: string; buttonLeft: string; buttonRight: string; leftResizer: string; rightResizer: string; slider: string; }
knots		{ height: number; width: number; border: number; lineWidth: number; }
minSliderWindowWidth		number

ChartConfigComponentsBaseline

Property	Description	Type
cursor		string
dragZone		number
height		number

ChartConfigComponentsPaneResizer

Horizontal resizer between panes

Property	Description	Type
visible		boolean
height	Height of resizer in pixels.	number
fixedMode	Make the horizontal line fixed and disable resizing.	boolean
dragZone	Hover area of resizer in pixels.	number
cursor		string

FullChartColors

All colors in chart-core are configured here.

| Property | Description | Type | | --------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------ | ----------------------------- | | candleTheme | | CandleTheme | | activeCandleTheme | | CandleTheme | | barTheme | | LineStyleTheme | | lineTheme | | LineStyleTheme | | areaTheme | | AreaStyleTheme | | chartAreaTheme | | ChartAreaTheme | | scatterPlot | | ScatterPlotStyle | | baseLineTheme | | BaselineStyleTheme | | histogram | | HistogramColors | | highlights | | Record<"AFTER_MARKET" | "PRE_MARKET" | "NO_TRADING" | "REGULAR", HighlightsColors> | | volume | | VolumeColors | | secondaryChartTheme | | SecondaryChartTheme[] | | waterMarkTheme | | { firstRowColor: string; secondRowColor: string; thirdRowColor: string; } | | highLowTheme | | { highColor: string; lowColor: string; } | | yAxis | | { backgroundColor: string; zeroPercentLine: string; labelTextColor: string; labelInvertedTextColor: string; labelBoxColor: string; rectLabelTextColor: string; rectLabelInvertedTextColor: string; } | | xAxis | | { backgroundColor: string; labelTextColor: string; } | | crossTool | | { lineColor: string; labelBoxColor: string; labelTextColor: string; } | | events | | ChartConfigComponentsEventsColors | | navigationMap | | { buttonColor: string; knotColor: string; sliderColor: string; backgroundColor: string; buttonArrowColor: string; knotLineColor: string; knotBorderColor: string; timeLabelsTextColor: string; mapFillColor: string; mapGradientTopColor?: string; mapGradientBottomColor?: string; mapColor: string; } | | instrumentInfo | | { textColor: string; } | | paneResizer | | { lineColor: string; bgColor: string; bgHoverColor: string; } | | labels | | YAxisLabelsColors |

CandleTheme

Property	Description	Type
upColor		string
downColor		string
noneColor		string
upWickColor		string
downWickColor		string
noneWickColor		string
borderOpacity		number

CandleTheme

Property	Description	Type
upColor		string
downColor		string
noneColor		string
upWickColor		string
downWickColor		string
noneWickColor		string
borderOpacity		number

LineStyleTheme

Property	Description	Type
upColor		string
downColor		string
noneColor		string

LineStyleTheme

Property	Description	Type
upColor		string
downColor		string
noneColor		string

AreaStyleTheme

Property	Description	Type
lineColor		string
startColor		string
stopColor		string

ChartAreaTheme

| Property | Description | Type | | ------------------------------- | ----------- | ---------- | ----------- | | backgroundMode | | "regular" | "gradient" | | backgroundColor | | string | | backgroundGradientTopColor | | string | | backgroundGradientBottomColor | | string | | gridColor | | string |

ScatterPlotStyle

Property	Description	Type
mainColor		string

BaselineStyleTheme

Property	Description	Type
upperSectionStrokeColor		string
lowerSectionStrokeColor		string
upperSectionFillColor		string
lowerSectionFillColor		string
baselineColor		string

HistogramColors

Property	Description	Type
upCap		string
upBottom		string
upBright		string
downCap		string
downBottom		string
downBright		string
noneCap		string
noneBottom		string
noneBright		string

VolumeColors

Property	Description	Type
downCapColor		string
upCapColor		string
noneCapColor		string
downBarColor		string
upBarColor		string
noneBarColor		string

ChartConfigComponentsEventsColors

Property	Description	Type
earnings		EventColors
dividends		EventColors
splits		EventColors
conference-calls		EventColors

EventColors

Property	Description	Type
line		string
normal		string
hover		string
color		string

EventColors

Property	Description	Type
line		string
normal		string
hover		string
color		string

EventColors

Property	Description	Type
line		string
normal		string
hover		string
color		string

EventColors

Property	Description	Type
line		string
normal		string
hover		string
color		string

YAxisLabelsColors

Property	Description	Type
lastPrice		YAxisLastPriceLabelColorConfig
bidAsk		YAxisBidAskLabelColorConfig
highLow		YAxisHighLowLabelColorConfig
prePostMarket		YAxisPrePostMarketLabelColorConfig
prevDayClose		YAxisLabelColorConfig

YAxisLastPriceLabelColorConfig

Property	Description	Type
boxSelected		string
boxPositive		string
boxNegative		string
textSelected		string
textNegative		string
textPositive		string

YAxisBidAskLabelColorConfig

Property	Description	Type
bid		YAxisLabelColorConfig
ask		YAxisLabelColorConfig

YAxisLabelColorConfig

Property	Description	Type
boxColor		string
textColor		string
descriptionText		string

YAxisLabelColorConfig

Property	Description	Type
boxColor		string
textColor		string
descriptionText		string

YAxisHighLowLabelColorConfig

Property	Description	Type
high		YAxisLabelColorConfig
low		YAxisLabelColorConfig

YAxisLabelColorConfig

Property	Description	Type
boxColor		string
textColor		string
descriptionText		string

YAxisLabelColorConfig

Property	Description	Type
boxColor		string
textColor		string
descriptionText		string

YAxisPrePostMarketLabelColorConfig

Property	Description	Type
pre		YAxisLabelColorConfig
post		YAxisLabelColorConfig

YAxisLabelColorConfig

Property	Description	Type
boxColor		string
textColor		string
descriptionText		string

YAxisLabelColorConfig

Property	Description	Type
boxColor		string
textColor		string
descriptionText		string

YAxisLabelColorConfig

Property	Description	Type
boxColor		string
textColor		string
descriptionText		string

DateFormatter

Date and time formatting configuration.

Property	Description	Type
applyPattern		(pattern: string) => string
createFormatterFunction		(pattern: string) => DateTimeFormatter
utcTimeOverride		{ pattern?: string; test?: (pattern: string) => void; }

IntlFormatter

Property	Description	Type
decimalSeparator		string
thousandsSeparator		string

AnimationConfig

Property	Description	Type
duration		number
timeLeft		number