How to Generate Charts at Runtime in Blazor: No Custom Designer Required [Webinar Show Notes]

Building runtime-configurable charts often requires custom field selectors, formatting panels, save-and-restore logic, and export workflows. Our recent webinar showed how the Syncfusion^® Blazor Chart Wizard brings these capabilities together in a guided chart-authoring experience.

Unlike a standard Chart component, where developers control the visualization, the Chart Wizard lets users customize visualizations at runtime. At the same time, the application retains control of the data, security, business logic, and available fields.

If you missed the webinar or would like to watch it again, the recording is available on our YouTube channel and embedded below.

Highlights

The webinar introduced a runtime approach that allows users to customize visualizations after deployment. It demonstrated this in the Chart Wizard using Paris 2024 Olympic medal data for the top five countries, with country names and codes as labels and gold, silver, and bronze medal counts as values.

The session showed how to:

• Switch among bar, column, line, scatter, pie, and area charts.
• Select category and series fields through the Data tab.
• Customize chart appearances through the Format tab.
• Save chart configurations as JSON and restore them later.
• Configure export settings, including the file name, width, height, and page orientation.
• Customize the output or cancel an export when data is unavailable.
• Enable right-to-left rendering for multilingual applications.

The Chart Wizard also supports keyboard navigation, screen readers, high-contrast scenarios, and responsive experiences.

The webinar presented a sample that integrates the Chart Wizard with the Syncfusion Blazor DataGrid to provide structured application data. The Chart Wizard can also use other structured data collections.

For large datasets, filter and aggregate records, retrieve data asynchronously, remove unnecessary fields, and perform heavy transformations outside the UI layer.

Prerequisites

To follow along, you need:

• A Blazor web app with an interactive render mode.
• A supported .NET SDK.
• The Syncfusion.Blazor.ChartWizard and Syncfusion.Blazor.Themes NuGet packages.
• A valid Syncfusion license key.

Conclusion

The Syncfusion Blazor Chart Wizard reduces the effort required to develop and maintain custom chart-authoring interfaces while giving users greater flexibility at runtime.

Timestamps

[00:00] Introduction

[00:51] Webinar agenda

[01:17] Poll: How teams handle runtime chart customization

[01:50] The runtime chart configuration challenge

[02:26] Developer discussion with Anantha Lakshmi Kannan

[03:02] When should you use the Chart Wizard?

[03:46] Application control vs. runtime chart configuration

[03:56] Previewing the Blazor Chart Wizard

[04:57] Requirements for following the sample

[05:47] Starting the Blazor implementation

[06:10] Reviewing the project setup

[06:28] Configuring Blazor services and interactive rendering

[07:07] Adding styles and required scripts

[07:35] Setting up the Chart Wizard page

[08:06] Creating the Olympic medal data model

[08:47] Defining category and series fields

[09:16] Binding data to the Chart Wizard

[10:07] Running the application

[10:45] Viewing the initial Chart Wizard

[11:03] What developers and users can control

[11:33] Switching chart types at runtime

[12:37] Selecting chart data fields

[12:59] Customizing chart formatting

[13:46] Configuring legends, tooltips, and data labels

[14:06] Customizing individual data series

[14:22] Configuring chart axes

[15:14] Exporting charts

[15:50] Saving and restoring preferred layouts

[16:19] Adding configuration persistence

[17:14] Creating save and restore methods

[18:18] Persisting layouts across sessions

[18:38] Server-side considerations for saved layouts

[19:20] Customizing chart export behavior

[20:02] Configuring default export settings

[20:27] Handling the exporting event

[22:35] Testing save and restore

[23:21] Testing customized PDF export

[23:49] Accessibility and multilingual considerations

[24:19] Enabling right-to-left support

[25:34] Practical Chart Wizard use cases

[26:20] Using the Chart Wizard with structured application data

[27:42] Performance considerations for larger datasets

[28:38] Developer discussion wrap-up

[29:07] Key takeaways

[30:24] Closing and Q&A

Syncfusion Blazor components can be transformed into stunning and efficient web apps.

Try It Free

Q&A

Q: I was thinking of using Charts for a dashboard for monitoring different types of live customer activity. Can I do this?

A: Yes, Syncfusion Blazor Charts can monitor live customer activity by updating the chart data source through a timer, SignalR, WebSockets, or another real-time service.

Q: Are there any limitations to the charts if using a free developers license?

A: There are no Chart Wizard feature limitations under the free Syncfusion Community License, provided you remain eligible for that license.

Q: Can you close the customization window for full-screen viewing? Also, can you default the customization window to "closed" when the page loads?

A: Yes, the customization panel can be closed for a larger chart view and can be collapsed by default when the page loads by setting PropertyPanelExpanded="false" in the Chart Wizard component.

Related resources

• Syncfusion Blazor Chart Wizard
• Getting started with the Blazor Chart Wizard
• Blazor Chart Wizard demo

Scan it to get the demo app.

Scan it to get the demo app.

Scan it to get the demo app.

Related Blogs

Still Building Custom Chart Builders? Build Runtime Charts with Blazor Chart Wizard

11 min read

What’s New in Syncfusion Essential Studio 2026 Volume 2: AI Features, New SDKs, and Faster Components

11 min read

How to Build an AI-Powered Blazor Chatbot That Turns Conversations into Charts

15 min read

Build a Modern Student Enrollment Dashboard using .NET MAUI Charts

10 min read