Skip to main content

Configuring DXcharts React library

DXcharts React is highly customizable. Most of the time, you will need to configure it to fit your needs.

DXcharts React is configured using dependencies. Within the framework of DXcharts React, there are three main groups of dependencies:

  • initials
  • configs
  • providers

Initials​

This group of dependencies configures the initial chart appearance and functionality. It means that every new user will see the chart with this configuration.

Note: users are always able change the appearance and functionality defined by initials in the app.

Below is the list of available initials:

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[]

initialTimezone

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

initialStudies

Array of initial studies.
string[]

initialChartTheme

Initial theme.
"dark" | "light" | "cloudDancer" | "oud" | "solar" | "still"

initialChartReactSettings

Initial chart react settings.
DeepPartial<ChartReactSettings>

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<Timeframe>

initialTimeframePreset

Initial Timeframe preset.
TimeframePreset<Timeframe>

Configs​

Configs help modify the UI, localization, palette, and other parts of the app.

Note: the elements defined by configs in the app are locked for changing by app users.

Below is the list of available configs:

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.
DeepPartial<Localization>

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. Use the themed config if you want different drawings styles per theme. Override if you need other defaults styles.
DrawingsConfig<"line" | "rectangle" | "horizontal_line" | "horizontal_ray" | "vertical_line" | "extended_line" | "ellipse" | "pitchfork" | "ray" | "curve" | "arc" | "info_line" | "brush" | ... 37 more ... | "risk_reward_short"> | ThemedDrawingsConfig

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".
DeepPartial<ChartAppPalette>

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 send and receive data from DXcharts React. These data include candles, symbols, user data, etc.

For a more in-depth understanding of the provider concept, read Getting started with providers.

Configuring DXcharts React - Example​

Here's an example of how you can configure DXcharts React. In this example, we'll hide the Drawings sidebar and enable tooltips for the buttons in the toolbar with the ChartReactApp component.

For React-based applications, dependencies are passed using the 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>
    );
}

createChart function​

You can also pass the dependencies with the createChart that you use to render the DXcharts React app:

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',
                },
            },
        },
    },
});

The following configuration will be displayed: