Getting Started with the ASP.NET Core Charts Control

Arun Raj
2 min readJan 31, 2024

Learn how to add a chart to a Syncfusion ASP.NET Core web application. The ASP.NET Core Charts is a well-crafted charting component to visualize data. It contains a rich UI gallery of 50+ Charts and Graphs, ranging from line to financial, that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It also includes features such as zooming, panning, tooltips, crosshair, trackball, highlight, and selection.

This video shows how to configure a chart with a title, legends, data labels, and tooltips. To add ASP.NET Core controls to the application, open the NuGet package manager in Visual Studio, open NuGet Package Manager, search for Syncfusion EJ2 Asp Net Core, and install it. You can bind simple JSON data to the chart using the dataSource property in series. Then, map the fields in JSON to xName and yName properties.

In this video, the category axis on the X-axis is utilized to represent string values instead of numbers. By default, category labels are placed between the ticks on an axis. This can also be placed on ticks using the labelPlacement property. The range of the category axis can be customized using minimum, maximum, and interval properties. The category axis can also be rendered based on the index values of the data source. This can be achieved by setting the isIndexed property to true.

A line series is the most basic type of line chart, where straight lines connect the data points. To render a line series, use series Type as Line. On the other hand, a MultiColoredLine series is a type of line chart where data points can have different colors based on some criteria. To render a multicolored line series, use series Type as MultiColoredLine. Here, the data’s individual colors can be mapped by using PointColorMapping.

Tutorial video: https://www.syncfusion.com/tutorial-videos

Download an example from GitHub: https://github.com/SyncfusionExamples/getting-started-with-the-aspdotnet-core-charts-control

--

--