Skip to main content

Overriding the default snapshot menu

Hide the snapshot button​

To hide the whole snapshot/share toolbar button, set chartReactConfig.toolbar.buttons.snapshot.enabled to false:

<ChartReactApp
	dependencies={{
		chartReactConfig: {
			toolbar: {
				buttons: {
					snapshot: { enabled: false },
				},
			},
		},
	}}
/>

See Config override for more chartReactConfig examples.

Hide specific share options (Twitter, Telegram, etc.)​

To override the default snapshot sharing menu, input SnapshotMenuItems into the uiOverrides property in the ChartReactApp. Omit items you do not need — for example, exclude tweet and telegram to hide social sharing while keeping download/copy options.

interface ChartSnapshotMenuItem {
    /**
     * unique key for dropdown item
     */
    readonly key: string;
    readonly onSelect?: () => void;
    readonly icon?: React.ReactNode;
    /**
     * label will be rendered in the menu
     */
    readonly label: string;
}

The default snapshot sharing menu items are:

DEFAULT_SNAPSHOT_MENU_ITEMS: Array<SnapshotMenuItemDeclaration> = [
    'downloadImage',
    'copyImage',
    'copyLink',
    'tweet',
    'telegram',
]

Example​

Source code​

import React from 'react';
import { FlexContainer } from '../../../../../src/components/FlexContainer';
import { ChartReactAppWrapper } from '../../../../../src/components/ChartReactApp';
export const OverridingSnapshotOptions = () => {
    const overridenSnapshotItems = ['downloadImage', 'copyImage', 'copyLink'];
    return (
        <>
            <FlexContainer $justifyContent={'flex-start'}>
                <ChartReactAppWrapper uiOverrides={{ SnapshotMenuItems: overridenSnapshotItems }} />
            </FlexContainer>
        </>
    );
};