Syncfusion Blazor Charts

High-performance charting component with 30+ chart types for data visualization in Blazor applications. Render large datasets quickly with extensive interactivity and customization options.

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

Key Features

• 50+ Chart Types: Line, Area, Column, Bar, Spline, Scatter, Bubble, Pie, Donut, Pyramid, Funnel, Polar, Radar, and more
• Cartesian: Line, Spline, Area, Step, Column, Bar, Stacked/100%, Range, Scatter, Bubble
• Polar/Radar Charts: Line, Area, Column, Range
• Accumulation Charts: Pie, Donut, Pyramid, Funnel
• Stacked & Range Charts: Stacked variants (100%), Range Area, Range Column
• Financial Charts: Candlestick, OHLC, HiLo for stock market data
• Special Charts: Box and Whisker, Histogram, Waterfall, Pareto, and Stacked variants.
• Interactive Features: Crosshair, trackball, zooming, panning, tooltip, selection
• High Performance: Lazy loading and efficient rendering of large datasets
• Customization: Template support, legend customization, axis formatting
• Responsive & Mobile-friendly: Touch gestures and adaptive layouts
• Multiple Themes: Built-in and custom styling options

System Requirements

• .NET 8.0 or later (Blazor Server, Blazor Web App, Blazor WebAssembly, Blazor Hybrid)
• See full requirements: System Requirements

Installation

Install the Charts package, which provides the scripts referenced below:

dotnet add package Syncfusion.Blazor.Charts

Add Stylesheet and Script References

For Blazor Web App / Blazor Server, add these to Components/App.razor or App.razor. For Blazor WebAssembly, add these to wwwroot/index.html.

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion Blazor service in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add a chart to your Razor page:

@using Syncfusion.Blazor.Charts

<SfChart Title="Monthly Sales">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesData" XName="Month" YName="Sales" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public class SalesData
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }

    private List<SalesData> SalesData = new List<SalesData>
    {
        new SalesData { Month = "Jan", Sales = 35 },
        new SalesData { Month = "Feb", Sales = 28 },
        new SalesData { Month = "Mar", Sales = 34 },
        new SalesData { Month = "Apr", Sales = 32 },
        new SalesData { Month = "May", Sales = 40 }
    };
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor Server
• Getting Started with WebAssembly
• API Reference
• Live Demos
• Feature Overview

Support

• Submit a support ticket
• Community forums
• Feature requests

Other Popular Blazor Components

Explore other popular Syncfusion Blazor components curated from UI components, standalone SDKs, and document solution suites.

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.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET