Ways to customize DXcharts widget

DXcharts widget supports the following customization methods:

1. Config override (preferred) — use the config API to show/hide features, enable or disable buttons, and adjust behavior of the exposed elements. Suitable for most customization needs.
2. CSS override — for one-off styling when config is not enough; it's recommended to use it for hiding elements when config is not suitable to your needs.
3. UI overrides — for replacing whole components (e.g. custom toolbar or logo).

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.

For more details and examples on config overrides, see the Config section in DXcharts React library documentation.

CSS override

Use CSS overrides for styling UI elements (appearance, colors, spacing, etc.). For hiding or enabling/disabling features, choose config overrides.

When to use CSS override

• Styling — changing the appearance of specific items (colors, size, spacing, borders, opacity) without replacing the component.
• Hiding an element — only when config is not suitable for that (e.g. no such option, or you need different control).

For more details and examples on CSS overrides, see the CSS override section in DXcharts React library documentation.

UI overrides

uiOverrides allow you to replace entire UI components with your own (e.g. custom toolbar, logo, footer, right-click menus). Use this approach with caution: it is the most powerful but also the most time-consuming and complex.

uiOverrides use React elements and now dxcharts-widget exposes React.createElement to create elements, which will be passed to uiOverrides.

When to use UI overrides

• Replacing the Logo with your own branding.
• Providing a completely custom Toolbar or custom toolbar buttons and order.
• Replacing footer components (timezone, timeframe presets, Y-axis controls).
• Customizing right-click menu contents (add/remove/reorder items) beyond what config allows.
• Replacing order entry, order, or position components in trading.
• Customizing drawings sidebar, color picker, instrument suggest, notifications, or other high-level UI blocks.

For more details and examples on UI overrides, see the UI overrides section in DXcharts React library documentation.

:::

Examples

Toolbar

const { React } = DXChart;
const MyToolbar = props => {
    const { buttons, MainInstrumentComponent } = props;
    return React.createElement(
        'div',
        {
            style: {
                display: 'flex',
                alignItems: 'center',
                gap: '15px',
                width: '100%',
            },
            key: 'custom-toolbar',
        },
        [
            MainInstrumentComponent && React.createElement(MainInstrumentComponent),
            React.createElement('div', { style: { flex: 1 } }),
            React.createElement(
                'div',
                {
                    style: {
                        display: 'flex',
                        gap: '5px',
                    },
                },
                buttons,
            ),
        ],
    );
};
const AlertButton = ({ chartReactAPI, chartId }) => {
    return React.createElement(
        'button',
        {
            onClick: () => alert('Chart ID: ' + chartId),
            style: {
                padding: '8px 16px',
                backgroundColor: 'white',
                color: '#1E3C72',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontWeight: 'bold',
            },
        },
        'Alert',
    );
};
const myButtons = [
    ['alert-btn', AlertButton],
    'ChartAggregationPeriodDropdownContainer',
    'ChartTypeDropdownContainer',
    'StudiesSettingsContainer',
    'ChartSettingsContainer',
];
const destroy = DXChart.widget.createWidget(document.getElementById('chart-iframe'), {
    uiOverrides: {
        Toolbar: {
            ToolbarComponent: MyToolbar,
            ToolbarButtons: myButtons,
            ToolbarContainer: document.getElementById('custom-toolbar'),
        },
    },
});

Right click menus

const { React, uiOverridesUtils } = DXChart;
const {
    addCustomMenuElements,
    removeMenuElementsByIndex,
    removeMenuElementsByKey,
    DEFAULT_RIGHT_CLICK_MENUS,
} = uiOverridesUtils.rightClickMenus;
const customElementStyle = { cursor: 'pointer' };
const CustomBackgroundItem = () => {
    return React.createElement(
        'div',
        { value: 'custom-bg', onClick: () => alert('Custom Background Action!'), style: customElementStyle },
        React.createElement('span', null, 'Custom Background Action'),
    );
};
const CustomYAxisItem = () => {
    return React.createElement(
        'div',
        { value: 'custom-yaxis', onClick: () => alert('Custom Y-Axis Action'), style: customElementStyle },
        React.createElement('span', null, 'Custom Y-Axis Action'),
    );
};
const customBackgroundMenuElements = removeMenuElementsByKey(
    DEFAULT_RIGHT_CLICK_MENUS.BackgroundMenuElements,
    ['BuyMarketButton', 'SellMarketButton', 'BuyLimitButton', 'SellLimitButton', 'TradingDivider'],
);
const enhancedBackgroundMenuElements = addCustomMenuElements(customBackgroundMenuElements, [
    { element: React.createElement(CustomBackgroundItem, null), index: 0 },
]);
const customYAxisMenuElements = removeMenuElementsByKey(DEFAULT_RIGHT_CLICK_MENUS.YAxisMenuElements, [
    'FitOrdersCheckbox',
    'FitPositionsCheckbox',
]);
const enhancedYAxisMenuElements = addCustomMenuElements(customYAxisMenuElements, [
    { element: React.createElement(CustomYAxisItem, null), index: 0 },
]);
const customLegendMenuElements = ['InstrumentNameCheckbox', 'OHLCValuesCheckbox'];
const customStudiesMenuElements = removeMenuElementsByKey(DEFAULT_RIGHT_CLICK_MENUS.StudiesMenuElements, [
    'DuplicateStudyButton',
    'HideStudyButton',
]);
const customDrawingsMenuElements = removeMenuElementsByKey(DEFAULT_RIGHT_CLICK_MENUS.DrawingsMenuElements, [
    'BringForwardButton',
    'SendBackwardButton',
]);
const rightClickMenus = {
    BackgroundMenuElements: enhancedBackgroundMenuElements,
    YAxisMenuElements: enhancedYAxisMenuElements,
    LegendMenuElements: customLegendMenuElements,
    StudiesMenuElements: customStudiesMenuElements,
    DrawingsMenuElements: customDrawingsMenuElements,
};
const destroy = DXChart.widget.createWidget(document.getElementById('chart-iframe'), {
    uiOverrides: {
        rightClickMenus,
    },
});