Syncfusion Blazor Toolkit Chart Getting Started

Getting Started with Chart

The Syncfusion Blazor Chart component is a powerful, lightweight solution for visualizing data with interactive and responsive charts. This guide provides a quick setup and minimal usage example to get you creating charts quickly.

Prerequisites

.NET 9.0 or later
Blazor Server or WebAssembly project
Developer tooling such as Visual Studio or Visual Studio Code

Install

Install the NuGet package into your Blazor project:

terminal

dotnet add package Syncfusion.Blazor.Toolkit

Register Services (Program.cs)

Add the toolkit services to your application's startup. Example for a Server-hosted app:

Program.cs

@using Syncfusion.Blazor.Toolkit;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents().AddInteractiveServerComponents();

// Register Syncfusion Toolkit services
builder.Services.AddSyncfusionBlazorToolkit();
var app = builder.Build();

For WebAssembly projects, register the corresponding interactive/webassembly services in the client project's Program.cs.

Include Assets

Include the Syncfusion theme CSS in your layout file (App.razor or index.html). Add the following link in the <head> section:

HTML

<link id="syncfusion-theme" href="_content/Syncfusion.Blazor.Toolkit/styles/fluent.min.css" rel="stylesheet" />

Choose a theme that suits your application. Available themes include bootstrap5, fluent, material, and more.

Basic Chart Example

Create a basic Column Chart with sample data:

Chart.razor

@using Syncfusion.Blazor.Toolkit.Charts

<SfChart>
    
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    
</SfChart>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double SalesValue { get; set; }
    }

    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };
}

Adding Chart Title

Display a meaningful title to provide context about the data:

Chart.razor

@using Syncfusion.Blazor.Toolkit.Charts

<SfChart Title="Sales Analysis">
    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
    
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    
</SfChart>

Adding Data Labels

Enable data labels to display values on each data point:

Chart.razor

@using Syncfusion.Blazor.Toolkit.Charts

<SfChart Title="Sales Analysis">
    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
    
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    
</SfChart>

Adding Tooltip

Enable tooltips to show data point information on hover:

Chart.razor

@using Syncfusion.Blazor.Toolkit.Charts

<SfChart Title="Sales Analysis">
    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    
</SfChart>

Complete Chart Example

Here's a complete, fully-featured Chart combining all the features: