Skip to main content

Migration guide

5.17.0 and higher​

ChartDataProvider: New fullData option for studies​

A new optional fullData field has been added to FullChartDataOptions interface in the ChartDataProvider. This field is used to request full candle data for study calculations.

interface FullChartDataOptions extends ChartDataOptions {
    fromTime?: number;
    toTime?: number;
    fullData?: boolean;  // New field
}

When to use:

  • fullData: true - Return all available candles (required for studies precalculation by the library)
  • fullData: false or undefined - Return data based on the request parameters (fromTime/toTime) for initial load or lazy loading (default behavior)

Important notes:

  • This flag is only relevant if your provider implements lazy loading
  • Studies require all historical data to calculate correctly, so when fullData: true, your provider should return complete historical data
  • If your provider doesn't implement lazy loading and always returns all data, you can ignore this flag
  • Action required: If you have an existing ChartDataProvider implementation with lazy loading, you should update your requestHistoryData method to handle the fullData flag to ensure studies work correctly

Example implementation:

async requestHistoryData(
    symbol: string,
    aggregation: AggregationPeriod,
    options?: FullChartDataOptions,
) {
    if (options?.fullData) {
        // Return ALL available candles for study calculations
        return await fetchAllCandles(symbol, aggregation);
    } else {
        // Return candles based on your provider's logic:
        // - For initial load: use fromTime to return data from that point forward
        // - For lazy load: use toTime to return older historical data
        // - Or return all data if you don't implement lazy loading
        return await fetchCandlesForRange(symbol, aggregation, options);
    }
}

OrderProvider and PositionProvider interface changes​

Starting from version 5.17.0, the OrderProvider and PositionProvider interfaces have been updated. The observeOrders, observeExecutedOrders, and observePositions methods now return an unsubscribe callback function instead of void.

Before:

OrderProvider interface:

interface OrderProvider {
	observeOrders(symbol: string, dataCallback: (orders: OrderWithId[]) => void): void;
	observeExecutedOrders(symbol: string, dataCallback: (orders: ExecutedOrder[]) => void): void;
	// ...
}

PositionProvider interface:

interface PositionProvider {
	observePositions(symbol: string, dataCallback: (positions: Position[]) => void): void;
	// ...
}

After:

OrderProvider interface:

interface OrderProvider {
	observeOrders(symbol: string, dataCallback: (orders: OrderWithId[]) => void): () => void;
	observeExecutedOrders(symbol: string, dataCallback: (orders: ExecutedOrder[]) => void): () => void;
	// ...
}

PositionProvider interface:

interface PositionProvider {
	observePositions(symbol: string, dataCallback: (positions: Position[]) => void): () => void;
	// ...
}

Implementation examples​

observeOrders:

observeOrders(symbol: string, callback: (data: OrderWithId[]) => void): () => void {
	if (!currentOrdersBySymbol[symbol]) {
		currentOrdersBySymbol[symbol] = new ReplaySubject<Array<OrderWithId>>();
	}
	const subscription = currentOrdersBySymbol[symbol].subscribe(callback);
	return () => {
		subscription.unsubscribe();
	};
}

observeExecutedOrders:

observeExecutedOrders(symbol: string, callback: (data: ExecutedOrder[]) => void): () => void {
	if (!currentExecutedOrdersBySymbol[symbol]) {
		currentExecutedOrdersBySymbol[symbol] = new ReplaySubject<Array<ExecutedOrder>>();
	}
	const subscription = currentExecutedOrdersBySymbol[symbol].subscribe(callback);
	return () => {
		subscription.unsubscribe();
	};
}

observePositions:

observePositions(symbol: string, callback: (data: Position[]) => void): () => void {
	if (!currentPositionsBySymbol[symbol]) {
		currentPositionsBySymbol[symbol] = new ReplaySubject<Array<Position>>(1);
	}
	const subscription = currentPositionsBySymbol[symbol].subscribe(callback);
	return () => {
		subscription.unsubscribe();
	};
}

5.16.0 and higher​

DrawingsClearConfirmationPopup removal​

The drawings-clear-confirmation-popup.component.tsx and its related styled components have been removed. This component was previously used to show a confirmation dialog before clearing all drawings from the chart.

The Drawings Sidebar provides the same functionality for deleting all drawings through its footer buttons. The sidebar is enabled by default in the chart configuration.

The sidebar footer contains a DELETE_DRAWINGS button that directly calls drawingVM.clearDrawings() without a confirmation popup. In addition to the sidebar, users can also clear drawings from the background menu with the "Clear drawings" button.

If you were using the confirmation popup directly:

  1. Remove any imports of drawings-clear-confirmation-popup.component.tsx and related styled components
  2. Ensure the sidebar is enabled in your config (it's enabled by default):
chartReactConfig: {
  drawings: {
    sidebar: { enabled: true }
  }
}

If you need custom confirmation logic, please use the UI Override system to customize the sidebar footer behavior.

Tokens migration​

For version 5.16.0 and higher, the tokens have been changed. The table below shows the mapping of old tokens to new tokens.

Old tokenNew token
icon-active-bgicon-active
icon-active-disabled-default-bgicon-inactive
icon-primary-default-bgicon-primary
icon-secondary-default-bgicon-secondary
icon-disabled-default-bgicon-disabled
input-focused-borderinput-focus-border
input-hovered-borderinput-hover-border
main_chart-bgchart-bg
main_chart-candle-bear-body-active-bgchart-bear-active
main_chart-candle-bear-body-bgchart-bear-default
main_chart-candle-bull-body-active-bgchart-bull-active
main_chart-candle-bull-body-bgchart-bull-default
main_chart-candle-doji-body-active-bgchart-doji-active
main_chart-candle-doji-body-bgchart-doji-default
main_chart-areachart-area
main_chart-border-activechart-border
main_chart-crosshair-label-bgchart-crosshair
main_chart-crosshair-tag-textchart-crosshair-value
main_chart-divider-default-bgchart-divider
main_chart-grid-dot/linechart-grid
main_chart-high-low-indicatorchart-highlow
main_chart-label-inverted-textchart-label-text-inverted
main_chart-label-textchart-label-text
main_chart-loading-textchart-loading-text
main_chart-post_market_data-bgchart-post-market-bg
main_chart-post_market_data-labelchart-post-market-label
main_chart-post_market_data-linechart-post-market-line
main_chart-pre_market_data-bgchart-pre-market-bg
main_chart-pre_market_data-labelchart-pre-market-label
main_chart-pre_market_data-linechart-pre-market-line
main_chart-progress_bar_bgchart-progress-bar
main_chart-resize_bar-default-bgchart-resize-bar
main_chart-resize_bar-hover-bgchart-resize-bar-hover
main_chart-session_break-bgchart-session-break
main_chart-value-textchart-value
main_chart-value-text-borderchart-value-border
main_chart-watermark-textchart-watermark
main_chart-zero_percent-line-bgchart-zero-line
main_chart-scatter-default-bgchart-scatter
button-sell-hovered-bgbutton-sell-hover-bg
button-focus-borderfocus-border
button-buy-hovered-bgbutton-buy-hover-bg
button-primary-defaultbutton-primary-default-bg
button-primary-hoverbutton-primary-hover-bg
button-primary-pressedbutton-primary-active-bg
button-secondary-defaultbutton-secondary-default-bg
button-secondary-hoverbutton-secondary-hover-bg
button-secondary-pressedbutton-secondary-active-bg
drawing-handle_border-bgdrawing-handle-border
drawing-highlight-default-bgdrawing-highlight-bg
drawing-icon_border-bgdrawing-icon-border
drawing-line-default-bgdrawing-default-line
drawing-line-negative-bgdrawing-negative-line
drawing-line-positive-bgdrawing-positive-line
drawing-tag-default-bgdrawing-tag-bg
drawing-text-defaultdrawing-text
mini_toolbar-default-bgfloating-toolbar-bg
position-icon-default-bgposition-close-icon
position_negative-default-bgposition-negative-bg
position_negative-divider-bgposition-negative-divider
position_negative-wick-bgposition-negative-wick
position_positive-default-bgposition-positive-bg
position_positive-divider-bgposition-positive-divider
position_positive-wick-bgposition-positive-wick
dragging_slider-border-default-bgorder-resizer-default-border
dragging_slider-border-hovered-bgorder-resizer-hover-border
dragging_slider-hovered-bgorder-resizer-hover-bg
dragging_slider-default-bgorder-resizer-default-bg
order-border-default-bgorder-default-border
order-border-hover-bgorder-hover-border
order-button-default-bgorder-protection-button-default-bg
order-button-hover-bgorder-protection-button-hover-bg
order-close_button-default-bgorder-close-button-default-bg
order-close_button-hover-bgorder-close-button-hover-bg
order-default-bgorder-default-bg
order-divider-default-bgorder-default-divider
order-divider-selected-bgorder-selected-divider
order-wick-default-bgorder-wick-default
order-wick-hover-bgorder-wick-hover
order_entry-border-bgorder-entry-border
link-hovered-textlink-hover-text
dropdown-default-bgmenu-bg
dropdown-description-textmenu-secondary-text
dropdown-list_item-default-textmenu-primary-text
dropdown-list_item-disabled-textmenu-disabled-text
dropdown-list_item-divider-bgmenu-divider
dropdown-list_item-hovered-bgmenu-item-hover-bg
dropdown-list_item-selected-textmenu-active-text
dropdown_secondary-bgmenu-secondary-bg
dropdown_secondary-list_item_hovered-bgmenu-secondary-item-hover-bg
toolbar-button-default-colortoolbar-button-default-bg
toolbar-button-default-hover-bgtoolbar-button-hover-bg
databox-text-defaultdatabox-primary-default-text
databox-text-disableddatabox-disabled-text
indicator-01indicator-main
indicator-02indicator-secondary
indicator-03indicator-tertiary
indicator-04indicator-half-up
indicator-05indicator-half-down
indicator-06indicator-up
indicator-07indicator-down

5.15.0 and higher​

React 19 migration​

React 17 is no longer supported. dxchart5-react supports React 18.2.0 and higher (recommended version is 19.x.x).