Skip to main content

Optimizing DXcharts React performance

Prefetching chart data​

The request to the data provider is made only after the chart is initialized (1-2 seconds). In this case, it may be useful to request the data from the server in advance. However, to do so, your data provider must implement a caching mechanism: when the chart is initialized, it requests the data that should already be cached from the data provider. To prefetch chart data on initial loading, use the extractDataRequests function.

Here is an example of how you can use the extractDataRequests function:

/* eslint-disable no-restricted-syntax */
import { ChartDataProvider } from '@dx-private/dxchart5-react/dist/providers/chart-data-provider';
import { ChartLayoutData } from '@dx-private/dxchart5-react/dist/providers/layout-provider';
import { extractDataRequests } from '@dx-private/dxchart5-react/dist/utils/extract-data-requests.util';
// these are just placeholders, you should replace them with your actual data provider and layout data
const chartDataProvider = {} as ChartDataProvider;
const layoutData = {} as ChartLayoutData;
const requests = extractDataRequests(layoutData);
requests.forEach(r => chartDataProvider.requestHistoryData(r.symbol, r.aggregation, r.options));