Migration guide

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 token	New token
icon-active-bg	icon-active
icon-active-disabled-default-bg	icon-inactive
icon-primary-default-bg	icon-primary
icon-secondary-default-bg	icon-secondary
icon-disabled-default-bg	icon-disabled
input-focused-border	input-focus-border
input-hovered-border	input-hover-border
main_chart-bg	chart-bg
main_chart-candle-bear-body-active-bg	chart-bear-active
main_chart-candle-bear-body-bg	chart-bear-default
main_chart-candle-bull-body-active-bg	chart-bull-active
main_chart-candle-bull-body-bg	chart-bull-default
main_chart-candle-doji-body-active-bg	chart-doji-active
main_chart-candle-doji-body-bg	chart-doji-default
main_chart-area	chart-area
main_chart-border-active	chart-border
main_chart-crosshair-label-bg	chart-crosshair
main_chart-crosshair-tag-text	chart-crosshair-value
main_chart-divider-default-bg	chart-divider
main_chart-grid-dot/line	chart-grid
main_chart-high-low-indicator	chart-highlow
main_chart-label-inverted-text	chart-label-text-inverted
main_chart-label-text	chart-label-text
main_chart-loading-text	chart-loading-text
main_chart-post_market_data-bg	chart-post-market-bg
main_chart-post_market_data-label	chart-post-market-label
main_chart-post_market_data-line	chart-post-market-line
main_chart-pre_market_data-bg	chart-pre-market-bg
main_chart-pre_market_data-label	chart-pre-market-label
main_chart-pre_market_data-line	chart-pre-market-line
main_chart-progress_bar_bg	chart-progress-bar
main_chart-resize_bar-default-bg	chart-resize-bar
main_chart-resize_bar-hover-bg	chart-resize-bar-hover
main_chart-session_break-bg	chart-session-break
main_chart-value-text	chart-value
main_chart-value-text-border	chart-value-border
main_chart-watermark-text	chart-watermark
main_chart-zero_percent-line-bg	chart-zero-line
main_chart-scatter-default-bg	chart-scatter
button-sell-hovered-bg	button-sell-hover-bg
button-focus-border	focus-border
button-buy-hovered-bg	button-buy-hover-bg
button-primary-default	button-primary-default-bg
button-primary-hover	button-primary-hover-bg
button-primary-pressed	button-primary-active-bg
button-secondary-default	button-secondary-default-bg
button-secondary-hover	button-secondary-hover-bg
button-secondary-pressed	button-secondary-active-bg
drawing-handle_border-bg	drawing-handle-border
drawing-highlight-default-bg	drawing-highlight-bg
drawing-icon_border-bg	drawing-icon-border
drawing-line-default-bg	drawing-default-line
drawing-line-negative-bg	drawing-negative-line
drawing-line-positive-bg	drawing-positive-line
drawing-tag-default-bg	drawing-tag-bg
drawing-text-default	drawing-text
mini_toolbar-default-bg	floating-toolbar-bg
position-icon-default-bg	position-close-icon
position_negative-default-bg	position-negative-bg
position_negative-divider-bg	position-negative-divider
position_negative-wick-bg	position-negative-wick
position_positive-default-bg	position-positive-bg
position_positive-divider-bg	position-positive-divider
position_positive-wick-bg	position-positive-wick
dragging_slider-border-default-bg	order-resizer-default-border
dragging_slider-border-hovered-bg	order-resizer-hover-border
dragging_slider-hovered-bg	order-resizer-hover-bg
dragging_slider-default-bg	order-resizer-default-bg
order-border-default-bg	order-default-border
order-border-hover-bg	order-hover-border
order-button-default-bg	order-protection-button-default-bg
order-button-hover-bg	order-protection-button-hover-bg
order-close_button-default-bg	order-close-button-default-bg
order-close_button-hover-bg	order-close-button-hover-bg
order-default-bg	order-default-bg
order-divider-default-bg	order-default-divider
order-divider-selected-bg	order-selected-divider
order-wick-default-bg	order-wick-default
order-wick-hover-bg	order-wick-hover
order_entry-border-bg	order-entry-border
link-hovered-text	link-hover-text
dropdown-default-bg	menu-bg
dropdown-description-text	menu-secondary-text
dropdown-list_item-default-text	menu-primary-text
dropdown-list_item-disabled-text	menu-disabled-text
dropdown-list_item-divider-bg	menu-divider
dropdown-list_item-hovered-bg	menu-item-hover-bg
dropdown-list_item-selected-text	menu-active-text
dropdown_secondary-bg	menu-secondary-bg
dropdown_secondary-list_item_hovered-bg	menu-secondary-item-hover-bg
toolbar-button-default-color	toolbar-button-default-bg
toolbar-button-default-hover-bg	toolbar-button-hover-bg
databox-text-default	databox-primary-default-text
databox-text-disabled	databox-disabled-text
indicator-01	indicator-main
indicator-02	indicator-secondary
indicator-03	indicator-tertiary
indicator-04	indicator-half-up
indicator-05	indicator-half-down
indicator-06	indicator-up
indicator-07	indicator-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).