Syncfusion AI Assistant

How can I help you?

Getting Started with the ASP.NET Core Chart Control

22 May 20267 minutes to read

This section explains how to add the Syncfusion® ASP.NET Core Chart control to your application using Visual Studio.

Ready to streamline your Syncfusion® ASP.NET Core development? Discover the full potential of Syncfusion® ASP.NET Core controls with Syncfusion® 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, Syncfusion® CodeStudio, and more. Explore Syncfusion® AI Coding Assistant

To get started quickly with the ASP.NET Core Chart control, watch this video:

Prerequisites

Refer to the System requirements for ASP.NET Core controls before creating the application.

Create an ASP.NET Core Web Application with Razor Pages

You can create an ASP.NET Core application using either of the following options:

Create an ASP.NET Core Razor Pages Project Using Visual Studio

  1. Start Visual Studio and select Create a new project.

  2. In the Create a new project window, choose ASP.NET Core Web App (Razor Pages) → Next.

  3. In the Configure your new project dialog, specify the project name (and optionally change location/folder).

  4. Click Next.

  5. In the Additional information dialog:
    • Select .NET 10.0 or the latest supported .NET version.
    • Verify: Do not use top-level statements is unchecked.
  6. Click Create.

For alternative approaches to create the project, see Create a new project in Visual Studio.

Install ASP.NET Core Package in the Application

To add Syncfusion® ASP.NET Core controls in the application, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution). Search for Syncfusion.EJ2.AspNet.Core and install it.

Alternatively, you can use the Package Manager Console by navigating to: Tools → NuGet Package Manager → Package Manager Console, and then run the following command:

Install-Package Syncfusion.EJ2.AspNet.Core -Version 33.2.3

Create an ASP.NET Core Razor Pages Project Using Visual Studio Code

  1. Install the latest .NET SDK that supports .NET 10.0 or later.
  2. Open Visual Studio Code.
  3. Press Ctrl + ` to open the integrated terminal.
  4. Run the following command to create the project:
dotnet new webapp -o SyncfusionApp

Then, open the project in a new Visual Studio Code window using the following command:

code -r SyncfusionApp

Install ASP.NET Core Package in the Application

To integrate the Syncfusion® ASP.NET Core Chart component, install the required Syncfusion.EJ2.AspNet.Core NuGet packages using the integrated terminal:

  1. Navigate to the directory containing the .csproj file.
  2. Run the following commands to install the package:
dotnet add package Syncfusion.EJ2.AspNet.Core --version 33.2.3

NOTE

Syncfusion® ASP.NET Core controls are available on nuget.org. Refer to the NuGet packages topic to learn more about installing NuGet packages in various operating system environments. The Syncfusion.EJ2.AspNet.Core NuGet package depends on Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating the Syncfusion® license key.

Add the Syncfusion® ASP.NET Core Tag Helper

Open the ~/Pages/_ViewImports.cshtml file and import the Syncfusion.EJ2 Tag Helper.

@addTagHelper *, Syncfusion.EJ2

Add Script Resources

Add the script reference inside the <head> element of the ~/Pages/Shared/_Layout.cshtml file as follows.

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js"></script>
</head>

NOTE

Checkout the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET Core application.

Register the Syncfusion® Script Manager

Register the script manager <ejs-scripts> at the end of the <body> element in the ASP.NET Core application as follows.

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

Add the ASP.NET Core Chart Control

Add the Syncfusion® ASP.NET Core Chart tag helper to the ~/Pages/Index.cshtml page.

<ejs-chart id="container"></ejs-chart>

Press Ctrl + F5 on Windows or ⌘ + F5 on macOS to run the application in
Visual Studio. If you are using Visual Studio Code, run the following command in the terminal:

dotnet run

The Syncfusion® ASP.NET Core Chart control will be rendered in the default web browser.

ASP.NET Core Chart Control

Render a Chart with Data

To render a column chart, define a data source and bind it to the chart series using the dataSource, xName, and yName properties.

@{
    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>

ASP.NET Core Chart Control

NOTE

Explore the sample on GitHub to understand how this getting started example works.

See Also