Skip to main content

UI overrides

uiOverrides let you 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. Config is preferable for visibility and behavior and CSS override is recommended for simple styling.

Other ways to customize
  • Prefer Config override for showing/hiding and tuning features.
  • Use CSS override for styling; use it for hiding only when config is not suitable for your goals.

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.

Many overrides receive OverrideProps<T> with:

  • chartReactAPIProps — { chartReactAPI: ChartReactAPI; chartId: string }: the chart instance API and the current chart id (useful in multichart).
  • originalProps — T: the props of the component you are replacing (e.g. children, callbacks). You can render them as-is or wrap the default UI.

So your component gets both the chart API and the original props; you can reuse or replace the default rendering.

Pass the uiOverrides prop to ChartReactApp and provide your custom components. The example below overrides the footer and shows how to use chartReactAPIProps and originalProps:

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';
import {
    OverrideProps,
    type ChartReactAPIProps,
} from '@dx-private/dxchart5-react/dist/chart/ui-overrides';
import type { ChartFooterProps } from '@dx-private/dxchart5-react/dist/chart/components/chart-footer/chart-footer.component';
/**
 * Many UI overrides receive OverrideProps<T>:
 *   - chartReactAPIProps: { chartReactAPI, chartId } — API of the chart instance and its id
 *   - originalProps: T — props of the component you are replacing (e.g. children, callbacks)
 * You can use them to render your own UI or wrap the default.
 */
const CustomFooter = ({
    chartReactAPIProps,
    originalProps,
}: OverrideProps<ChartFooterProps>) => {
    const { chartReactAPI, chartId }: ChartReactAPIProps = chartReactAPIProps;
    // chartReactAPI — methods and state of the chart; chartId — current chart id (useful in multichart)
    return (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: 11, opacity: 0.7 }}>Chart: {chartId}</span>
            {/* originalProps contains what the default footer received, e.g. children (timezone, presets, etc.) */}
            {originalProps.children}
        </div>
    );
};
export const UIOverridesExample = () => (
    <ChartReactApp
        dependencies={{ ...CREATE_MOCK_PROVIDERS() }}
        uiOverrides={{
            Footer: { FooterComponent: CustomFooter },
        }}
    />
);
  • CustomFooter — receives OverrideProps<ChartFooterProps>: chartReactAPIProps (with chartReactAPI and chartId) and originalProps (e.g. children — the default footer content). The example renders the chart id and then the original children.
  • uiOverrides — only Footer.FooterComponent is set; the library merges your overrides with defaults.

Other override keys (e.g. Logo, Toolbar.ToolbarComponent, Legend.Header) have their own props contract; see the Component overriding section for more examples.

Available UI overrides (type definition)​

Import the types from the package:

import type { UIOverrides, OverrideProps, ChartReactAPIProps } from '@dx-private/dxchart5-react/dist/chart/ui-overrides';

The definition of ChartReactAPIProps, OverrideProps, and UIOverrides from the package (excerpt from index.d.ts):

export interface ChartReactAPIProps {
    readonly chartReactAPI: ChartReactAPI;
    readonly chartId: string;
}
export interface OverrideProps<T> {
    readonly chartReactAPIProps: ChartReactAPIProps;
    readonly originalProps: T;
}
export interface RCMenuOverrideProps<T> extends OverrideProps<T> {
}
export interface UIOverrides {
    rightClickMenus: {
        yAxisMenu: ComponentType<RCMenuOverrideProps<YAxisConfiguratorPopoverProps>>;
        backgroundMenu: ComponentType<RCMenuOverrideProps<BackgroundMenuProps>>;
        studiesMenu: ComponentType<RCMenuOverrideProps<StudiesMenuContentProps>>;
        drawingsMenu: ComponentType<RCMenuOverrideProps<DrawingsMenuProps>>;
        legendMenu: ComponentType<RCMenuOverrideProps<LegendMenuProps>>;
        dataMenu: ComponentType<RCMenuOverrideProps<DataMenuProps>>;
        orderMenu: ComponentType<RCMenuOverrideProps<OrderMenuProps>>;
        positionMenu: React.FC<RCMenuOverrideProps<PositionMenuProps>>;
        YAxisMenuElements: YAxisMenuElementDeclaration[];
        BackgroundMenuElements: BackgroundMenuElementDeclaration[];
        StudiesMenuElements: StudiesMenuElementDeclaration[];
        DrawingsMenuElements: DrawingsMenuElementDeclaration[];
        LegendMenuElements: LegendMenuElementDeclaration[];
        DataMenuElements: DataMenuMainElementDeclaration[];
        DataCompareMenuElements: DataMenuCompareElementDeclaration[];
        OrderMenuElements: Array<RCMenuElementDeclaration>;
        PositionMenuElements: Array<RCMenuElementDeclaration>;
    };
    Logo: ComponentType<LogoProps>;
    ChartSettingsTabs: TabDeclaration[];
    SnapshotMenuItems: SnapshotMenuItemDeclaration[];
    ColorPickerComponent: ComponentType<CKColorPickerProps>;
    Toolbar: {
        ToolbarButtons: Array<ToolbarButtonDeclaration>;
        ToolbarContainer: Element;
        ToolbarComponent: ComponentType<ChartToolbarProps>;
        CompareChartSuggest: ComponentType<CompareChartSuggestComponentProps>;
    };
    DrawingsSidebar: {
        DrawingsSidebarComponent: ComponentType<OverrideProps<DrawingSidebarProps>>;
        DrawingsSidebarHeader: ComponentType<OverrideProps<DrawingsSidebarHeaderProps>>;
        DrawingsSidebarFooter: ComponentType<OverrideProps<DrawingsSidebarFooterProps>>;
    };
    Footer: {
        FooterComponent: ComponentType<OverrideProps<ChartFooterProps>>;
        TimeZoneComponent: ComponentType<OverrideProps<TimeZoneDropdownProps>>;
        TimeframePresetsComponent: ComponentType<OverrideProps<TimeframePresetsProps>>;
        DrawingGroupsDropdown: ComponentType<OverrideProps<TimeframePresetsProps>>;
        SwitchAxisButtonsProps: ComponentType<OverrideProps<SwitchAxisButtonsProps>>;
    };
    InstrumentSuggest: ComponentType<InstrumentSuggestComponentProps>;
    NotificationsComponent: ComponentType<NotificationsComponentProps>;
    Legend: {
        Header: ComponentType<OverrideProps<ChartLegendHeaderProps>>;
    };
    ChartZoomingTool: ComponentType<OverrideProps<ChartScalingFloatingButtonsProps>>;
    ChartMovePaneButtons: ComponentType<OverrideProps<ChartMovePaneButtonsProps>>;
    OutsideContainer: {
        Popup: Element;
        Popover: Element;
    };
    trading: {
        RegularOrder: ComponentType<OverrideProps<RegularOrderProps>>;
        ProtectionOrder: ComponentType<OverrideProps<ProtectionOrderProps>>;
        Position: ComponentType<OverrideProps<PositionProps>>;
        OrderEntry: ComponentType<OverrideProps<OrderEntryProps>>;
        GroupOrder: ComponentType<OverrideProps<GroupOrderProps>>;
        RegularOrderAlt: ComponentType<OverrideProps<RegularOrderAltProps>>;
        ProtectionOrderAlt: ComponentType<OverrideProps<ProtectionOrderAltProps>>;
        PositionAlt: ComponentType<OverrideProps<PositionPropsAlt>>;
    };
    icons: IconsConfig;
}

Detailed guides and examples​

For step-by-step examples and code for specific overrides, see the Component overriding section: