Overriding Toolbar buttons

To override default Toolbar buttons, input Toolbar in the uiOverrides property in the ChartReactApp.

To add custom buttons, use the addCustomToolbarButtons function. This function accepts an array of buttons.

interface CustomToolbarButton {
    // an index at which the button should be placed
    readonly index?: number;
    // this property will set a react key
    readonly key?: string;
    readonly button: React.ComponentType<ChartReactAPIProps>;
}

You can also render the Toolbar inside your element. To do so, input ToolbarContainer.

Example

Source code

import { ChartReactAppContainer, ChartReactAppWrapper } from '../../../../../src/components/ChartReactApp';
import { FlexContainer } from '../../../../../src/components/FlexContainer';
import React, { memo, useEffect, useRef, useState } from 'react';
import { Button } from '@dx-private/dxchart5-react/dist/chart-kit/Button/Button.component';
import { ChartToolbar } from '@dx-private/dxchart5-react/dist/chart/components/chart-toolbar/chart-toolbar.component';
import { ChartReactAPIProps } from '@dx-private/dxchart5-react/dist/chart/ui-overrides/index';
import {
    DEFAULT_TOOLBAR_BUTTONS,
    addCustomToolbarButtons,
} from '@dx-private/dxchart5-react/dist/chart/ui-overrides/toolbar';
const leftAlignButton = memo<ChartReactAPIProps>(props => {
    // TODO fix TS error
    // @ts-ignore
    return <Button onClick={() => props.chartReactAPI.setYAxisAlign('left')}>L</Button>;
});
const rightAlignButton = memo<ChartReactAPIProps>(props => {
    // TODO fix TS error
    // @ts-ignore
    return <Button onClick={() => props.chartReactAPI.setYAxisAlign('right')}>R</Button>;
});
const toolbarButtons = addCustomToolbarButtons({ button: rightAlignButton }, { button: leftAlignButton });
export const OverridingToolbarButtons = () => {
    const toolbarPlace = useRef<HTMLDivElement>(null);
    const [Toolbar, setToolbar] = useState({
        ToolbarContainer: toolbarPlace.current,
        ToolbarButtons: DEFAULT_TOOLBAR_BUTTONS,
        ToolbarComponent: ChartToolbar,
    });
    useEffect(
        () =>
            setToolbar({
                ToolbarContainer: toolbarPlace.current,
                ToolbarButtons: toolbarButtons,
                ToolbarComponent: ChartToolbar,
            }),
        [],
    );
    const chartReactAppContainerProps = { width: 800, height: 50 };
    return (
        <>
            <ChartReactAppContainer {...chartReactAppContainerProps}>
                <div className={'chart-react-container'} ref={toolbarPlace} />
            </ChartReactAppContainer>
            <FlexContainer justifyContent={'flex-start'}>
                <ChartReactAppWrapper
                    uiOverrides={{
                        // TODO fix TS error
                        // @ts-ignore
                        Toolbar,
                    }}
                />
            </FlexContainer>
        </>
    );
};