HelpBot Assistant

How can I help you?

Getting Started with Blazor Chart

31 Oct 20256 minutes to read

This section explains you through the step-by-step process of integrating the Syncfusion® Blazor Chart component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.

Ready to streamline your Syncfusion® Blazor development?
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistants

Prerequisites

To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to here or the Syncfusion® Blazor Extension.

Create a new Blazor MAUI App in Visual Studio

You can create a Blazor MAUI App using Visual Studio via Microsoft Templates. For detailed instructions, refer to this Blazor MAUI App Getting Started documentation.

Install Syncfusion® Blazor Charts NuGet in the app

To add Blazor Chart component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install Syncfusion.Blazor.Charts.

Install-Package Syncfusion.Blazor.Charts -Version 32.2.3

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Prerequisites

To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to here or the Syncfusion® Blazor Extension.

Create a new Blazor MAUI App in Visual Studio Code

You can create a Blazor MAUI App using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to this Blazor MAUI App Getting Started documentation.

Install Blazor Charts NuGet in the App

To add Blazor Chart component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install Syncfusion.Blazor.Charts.

dotnet add package Syncfusion.Blazor.Charts -v 32.2.3
dotnet restore

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Add Import Namespaces

Open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Charts namespace.

@using Syncfusion.Blazor 
@using Syncfusion.Blazor.Charts

Register Syncfusion® Blazor Service

Register the Syncfusion® Blazor Service in the ~/MauiProgram.cs file.

using Microsoft.Extensions.Logging;
using Syncfusion.Blazor;

namespace MauiBlazorWindow;

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.Services.AddMauiBlazorWebView();
            builder.Services.AddSyncfusionBlazor();
#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }

Add script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the <head> section of the ~/index.html file.

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

    //Blazor Chart Component script reference.
    <!-- <script src="_content/Syncfusion.Blazor.Charts/scripts/sf-chart.min.js" type="text/javascript"></script> -->
</head>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Blazor Chart component

Add the Syncfusion® Blazor Chart component in the ~/Pages/Home.razor file.

<SfChart>

</SfChart>

How to Run the Sample on Windows

Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.

Blazor Chart Component

How to Run the Sample on Android

To run the Blazor Chart in a Blazor Android MAUI application using the Android emulator, follow these steps:

Refer here to install and launch Android emulator.

NOTE

If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidanceTroubleshooting Android Emulator.

Blazor Chart Component

See also