Syncfusion.AspNetCore.Charts

Syncfusion® ASP.NET Core Charts

The Syncfusion® ASP.NET Core Charts component is a well-crafted charting package that is used to visualize data in graphical format. It contains a rich collection of chart types such as line, area, bar, pie, histogram, financial charts, and more. The Accumulation Chart (pie, donut, funnel, pyramid) is also part of this package.

Key Features

• 50+ chart types including Line, Area, Column, Bar, Pie, Donut, Scatter, Bubble, Hilo, Waterfall, Box & Whisker, and more
• Interactive features: zooming, panning, crosshair, trackball, and tooltip
• Multiple axes, multi-level labels, striplines, and technical indicators for financial charts
• Data labels, annotations, and trendlines
• Export to PNG, JPEG, SVG, and PDF
• Localization, RTL, and accessibility support

Common Setup

All Syncfusion ASP.NET Core controls share the same foundational setup steps:

1. Install NuGet Package

Install-Package Syncfusion.AspNetCore.Charts

2. Register Tag Helper

Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:

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

3. Add Stylesheet & Script References

In your layout file (~/Pages/Shared/_Layout.cshtml):

<head>
    <!-- Themes package -->
    <link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
    
<!-- Add the script for the specific chart component you need. Each component requires only its corresponding script. -->

<!-- Chart component script -->
<script src="_content/Syncfusion.AspNetCore.Charts/scripts/sf-chart.min.js"></script>

<!-- AccumulationChart component script -->
<script src="_content/Syncfusion.AspNetCore.Charts/scripts/sf-accumulation-chart.min.js"></script>

</head>

4. Register Script Manager

In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:

<ejs-scripts></ejs-scripts>

Quick Start

Step 1: ~/Pages/Index.cshtml.cs

public class IndexModel : PageModel
{
    public List<ChartData> ChartDataList { get; set; }

    public void OnGet()
    {
        ChartDataList = new List<ChartData>
        {
            new ChartData { X = "Jan", Y = 21 },
            new ChartData { X = "Feb", Y = 28 },
            new ChartData { X = "Mar", Y = 19 },
            new ChartData { X = "Apr", Y = 42 },
            new ChartData { X = "May", Y = 35 }
        };
    }
}

public class ChartData
{
    public string X { get; set; }
    public double Y { get; set; }
}

Step 2: ~/Pages/Index.cshtml

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-chart-series-collection>
        <e-chart-series dataSource="@Model.ChartDataList" xName="X" yName="Y" type="Line"></e-chart-series>
    </e-chart-series-collection>
</ejs-chart>

Step 3: Run the Application

Press Ctrl+F5 to run the application in your browser.

Documentation

• Getting Started
• API Reference
• Live Demos

Support

• Submit a support ticket

• Community forums

• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA

• Purchase a license

• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

[email protected] | Toll Free: 1-888-9-DOTNET