Adding a Syncfusion Blazor Chart and Pivot Table to a Radzen Project

Following my Angular post

Syncfusion provides a Community version of their controls for small business with less than a $1 million USD in annual gross revenue and 5 or fewer developers and individual developers Community License or Trial Version

To get started create a Blazor Application.

I called the my project SyncfusionChart How to create a project

My sample MSSQL is the Northwind database How to get it

Infer the MSSQL database call it Northwind How to infer Schema

Make sure all the Views are selected

Create a page for the Chart Control

Create an empty Page and call it Home
Tick “Start page”, “Include in navigation” and then save the form


In the page load event

Type : Invoke data source method

Name : getSummary_of_Sales_by_Years

Parameters: Add

Name : $top

Value: 100


Then: add

Type: Set property

Name: Summary

Value: ${result}

Property type : IEnumerable


Go to the toolbox and drag the html5 control onto the form.


Add the following to the HTML content


Create a page for the Pivot View

Create a page call it Pivot View
In the page load event
Type : Invoke data source method
Name : getProductSalesFor1997

Then: add
Type: Set property
Name: Orders
Value: ${result}
Property type : IEnumerable

Add the html control and add the following

                  <PivotViewRow Name="CategoryName"></PivotViewRow>
                  <PivotViewRow Name="ProductName"></PivotViewRow>
                  <PivotViewValue Name="ProductSales" Caption="Units Sold"></PivotViewValue>

Now ran the Application you will get errors in the Output Window
Stop the Application then go to Settings and add the following pages to Code Generation ignore List

These are files we will be modifying and so not want Radzen to overwrite them.



Next we open VS 2019 or VS Code to do the rest of the modifying How to

We need to add the following Nuget packages to your project How to



Next we will need to create a Startup partial class

I called It SyncfusionStartup.cs

Copy the following code

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Syncfusion.EJ2.Blazor;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SyncfusionChart
public partial class Startup
partial void OnConfigureServices(IServiceCollection services)
partial void OnConfigure(IApplicationBuilder app, IWebHostEnvironment env)
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("My License");




Next you will need to get a Syncfusion Licence for blazor so you can replace “My License” with your license, you may need need to replace the namespace with your project name as well. How to

Then add the following using statements to _Imports.razor

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Charts
@using Syncfusion.EJ2.Blazor.PivotView


Add the Following to Pages_Host.cshtml under the body tag

<link href="" rel="stylesheet" />
<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet" />


Now go back to radzen and run the project.


Pivot View


Great post Al! Thanks for sharing!

Amazing, thank you so much! This post should be made sticky or put into the documentation or something...

Stephen B

1 Like

I just went through the post. Good stuff. I see a lot potential for Syncfusion components in RadZen apps.

Changes made in the latest Syncfusion Blazor version (From version)
Nuget Package

Syncfusion.EJ2.Blazor to Syncfusion.Blazor


<EjsChart></EjsChart>  to  <SfChart></SfChart>
<EjsPivotView></EjsPivotView>	 to <SfPivotView></SfPivotView>

In Previous versions, you would load scripts ej2.min.js and ejs-interop.min.js manually in the application, but now this is not required .


@using Syncfusion.EJ2.Blazor to @using Syncfusion.Blazor
@using Syncfusion.EJ2.Blazor.Charts to @using Syncfusion.Blazor.Charts
@using Syncfusion.EJ2.Blazor.PivotView to @using Syncfusion.Blazor.PivotView


Hi @alistair ,

Do you make use of the "Theme" attribute on the components ? how to use this .

thanks for sharing!

Sorry I haven't used the controls since.
I only did the post to show you could use Syncfusion in Radzen as a learning exercise.

Hi alistair,

First, thank you for this post! It will be saving me a lot of time. I am trying this on a Blazor Client-side project, and using the latest version of Radzen, I am working with .NET 6 (so visual studio 2022), and being a beginner with all of this, I am stumped. I have tried to implement the SyncfusionStartup.cs class on the client project, but I am getting this:

Would you know why the OnConfigureServices, and OnConfigure function would not be available?
Also, I cannot find the _Host.cshtml file, should I create it, and if yes, in the client or server project?
Let me know if you have any ideas about these issues, I will continue digging and post my findings if I succeed to make this work.
Thanks again for the post!

Hi @fstonge
Have a look at this documentation from Syncfusion
Client Side and .net 6 is a little different from Sever Side

Getting Started with Syncfusion Blazor WASM App in Visual Studio

1 Like