--- title: "Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App" published_at: "2023-02-08T11:30:00+00:00" modified_at: "2026-06-24T12:45:36+00:00" url: "https://www.syncfusion.com/blogs/post/instantly-update-a-real-time-chart-with-signalr-in-blazor-server-side-app" excerpt: "This blog explains how to create and update a real-time chart in a Blazor server-side app using the Syncfusion Blazor Charts component and SignalR communication." taxonomy_category: - "Blazor" - "Chart" - "Development" - "UI" - "Web" taxonomy_post_tag: - "Blazor" - "Chart" - "productivity" - "Web Development" --- # Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App [Gowrimathi S](https://www.syncfusion.com/blogs/author/gowrimathis) ![Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Instantly-Update-a-Real-Time-Chart-with-SignalR-in-Blazor-Server-Side-App.png) In this blog, we will learn how to create and update a real-time chart in a Blazor server-side app using SignalR communication. ## What is SignalR? [SignalR](https://learn.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr) is an open-source software library used to send asynchronous notifications to client-side applications. The library includes both server-side and client-side components. SignalR works great in any kind of web app, but the best use cases are generally apps that need dynamically changing real-time data to be presented in the UI. We are going to create a real-time chart in a Blazor server-side app using the [Syncfusion Blazor Charts component](https://www.syncfusion.com/blazor-components/blazor-charts) and SignalR. ## Prerequisites - [.NET Core 6.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) . - [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) . ## Create a Blazor server-side app Follow these steps to create a Blazor server-side application: 1. Open **Visual Studio** and select ** create a new project**. 2. Then, select the **Blazor Server App** template and click ** Next**. 3. Name the project **BlazorSignalRChartApp** and click ** Next**. Ensure the target framework is **.NET 6.0**. 4. Finally, select **Create**. Thus, we have created the Blazor server-side app. ## Setting up SignalR in the Blazor server project Let’s configure the SignalR communication library with the Blazor server-side app. ### Step 1: Add SignalR client library. Add the SignalR client library to the Blazor server-side project: 1. In the **Solution Explorer** window, right-click the ** BlazorSignalRChartApp** project and select ** Manage NuGet Packages**. ![Manage NuGet Packages](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Manage-NuGet-Packages.png) 2. Now, confirm that the **Package source** is set to **nuget.org**.![Set the Package source to nuget.org](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Package-source-is-set-to-nuget.org_-1.png) 3. Search for and select the **Microsoft.AspNetCore.SignalR.Client** package and then install it.![Microsoft.AspNetCore.SignalR.Client package](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Microsoft.AspNetCore.SignalR.Client-package.png) ### Step 2: Add SignalR hub to the project. Let’s add the SignalR hub to the Blazor server-side project: 1. In the **Solution Explorer** window, right-click the ** BlazorSignalRChartApp**project and add a folder called ** Hubs**. Then, add a class called ** ChartHub**. The class should inherit from the SignalR’s ** Hub** class, which is in the ** Microsoft.AspNetCore.SignalR** namespace. Refer to the following code example.``` using Microsoft.AspNetCore.SignalR; namespace BlazorSignalRChartApp.Server.Hubs { public class ChartHub : Hub { } } ``` 2. Finally, to complete the configuration for the SignalR, add the endpoint for the hub in the **Program.**** cs**file like in the following code example.``` using BlazorSignalRChartApp.Server.Hubs; builder.Services.AddSignalR(); app.MapHub("/charthub"); app.MapFallbackToPage("/_Host"); ``` This code adds the SignalR to the request pipeline by pointing to the ** ChartHub** class with the provided **/charthub** path. ## Step 3: Add Syncfusion Blazor Charts to the project. Next, we are going to use the [Syncfusion Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component to create a real-time chart. Simplify Blazor Chart Development Spend less time building data visualization features from scratch. Syncfusion Blazor Charts includes ready-to-use support for multiple chart types, data binding, interactive tooltips, legends, zooming, selection, and responsive layouts. [Start Building Today](https://www.syncfusion.com/blazor-components/blazor-charts) First, install the charts package: 1. In the **Solution Explorer** window, right-click the ** BlazorSignalRChartApp**project and select ** Manage NuGet Packages**. 2. Then, confirm that the **Package source** is set to **nuget.org**. 3. Search for and select the **Syncfusion.**** Blazor.Chart package** and then install it. 4. Open the **~/_Imports.razor** file and import the **Syncfusion.Blazor** namespace in it.``` @using Syncfusion.Blazor ``` 5. Then, open the **~/Program.cs** file and register the Syncfusion Blazor Service.``` using BlazorSignalRChartApp.Server.Hubs; using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddSignalR(); builder.Services.AddSyncfusionBlazor(); ``` 1. Open the **_Layout.cshtml** file and add the following script reference in it.``` ``` 2. Add the Syncfusion Blazor Charts component in the Razor file. The Charts component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.``` @using Syncfusion.Blazor.Charts ``` 3. Press **Ctrl+F5** (Windows) or ⌘+F5 (macOS) to run the application. Then, the Syncfusion Blazor Charts component will be rendered in the default web browser.![Adding Syncfusion Blazor Charts Component in the Server-Side App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Adding-Syncfusion-Blazor-Charts-Component-in-the-Server-Side-App.png) Adding Syncfusion Blazor Charts Component in the Server-Side App ## Step 4: Updating data to the chart through SignalR. We have configured the SignalR server and added the Syncfusion Blazor Charts control in the client. Next, let’s see how to populate data to the chart through SignalR client: 1. First, create a class named **ChartData** with ** Date** and ** Value** as properties inside the ** Data** folder.``` public class ChartData { Public DateTime Date { get; set; } public int Value { get; set; } } ``` 2. Inside the **ChartHub** class, add the ** UpdateData()** hub method to send the list of ChartData to the client when called. Refer to the following code.``` public async Task UpdateData() { await Clients.All.SendAsync("ReceiveMessage", GetData()); } public static List GetData() { var r = new Random(); return new List() { new ChartData { Date = new DateTime(2022, 2, 2), Value = r.Next(1, 40) }, new ChartData { Date = new DateTime(2022, 3, 2), Value = r.Next(1, 40) }, new ChartData { Date = new DateTime(2022, 4, 2), Value = r.Next(1, 40) }, new ChartData { Date = new DateTime(2022, 5, 2), Value = r.Next(1, 40) } }; } ``` 3. Next, create a connection to the hub (**charthub**) with the following code in the ** OnInitializedAsync** method of the ** Index.razor** file. Then, start the connection with the ** StartAsync** method.``` private HubConnection? hubConnection; protected override async Task OnInitializedAsync() { hubConnection = new HubConnectionBuilder() .WithUrl(NavigationManager.ToAbsoluteUri("/charthub")) .Build(); await hubConnection.StartAsync(); } ``` 4. Once the connection is established, use **SendAsync** in the ** OnInitializedAsync** method of the ** Index.razor** file to call the ** hub** method on the server with the specified method name. Refer to the following code example.``` await hubConnection.SendAsync("UpdateData"); ``` 5. Let’s replace the empty chart in the **Index.razor** file with a line chart. Refer to the following code example. ``` ``` 6. The chart currently renders without any data. Next, assign the data received by the client in the **ReceiveMessage** method to the chart, and map the ** XName** and ** YName** properties of the chart series to the corresponding data field names. ``` @code { public List Data; hubConnection.On>("ReceiveMessage", (data) => { Data = data; InvokeAsync(StateHasChanged); }); } ``` 7. Press **Ctrl+F5**(Windows) or **⌘+F5** (macOS) to run the application. Then, the Syncfusion Blazor Charts component with data from SignalR will be rendered in the default web browser.![Updating Real-Time Chart Data Using SignalR in Blazor Server-Side App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Updating-Real-Time-Chart-Data-Using-SignalR-in-Blazor-Server-Side-App.png) Updating Real-Time Chart Data Using SignalR in Blazor Server-Side App 8. Let’s create a timer that runs the **AddData** method to update the data in the chart through SignalR every two seconds. Now, every two seconds, the data from SignalR will be fed to the chart. Refer to the following GIF image.![Updating Real-Time Chart Data Every Two Seconds Using SignalR in Blazor Server App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Updating-Real-Time-Chart-Data-Every-Two-Seconds-Using-SignalR-in-Blazor-Server-App.gif) Updating Real-Time Chart Data Every Two Seconds Using SignalR in Blazor Server App ## GitHub reference For the complete example, check out the [creating a real-time chart using SignalR in a Blazor server-side app demo on GitHub](https://github.com/SyncfusionExamples/BlazorSignalRChartApp) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to create and update a real-time chart in a Blazor server-side app using the Syncfusion [Blazor Charts component](https://www.syncfusion.com/blazor-components/blazor-charts) and SignalR communication. Try out the steps in this blog and leave your valuable feedback in the comments section. Essential Studio® for [Blazor](https://www.syncfusion.com/blazor-components) offers over 80+ UI components and file-format libraries. Use them to build world-class applications! For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! ## Related blogs - [Get Real-Time Updates in Blazor WebAssembly Apps with SignalR Communication](https://www.syncfusion.com/blogs/post/get-real-time-updates-in-blazor-wasm-apps-with-signalr-communication.aspx) - [Boosting Performance of Blazor Gantt Chart Using Virtualization](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization.aspx) - [Easily Use a Dynamic Blob Container in the Blazor File Manager](https://www.syncfusion.com/blogs/post/easily-use-a-dynamic-blob-container-in-the-blazor-file-manager.aspx) - [A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 7](https://www.syncfusion.com/blogs/post/a-full-stack-web-app-using-blazor-webassembly-and-graphql-part-7.aspx)