• All Demos
  • Grid SDK
  • Chart SDK
  • Scheduler SDK
  • Gantt SDK
  • Rich Text Editor SDK
  • Diagram SDK
  • File Manager SDK
  • Document SDK
  • PDF Viewer SDK
  • DOCX Editor SDK
  • Spreadsheet Editor SDK
  • Material 3
  • Bootstrap 5
  • Fluent 2
  • Tailwind CSS
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Live Candlestick Chart in ASP.NET Core StockChart Control

This ASP.NET Core 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().

DEMO
SOURCE

Real-Time Candlestick Chart

Syncfusion EJ2 StockChart · Simulated one-minute OHLCV data streaming
Initializing local data
Open —
High —
Low —
Close —
Volume —
Last candle status Initializing data stream

This ASP.NET Core 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:

  • 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.


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

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.

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.

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

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab