Syncfusion.Blazor.Chart3D

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.

System Requirements

• .NET 8.0 or later (Blazor Web App, Blazor Server, Blazor WebAssembly and Blazor Hybrid)
• See full requirements: System Requirements

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.Chart3D

NuGet Package Manager

Install-Package Syncfusion.Blazor.Chart3D

Add Script References

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

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

Quick Start

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

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

1. Add the Blazor 3D Chart component in a 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.

[email protected] | Toll Free: 1-888-9-DOTNET