Skip to main content

Overriding right-click menu elements

DXcharts provides a mechanism to customize right-click menu elements. You can add custom elements, remove default ones, and reorder menu items for all available menus.

Available right-click menus​

The following right-click menus can be customized through uiOverrides.rightClickMenus:

  • BackgroundMenuElements - Menu that appears when right-clicking on the chart background
  • YAxisMenuElements - Menu that appears when right-clicking on the Y-axis (price scale)
  • DataMenuElements - Menu that appears when right-clicking on the main data series
  • DataCompareMenuElements - Menu that appears when right-clicking on compare series
  • StudiesMenuElements - Menu that appears when right-clicking on indicators/studies
  • DrawingsMenuElements - Menu that appears when right-clicking on drawings
  • LegendMenuElements - Menu that appears when right-clicking on the legend

Menu elements can be:

  1. Default element keys - String identifiers for built-in menu items
  2. Custom React elements - Your own custom components

Helper functions​

The library provides helper functions to work with menu elements:

addCustomMenuElements​

Adds custom elements to a menu at specified positions.

Parameters:

  • initialElements - The array of menu elements to modify
  • customElements - Array of objects with element (React element) and optional index (position to insert at)

removeMenuElementsByKey​

Removes default elements by their string keys.

Parameters:

  • initialElements - The array of menu elements to modify
  • keysToRemove - Array of string keys to remove

removeMenuElementsByIndex​

Removes elements by their indices.

Parameters:

  • elements - The array of menu elements to modify
  • indicesToRemove - Array of indices to remove

Example​

Source code​

import { ChartReactAppWrapper } from '../../../../../src/components/ChartReactApp';
import { FlexContainer } from '../../../../../src/components/FlexContainer';
import React from 'react';
import {
    DEFAULT_RIGHT_CLICK_MENUS,
    addCustomMenuElements,
    removeMenuElementsByKey,
    removeMenuElementsByIndex,
} from '@dx-private/dxchart5-react/dist/chart/ui-overrides/rc-menus';
import { MenuItem } from '@dx-private/dxchart5-react/dist/chart-kit/Menu/MenuItem.component';
const CustomBackgroundItem = () => {
    return (
        <MenuItem value="custom-bg" onSelect={() => console.log('Custom Background Action!')}>
            <span>Custom Background Action</span>
        </MenuItem>
    );
};
const CustomYAxisItem = () => {
    return (
        <MenuItem value="custom-yaxis" onSelect={() => console.log('Custom Y-Axis Action')}>
            <span>Custom Y-Axis Action</span>
        </MenuItem>
    );
};
const CustomDataMenuItem = () => {
    return (
        <MenuItem value="custom-data" onSelect={() => console.log('Custom Data Action')}>
            <span>Custom Data Action</span>
        </MenuItem>
    );
};
export const OverridingRCMenus = () => {
    const customBackgroundMenuElements = removeMenuElementsByKey(DEFAULT_RIGHT_CLICK_MENUS.BackgroundMenuElements, [
        'BuyMarketButton',
        'SellMarketButton',
        'BuyLimitButton',
        'SellLimitButton',
        'TradingDivider',
    ]);
    const enhancedBackgroundMenuElements = addCustomMenuElements(customBackgroundMenuElements, [
        { element: <CustomBackgroundItem />, index: 0 },
    ]);
    const customYAxisMenuElements = removeMenuElementsByKey(DEFAULT_RIGHT_CLICK_MENUS.YAxisMenuElements, [
        'FitOrdersCheckbox',
        'FitPositionsCheckbox',
    ]);
    const enhancedYAxisMenuElements = addCustomMenuElements(customYAxisMenuElements, [
        { element: <CustomYAxisItem />, index: 0 },
    ]);
    const customDataMenuElements = removeMenuElementsByIndex(DEFAULT_RIGHT_CLICK_MENUS.DataMenuElements, [8, 9, 10]);
    const enhancedDataMenuElements = addCustomMenuElements(customDataMenuElements, [
        { element: <CustomDataMenuItem /> },
    ]);
    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,
        DataMenuElements: enhancedDataMenuElements,
        LegendMenuElements: customLegendMenuElements,
        StudiesMenuElements: customStudiesMenuElements,
        DrawingsMenuElements: customDrawingsMenuElements,
    };
    return (
        <FlexContainer justifyContent={'flex-start'}>
            {/* @ts-ignore */}
            <ChartReactAppWrapper uiOverrides={{ rightClickMenus }} />
        </FlexContainer>
    );
};

Usage patterns​

Adding custom items​

import { addCustomMenuElements, DEFAULT_RIGHT_CLICK_MENUS } from '@dx-private/dxchart5-react';
import { MenuItem } from '@dx-private/dxchart5-react/dist/chart-kit/Menu/MenuItem.component';

const CustomItem = () => <MenuItem onClick={() => console.log('clicked')}>Custom Action</MenuItem>;

// Add at the beginning
const menuElements = addCustomMenuElements(DEFAULT_RIGHT_CLICK_MENUS.BackgroundMenuElements, [
	{ element: <CustomItem key="custom" />, index: 0 },
]);

// Add at the end (no index specified)
const menuElements2 = addCustomMenuElements(DEFAULT_RIGHT_CLICK_MENUS.BackgroundMenuElements, [
	{ element: <CustomItem key="custom" /> },
]);

Removing default items by key​

import { removeMenuElementsByKey, DEFAULT_RIGHT_CLICK_MENUS } from '@dx-private/dxchart5-react';

const menuElements = removeMenuElementsByKey(DEFAULT_RIGHT_CLICK_MENUS.BackgroundMenuElements, [
	'SettingsButton',
	'ResetChartButton',
]);

Removing items by index​

import { removeMenuElementsByIndex, DEFAULT_RIGHT_CLICK_MENUS } from '@dx-private/dxchart5-react';

// Remove first 3 elements
const menuElements = removeMenuElementsByIndex(DEFAULT_RIGHT_CLICK_MENUS.YAxisMenuElements, [0, 1, 2]);

Complete replacement​

// Completely replace menu with custom elements
const menuElements = [
	'CrosshairCheckbox',
	'GridPopover',
	<CustomItem key="custom-1" />,
	<AnotherCustomItem key="custom-2" />,
];

Combining operations​

import { removeMenuElementsByKey, addCustomMenuElements, DEFAULT_RIGHT_CLICK_MENUS } from '@dx-private/dxchart5-react';

// First remove unwanted items
const withoutTrading = removeMenuElementsByKey(DEFAULT_RIGHT_CLICK_MENUS.BackgroundMenuElements, [
	'BuyMarketButton',
	'SellMarketButton',
	'BuyLimitButton',
	'SellLimitButton',
]);

// Then add custom items
const finalMenu = addCustomMenuElements(withoutTrading, [{ element: <CustomItem key="custom" />, index: 0 }]);

// Apply to chart
<ChartReactApp
	uiOverrides={{
		rightClickMenus: {
			BackgroundMenuElements: finalMenu,
		},
	}}
/>;

You can import DEFAULT_RIGHT_CLICK_MENUS to access all default menu configurations.