How to Create ASP.NET Core Financial Charts

Arun Raj
2 min readFeb 26, 2024

Learn how to add a financial chart to a Syncfusion ASP.NET Core web application. This video shows how to configure a high-low, open-high-low-close (OHLC), and candle chart and add titles, crosshairs, and tooltips.

ASP.NET Core Charts is a well-crafted charting component for visualizing data. It contains a rich UI gallery of 50+ chart and graph types, ranging from line to financial, that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It includes features such as zooming, panning, tooltips, crosshair, trackball, highlight, and selection.

The Syncfusion ASP.NET Core financial charts are designed to visualize stock market trends, price movements, and other financial data in a graphical format. To add ASP.NET Core controls to an application, open the NuGet package manager in Visual Studio, search for Syncfusion EJ2 Asp Net Core, and install it. You can bind simple JSON data to the chart using the dataSource property in the series. Then, map the fields in JSON to the xName and yName properties.

In the high-low series, the horizontal line on the left indicates the opening price, and the one on the right indicates the closing price. When the open stock value is greater than the close value, it is shown in red, the bull fill color. When the open stock value is less than the close value, it is shown in green, the bear fill color.

The candle series has rectangular boxes with lines above and below them. The line at the upper end indicates the day’s highest trading prices, whereas the line at the lower end indicates the day’s lowest trading price. The upper and lower ends of a rectangular box show the day’s opening and closing prices. When the open value is greater than the close value, the box is filled. When the open value is less than the close value, the box is unfilled.

Tutorial video:

Download an example from GitHub: