👁 Image
Syncfusion.Blazor.Chart3D 33.2.13

Syncfusion® Blazor 3D Chart Component

The Syncfusion® Blazor 3D Chart Component enables interactive 3D data visualization in Blazor applications. Visualize complex relationships and trends with depth, enhancing data comprehension through immersive three-dimensional charting.

Key features

• Multiple 3D Chart Types - Supports six 3D chart types including Column, Bar, Stacked Column, Stacked Bar, 100% Stacked Column, and 100% Stacked Bar.
• Flexible Data Binding - Bind data from local collections or remote services (JSON, Web API, OData). Data labels and tooltips can also be bound directly to your data.
• Rich Interactivity - Interact with 3D charts using rotation, tilt, selection, highlighting, tooltips, and smooth animation effects.
• Customizable Axes & Legends - Supports category, numeric, date‑time, and logarithmic axes, multiple axes configurations, and highly configurable legends with paging and flexible positioning.
• Data Labels & Templates - Display data labels for clarity and enhance them with HTML‑based templates for rich visuals.
• Responsive Design - Automatically adapts to desktops, tablets, and mobile devices on any resolution and modern OS.
• Built‑in Themes & Full Customization - Comes with Material 3, Fluent, Tailwind, Bootstrap, Fabric, and more themes. Customize palettes, backgrounds, and layouts to match your brand.
• Globalization & Localization - Supports cultural formatting, RTL rendering, and localized number/date/currency formats.
• Export & Print Options - Export charts as PNG, JPEG, SVG, or PDF for sharing and reporting.
• Accessibility Support - WCAG‑aligned with keyboard navigation, screen reader support, and WAI‑ARIA compliance.
• Blazor Server & WebAssembly Compatible - Works seamlessly across both Blazor Server and Blazor WASM applications.

Add script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

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

Quick start

1. Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add Blazor 3D Chart component to your Razor page.

@using Syncfusion.Blazor.Chart3D

<SfChart3D Title="Sales Analysis">
 <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category"></Chart3DPrimaryXAxis>
 <Chart3DSeriesCollection>
 <Chart3DSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="Chart3DSeriesType.Column">
 <Chart3DDataLabel Visible="true"></Chart3DDataLabel>
 </Chart3DSeries>
 </Chart3DSeriesCollection>
</SfChart3D>

@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 }
 };
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• API Reference
• Live Demos

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a 30-day free trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET