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.

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

.NET CLI

dotnet add package Syncfusion.Blazor.Charts

NuGet Package Manager

Install-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.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<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

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