Getting Started with the ASP.NET Core Chart Control

23 Jul 20266 minutes to read

This section briefly explains how to include the ASP.NET Core Chart control in your ASP.NET Core Web App using Visual Studio and Visual Studio Code.

Ready to streamline your ASP.NET Core development? Discover the full potential of ASP.NET Core controls with AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Code Studio and more. Explore AI Coding Assistant

To get started quickly with ASP.NET Core Chart control, you can check out this video.

Create an ASP.NET Core Web App with Razor Pages

Create an ASP.NET Core Web App using Visual Studio via Microsoft Templates or the ASP.NET Core Extension.

Run the following command to create a new ASP.NET Core Web App.

Terminal
dotnet new webapp -o SyncfusionApp
code -r SyncfusionApp

Alternatively, create an ASP.NET Core Web App using Visual Studio Code via Microsoft Templates or the ASP.NET Core Extension, or the C# Dev Kit extension.

Install the required ASP.NET Core package

Install the Syncfusion.AspNetCore.Charts NuGet package. All Syncfusion ASP.NET Core packages are available on nuget.org. See the NuGet packages topic for more details.

Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
Search the required NuGet package (Syncfusion.AspNetCore.Charts) and install it.

Alternatively, you can install the same package using the Package Manager Console with the following command.

Package Manager Console
Install-Package Syncfusion.AspNetCore.Charts -Version 34.1.29

Open the terminal and run the following command.

Terminal
dotnet add package Syncfusion.AspNetCore.Charts --version 34.1.29

Add ASP.NET Core tag helpers

After the package is installed, open the ~/Pages/_ViewImports.cshtml file and import the Syncfusion.AspNetCore.Charts and Syncfusion.AspNetCore.Base tag helpers.

_ViewImports.cshtml
@addTagHelper *, Syncfusion.AspNetCore.Charts
@addTagHelper *, Syncfusion.AspNetCore.Base

Add script resources

The script can be referenced from NuGet through Static Web Assets. Include the script references inside the <head> of ~/Pages/Shared/_Layout.cshtml file.

_Layout.cshtml
<head>
    ...
    <script src="_content/Syncfusion.AspNetCore.Charts/scripts/sf-chart.min.js"></script>
</head>

Register the script manager

Open the ~/Pages/Shared/_Layout.cshtml file and register the script manager (<ejs-scripts>) at the end of the <body> element as shown below.

_Layout.cshtml
<body>
    ...
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

Add the ASP.NET Core Chart control

Add the ASP.NET Core Chart control in the ~/Pages/Index.cshtml page.

Index.cshtml
<ejs-chart id="container"></ejs-chart>

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The ASP.NET Core Chart control will render in your default web browser.

Open the terminal and run the following command.

Terminal

dotnet run

ASP.NET Core Chart control

Render a Chart with data

To render a column chart, bind a data source to the chart series using the dataSource, xName, and yName properties, and set the type property to Column. The dataSource property specifies the data for the series, while xName and yName map the x-axis and y-axis fields from the data source. The default series type is Line.

Index.cshtml
@{
    var chartData = new List<object>
    {
        new { Month = "Jan", Sales = 35 },
        new { Month = "Feb", Sales = 28 },
        new { Month = "Mar", Sales = 34 },
        new { Month = "Apr", Sales = 32 },
        new { Month = "May", Sales = 40 }
    };
}

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="chartData"
                  xName="Month"
                  yName="Sales"
                  type="Column">
        </e-series>
    </e-series-collection>
</ejs-chart>