React Candle Chart

Candle charts display price movements over time by representing each time interval with a candle that shows the open, high, low and close values, emphasizing market trends, volatility, and potential reversals.

Overview

To visualize data as a candle chart, set the type property to Candle within the ChartSeries component. Bind the open, high, low, and close values from your data source so each data point displays as a candle.

The color and body style of each candle are determined by comparing the closing price with the previous candle’s closing price. Based on this data, the chart automatically renders the following default candle structures:

• Green Hollow Candle - Occurs when the closing price is higher than both the opening price and the previous candle’s closing price. This pattern signals strong bullish momentum.
• Green Filled Candle - Occurs when the closing price is lower than the opening price but still higher than the previous candle’s closing price. This suggests an overall upward trend with some short-term weakness.
• Red Hollow Candle - Occurs when the closing price is higher than the opening price but lower than the previous candle’s closing price. This indicates a downward trend with some short-term strength.
• Red Filled Candle - Occurs when the closing price is lower than both the opening price and the previous candle’s closing price. This pattern signals strong bearish momentum.

Solid Candles

Solid candles in a stock chart represent price movements where the open and close prices are different, with the candle body filled to indicate a downward move (close < open) or hollow for an upward move (close > open). This visual style helps traders quickly assess market sentiment and momentum.

To visualize data as a solid candles chart, set the enableSolidCandles property to true.

Bullish and Bearish Fill

You can customize the fill color of candle bodies in the ChartSeries component by setting the following properties:

• bullFillColor – Sets the color where the closing price is higher than the opening price.
• bearFillColor – Sets the color where the closing price is lower than the opening price.

Live Point Update

React Chart supports live data updates, ensuring your chart reflects the latest information in real time without requiring a page reload. Whenever the chart's data source changes, the chart automatically re-renders to display the updated values.