Quick Start - Configuration

dxchart5-react Configuration

dxchart5-react has a very strong configuration abilities, most of the time you would need to change it for your needs.

Configuration for dxchart5-react should be provided via dependencies. These dependencies consists of some meaningful parts:

initials
configs
providers

Initials

This part of dependencies is responsible for configuration of the initial chart appearance and functionality. It means that every new user will see the chart with exactly this configuration.

Important note: user CAN change this stuff interacting with the app.

Here's the list of available options:

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 +

Configs

With these options you can change the UI, localization, palette and other parts of the app.

Important note: user canNOT change this stuff interacting with the app.

Here's the list:

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

Providers

Providers are aimed to send data to dxchart5-react and vice-versa such as candles, symbols, user data and so on.

You can learn more about the providers concept here.

Example

To give you a brief introduction how you can configure the dxchart5-react let's hide drawings sidebar and enable tooltips for the buttons in the toolbar.

using `<ChartReactApp />` react component

For react based application dependencies should be passed via react component props:

import React from 'react';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
export function App() {
    return (
        <div className="App" style={{ height: 576, width: 800 }}>
            <ChartReactApp
                dependencies={{
                    ...CREATE_MOCK_PROVIDERS(),
                    chartReactConfig: {
                        drawings: {
                            sidebar: {
                                enabled: false,
                            },
                        },
                        toolbar: {
                            showButtonsTooltip: true,
                        },
                    },
                    // The palette and colorPalette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...),
                    // but the most native type for chart is rgba, so it's recommended to use it if possible
                    colorPalette: [
                        'rgb(255,255,0)',
                        'rgba(0,0,0,1)',
                        '#ad00fa',
                        'green',
                        'hsl(0, 100%, 50%)',
                        'hsla(0, 100%, 64%, 0.2)',
                    ],
                    initialChartConfig: {
                        components: {
                            crossTool: {
                                // crosstool supports three types: 'cross-and-labels', 'only-labels' and 'none'
                                type: 'cross-and-labels',
                            },
                        },
                    },
                }}
            />
        </div>
    );
}

using `createChart` function

If you use createChart function to render dxchart5-react app, it's easy to pass the dependencies too:

import { createChart } from '@dx-private/dxchart5-react/dist/index';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
// append container somewhere in your app
const container = document.createElement('dxcharts-container');
createChart(container, {
    dependencies: {
        ...CREATE_MOCK_PROVIDERS(),
        chartReactConfig: {
            drawings: {
                sidebar: {
                    enabled: false,
                },
            },
            toolbar: {
                showButtonsTooltip: true,
            },
        },
        // The palette and colorPalette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...),
        // but the most native for chart is rgba, so it's recommended to use it if possible
        colorPalette: [
            'rgb(255,255,0)',
            'rgba(0,0,0,1)',
            '#ad00fa',
            'green',
            'hsl(0, 100%, 50%)',
            'hsla(0, 100%, 64%, 0.2)',
        ],
        initialChartConfig: {
            components: {
                crossTool: {
                    // crosstool supports three types: 'cross-and-labels', 'only-labels' and 'none'
                    type: 'cross-and-labels',
                },
            },
        },
    },
});

With this example you should see the following:

dxchart5-react Configuration​

Initials​

ChartAppInitials

Configs​

ChartReactAppConfig

Providers​

Example​

using <ChartReactApp /> react component​

using createChart function​

Further reading​

dxchart5-react Configuration

Initials

Configs

Providers

Example

using `<ChartReactApp />` react component

using `createChart` function

Further reading