Toolbar Buttons

Overriding Toolbar Buttons

You can override default toolbar buttons by providing Toolbar into uiOverrides prop to the ChartReactApp

To add custom buttons you can use addCustomToolbarButtons function which 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 toolbar inside your element, in order to do so you should provide 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>Some text</div>
                <div className={'chart-react-container'} ref={toolbarPlace} />
            </ChartReactAppContainer>
            <FlexContainer justifyContent={'flex-start'}>
                <ChartReactAppWrapper
                    uiOverrides={{
                        // TODO fix TS error
                        // @ts-ignore
                        Toolbar,
                    }}
                />
            </FlexContainer>
        </>
    );
};