Skip to main content

Accessing DrawingsComponent from DXcharts React

Each chart instance has its own DrawingsComponent. Generally, it is located in chart.drawings. To get a chart instance, save it as a variable in the 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 is enabled, each DrawingsComponent will manage the drawings on the corresponding chart instance. Chart instances are sorted first from left to right, then from top to bottom.

Before you start working with drawings in DXcharts React, read up on the general concept of drawings module article first, because all core functionality is described there.

Drawings are already included in DXcharts React, so you don't have to add them as a module.

Adding drawings from external storage​

Using the setDrawings API in the drawings module, you can add custom drawings from a local storage or a database. Below is the example that shows how to add external drawings and apply them to the chart after the chart is loaded.

If you store drawings in a layout, use the Layout Provider. Otherwise, drawings won't be saved.

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​