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:

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:

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:

Further reading

• API
• Providers