Skip to main content

Config override

Config level overrides are the preferred way to customize the chart. Use the config API to show/hide features, enable or disable buttons, and adjust behavior of elements we expose. Use it freely for most customization needs.

:::tip Other ways to customize

  • Use CSS override for styling UI elements; use it for hiding only when config is not suitable for your goals.
  • Use UI overrides when you need to fully replace a component (e.g. custom toolbar or logo). :::

When to use config​

  • Enabling or disabling the toolbar, drawings sidebar, studies, trading, etc.
  • Showing or hiding specific toolbar buttons or right-click menu items.
  • Controlling settings tabs and their options.
  • Configuring timeframe presets, layout, multichart, data export, and other high-level features.

Config is applied at initialization via dependencies.chartReactConfig (and optionally dependencies.initialChartConfig for chart-core options). Elements controlled by config are “locked” for end users when you disable or hide them.

Example​

Pass chartReactConfig (and optionally initialChartConfig) in dependencies of ChartReactApp:

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

This example disables the drawings sidebar and enables tooltips for toolbar buttons. You can combine any number of config options.

Full config reference​

The config shape is defined by PartialChartReactConfig (and related types). The object below is the default config (DEFAULT_INIT_CHART_REACT_CONFIG) from the library — you pass a partial config in chartReactConfig; only set the keys you need, the rest are merged with defaults. For type definitions and detailed tables, see the API reference for configuration.