Syncfusion AI Assistant

How can I help you?

Getting Started with the ASP.NET Core Accumulation Chart Control

20 May 20267 minutes to read

This section explains how to add the Syncfusion® ASP.NET Core Accumulation Chart control to a Razor Pages application using Visual Studio or Visual Studio Code.

To quickly get started with the ASP.NET Core Accumulation Chart control, watch the following 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 Accumulation Chart control, 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

Refer to 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 Accumulation Chart Control

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

By default, a pie series is rendered when JSON data is assigned to the series using the dataSource property. Map the field names in the JSON data to the xName and yName properties of the series.

@{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { xValue = "Chrome", yValue = 15, text = "15", fill = "#00BDAE" },
        new PieChartData { xValue = "UC Browser", yValue = 22, text = "22", fill = "#404041" },
        new PieChartData { xValue = "iPhone", yValue = 32, text = "32", fill = "#357CD2" },
        new PieChartData { xValue = "Safari", yValue = 31, text = "31", fill = "#E56590" },
        new PieChartData { xValue = "Firefox", yValue = 29, text = "29", fill = "#F8B883" },
        new PieChartData { xValue = "Edge", yValue = 24, text = "24", fill = "#70AD47" },
        new PieChartData { xValue = "Others", yValue = 18, text = "18", fill = "#D77FB3" }
    };
}

<ejs-accumulationchart id="container">
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData"
                               xName="xValue"
                               yName="yValue"></e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>
public class PieChartData
{
    public string xValue;
    public double yValue;
    public string text;
    public string fill;
}

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 Accumulation Chart control will be rendered in the default web browser.

ASP.NET Core Accumulation Chart Control

NOTE

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

See Also