Skip to main content

News

The chart core displays news as small circles above candles. These icons can be hovered to reveal more information.

In the dxchart-react layer, hovering a news icon opens a popup with the corresponding content.

If multiple news items share the same timestamp and match a single candle, they are grouped. On hover, the handler receives an object that includes an array of new items.

dxcharts-lite API​

You can display news using the NewsComponent, available from chart.

Set news on the chart​

Use the setNews method to define which news should be shown:


Handle news hover​

To respond to hover events, use a hover handler:


Event icons​

You can override event icons using the chart.config.components.events.icons configuration.

Each event type has two icon states: normal and hover. Be sure to define both if overriding.

Custom icon example​

Configuration reference​

News configuration​

ChartConfigComponentsNews

Property
Description
Type

visible

boolean

radius

{ common: number; hovered: number; }

hitTest

{ radius: number; }

News colors​

NewsTheme

Property
Description
Type

normal

string

hover

string

backgroundColor

string

API reference​

NewsComponent.setNews
NewsComponent.setNews(news: News[]): void

Sets news to the chart

Parameters
news: News[]
Returns
void
NewsComponent.setVisible
NewsComponent.setVisible(visible: boolean): void

Changes the component visibility.

Parameters
visible: boolean
Returns
void
NewsComponent.getNewsPerCandle
NewsComponent.getNewsPerCandle(): NewsPerCandle[]
Returns
NewsPerCandle[]