API Reference - Configuration

ChartAppInitials

Property

Description

Type

initialInstrument

Initial instrument when rendering ChartReactApp. Specify null if you want to chart be loaded without default instrument. Example: 'AAPL'

string

initialAggregationPeriods

Initial aggregation periods. Example: [{ duration: 30, durationType: 'm' }, { duration: 1, durationType: 'h' }]

AggregationPeriod[]

initialAggregation

Initial aggregation period. Example: { duration: 30, durationType: 'm' }

AggregationPeriod +

initialTimezone

Initial timezone Example: 'Asia/Anadyr', 'UTC'

string

initialChartConfig

Initial chart-core config.

{ scale?: { auto?: boolean; zoomToCursor?: boolean; lockPriceToBarRatio?: boolean; inverse?: boolean; autoScaleOnCandles?: boolean; autoScaleDisableOnDrag?: { enabled?: boolean; edgeAngle?: number; yDiff?: number; }; zoomSensitivity?: { ...; }; defaultViewportItems?: number; keepZoomXOnYAxisChange?: boolean; disable...

initialStudies

Array of initial studies.

string[]

initialChartTheme

Initial theme.

"dark" | "light"

initialChartReactSettings

Initial chart react settings.

{ legend?: { opened?: boolean; showOHLC?: boolean; showVolume?: boolean; showInstrument?: boolean; showPeriod?: boolean; mode?: LegendMode; }; sessionBreaks?: { visible?: boolean; }; extendedHours?: { ...; }; ... 5 more ...; scale?: { ...; }; }

initialTimeframePresets

Array of Timeframe presets. By default there are few presets: day, week, month, year, and all data. Example: { presets: [{ timeframe: { label: '1D', value: 86400 }, aggregation: { duration: 1, durationType: 'm', }] }

TimeframePresetsList +

initialTimeframePreset

Initial Timeframe preset.

TimeframePreset +

ChartReactAppConfig

The main configuration place for chart-react.

Property

Description

Type

initialLoading

Array of loading state objcts. `dxchart5-react` has some basic loading state objects such as candles data loading, symbols loading etc. These loading state objects are used to render loading bar on top of the chart. With this option you can provide your own loading state objects in addition to default ones.

InitialLoadingItem[]

localization

Object with all textual information in chart - override it to make chart in other language.

{ crossTool?: { open?: string; high?: string; low?: string; close?: string; volume?: string; }; drawings?: { recentDrawings?: string; noRecentDrawings?: string; hideDrawings?: string; unhideDrawings?: string; ... 11 more ...; contextMenu?: { ...; }; }; ... 24 more ...; formatter?: { ...; }; }

chartReactConfig

Configuration for Chart-React application. chartReactConfig is now partial - default values will be merged, so you could provide only those parameters, that you need.

PartialChartReactConfig +

colorPalette

Array of colors, that will be used in color picker component. Supports all common color models: hex, rgb/rgba, hsl/hsla, default string color, for example, "yellow".

string[]

iconsPool

Icons set for Icon drawing.

Readonly<Record<string, IconDefinition>>

drawingsConfig

Default drawings configuration. Override if you need other defaults styles.

onApiCreated

Callback which returns you object with useful API that you can call on chart to modify it.

(api: ChartReactAPI) => void

palette

Main object to override colors in chart. Each theme expects an object with colors configuration. Supports all common color nomenclatures: hex, rgb/rgba, hsl/hsla, default string color, for example, "yellow".

{ light?: { css?: string; object?: { 'main_chart-divider-default-bg'?: string; 'icon-secondary-default-bg'?: string; 'icon-active-bg'?: string; 'icon-primary-default-bg'?: string; 'm-color_picker-border'?: string; ... 308 more ...; 'main_chart-compare-plot_color-5'?: string; }; }; dark?: { ...; }; }

timezones

List of timezones and your current timezone. Example: ['Europe/Berlin', 'America/Argentina/Buenos_Aires']

Partial<TimezonesConfig>

chartTypesConfig

List of chart types and initial chart type Example: { initialChartType: candle, listOfChartTypes: ['candle', 'line', 'area', 'equivolume', 'heikinAshi']}

Partial<ChartTypesConfig>

containerClassName

string