This
React Stock Chart
example demonstrates a
real-time candlestick chart driven by continuously
updated local data. The chart starts with 120 simulated one-minute
OHLCV candles and then dynamically updates the active candle or
appends a new candle using series.setData() and
series.addPoint().
In this example, the chart uses a plain in-memory array as its data source, so no network request is required. A timer simulates a real-time stock data stream by generating frequent price updates for one-minute OHLCV candles.
Each generated record is processed in one of the following ways:
series.setData(candle, 0). Animation is disabled for
this operation because updates occur frequently.
series.addPoint(candle, 100) with a short animation.
The open, high, low, close, and volume values shown above the chart represent the latest simulated candle. The values are refreshed whenever the local data stream updates the active candle or adds a new one.
You can replace the simulated data returned by
createInitialLocalData() with data from an API,
WebSocket, or another local data source. The same update logic can be
used to build real-time stock market visualizations, financial
dashboards, and live trading charts.
Injecting modules
The Stock Chart component features are divided into individual
feature modules. To use the date-time axis, inject the
DateTime module using
StockChart.Inject(DateTime). To render the candlestick
series, inject the CandleSeries module using
StockChart.Inject(CandleSeries). To display the latest
data value on the chart axis, inject the
LastValueLabel module using
StockChart.Inject(LastValueLabel).
More information about configuring the Stock Chart component is available in the Stock Chart documentation .