Skip to main content

Overview

Drawings in dxchart5-react​

It is recommended to read drawings module article first, because all core functionality is described there.

Drawings in dxchart5-react are already wired up automatically, there is no need to add them as a module

How to access DrawingsComponent from dxchart5-react.​

Each chart instance has it's own DrawingsComponent, which should be located in chart.drawings. To get chart instances simply store it into some variable in api.onChartCreated function:

export const ChartApp = () => {
    const onApiCreated = (api: ChartReactAPI) => {
        api.onChartCreated((chartId, chartInstance) => {
            // here you access DrawingsComponent in each chart
            // this callback will be called as many times as many charts in multichart layout you have
            const drawingsComponent = chartInstance.drawings;
        });
    };
    return (
        <div style={{ height: '500px' }}>
            <ChartReactApp dependencies={{ ...CREATE_MOCK_PROVIDERS(), onApiCreated }} />
        </div>
    );
}

If multichart option is enabled, each DrawingsComponent will manage the corresponding chart instance drawings. Chart instances are arranged from left to right first and then from top to bottom

Set drawings from external storage​

Chart drawings module has setDrawings API which could be useful to set drawings which were taken from some external storage, for example, local storage or a database. Let's set some drawings right after chart load is completed and apply it to chart.

If you use layout as a way to storage drawings layout provider should be implemented, without it drawings wouldn't be saved. After that, drawings could be applied to chart.

export const ChartWithDrawingsFromExternalStorage = () => {
    const onApiCreated = (api: ChartReactAPI) => {
        // set drawings to each chart
        api.onChartCreated((chartId, chartInstance) => {
            // drawings could be taken from anywhere, for example, localstorage or database
            if (chartId === '0') {
                chartInstance.drawings.setDrawings(DRAWINGS_FROM_EXTERNAL_STORAGE);
            }
        });
    };
    return (
        <div style={{ height: '500px' }}>
            <ChartReactApp dependencies={{ ...CREATE_MOCK_PROVIDERS(), onApiCreated }} />
        </div>
    );
}

Example​

Further reading​