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:

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:

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: