Syncfusion.Blazor.Chart3D 35.1.40

Syncfusion Blazor 3D Chart

The Syncfusion Blazor 3D Chart component is a graphical representation of data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a more immersive and comprehensive understanding of data patterns.

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

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 App, Blazor WebAssembly and Blazor Hybrid App)
• See full requirements: system requirements

Installation

Install the Chart3D package, which provides the scripts referenced below:

dotnet add 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 service in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the 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
• Blazor 3D Chart component features overview
• API reference
• Blazor 3D Chart component demos
• Blazor 3D Chart component video tutorials

Support and feedback

• For queries, reach our Syncfusion support team or post them through the community forums.
• Request new features through the Syncfusion feedback portal.

Other popular Blazor components

Explore other popular Syncfusion Blazor components curated from UI components, standalone SDKs, and document solution suites.

License

This is a commercial product and requires a paid license for possession or use. Syncfusion licensed software, including this component, is subject to the terms and conditions of the Syncfusion EULA. You can purchase a license here or start a free 30-day trial here.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ 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.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET