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:

• When the generated record has the same timestamp as the latest candle, the existing candle is updated using series.setData(candle, 0). Animation is disabled for this operation because updates occur frequently.
• When the generated record has a newer timestamp, a new one-minute candlestick is appended using 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. The sample browser application includes the DateTime, CandleSeries and LastValueLabel feature modules through ej2.min.js, which are required to use the date-time axis, render the candlestick series and display the latest data value on the chart axis.

More information about configuring the Stock Chart component is available in the Stock Chart documentation .