--- title: "Introducing the New Blazor 3D Charts Component" published_at: "2024-06-19T17:45:13+00:00" modified_at: "2026-01-14T08:17:27+00:00" url: "https://www.syncfusion.com/blogs/post/blazor-3d-charts-component" excerpt: "Let’s see the features of the new Syncfusion Blazor 3D Charts added in the 2024 Volume 2 release and the steps to get started." taxonomy_category: - "Blazor" - "Chart" - "Development" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Blazor" - "Charts" - "productivity" - "Web Development" - "What's New" --- # Introducing the New Blazor 3D Charts Component [Bhuvanesh Valarman](https://www.syncfusion.com/blogs/author/bhuvanesh-valarman) ![Introducing the New Blazor 3D Charts Component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Introducing-the-New-Blazor-3D-Charts-Component.png) **TLDR:** Discover the new Syncfusion Blazor 3D Charts component in the 2024 Volume 2 release! Transform your data into stunning 3D visualizations with features like multiple chart types, data binding, rotation, tilt, and interactive elements. Learn how to integrate and use this powerful tool in your Blazor apps. Imagine stepping into a world where data leaps off the page, where two-dimensional graphs evolve into vibrant three-dimensional masterpieces. This is the magic of 3D charts, a dynamic canvas that breathes life into complex datasets. We’re glad to unveil the new Syncfusion [Blazor 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component in the [Essential Studio® 2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download) release. This trailblazing tool is not just about data presentation; it’s about transforming data into a story to add depth and clarity to your visualizations. Let’s explore the features of this innovative Blazor 3D Charts component! ## Blazor 3D Charts: An overview The Blazor 3D Charts component visually represents data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a better understanding of data patterns. Refer to the following image. Blazor 3D Charts ## Key features The key features of Blazor 3D Charts are: - [Different chart types](#Chart) - [Data binding](#Data) - [Data labels](#labels) - [Axis types](#Axis) - [Legends](#Legends) - [User interaction](#User) - [Rotation and tilt](#Rotation) Now, let’s delve deeper into each of these exciting features. ### Chart types The Blazor 3D Charts component offers six versatile chart types; all are easily configurable and have built-in support for visually stunning effects. - **Column:** Represents data with vertical bars for easy value comparison. - **Bar:** Utilizes horizontal bars to display data and facilitate value comparison. - **Stacked Column:** Plots data points on top of each other using vertical bars for comprehensive visualization. - **Stacked Bar:** Achieves the same effect as the Stacked Column but with horizontal bars. - **100% Stacked Column:** Illustrates the percentage distribution of multiple datasets within a total, with each column adding up to 100%. - **100% Stacked Bar:** Resembles the Stacked Column but uses horizontal bars, showcasing the percentage distribution of datasets within a total. Refer to the following image. Different chart types supported in Blazor 3D Charts ### Data binding Effortlessly bind the Blazor 3D Charts component with an array of JSON objects or a data manager, supporting local and remote data binding methods. In addition to the chart series, data labels and tooltips can also be bound to your data. ### Data labels Annotate points with labels to improve the readability of data. Enhance these labels with HTML elements such as images, DIVs, and spans, creating informative and visually appealing data representations. Refer to the following image. Data labels in Blazor 3D Charts ### Axis types You can plot number, date-time, logarithmic, and string data types on the chart axis. The axis features include: - **Inversed axis:** Flip the axis direction from its default orientation. - **Opposed position:** Display the axis in the opposite position. - **Multiple axes:** Include more than one axis on the same or opposite side. - **Smart labels:** Add dynamic labels that automatically position themselves to enhance readability and prevent overlapping. Custom axis feature in Blazor 3D Charts ### Legends Provide additional information about the data series using a customizable legend. Labels and symbols aid viewers in identifying and differentiating between various series within the chart. Legends in Blazor 3D Charts ### User interaction You can also add the following interactive features to the Blazor 3D Charts: - **Tooltip:** A small, informative pop-up box offering additional context, details, or information when users hover over or click on data points. - **Highlight and selection:** Easily highlight and select data points for improved comprehension. Adding patterns and colors to selected data enhances chart interactivity.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/User-interactivity-features-in-Blazor-3D-Charts.gif](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/User-interactivity-features-in-Blazor-3D-Charts.gif) User interactivity features in Blazor 3D Charts ### Rotation and tilt In addition to the previous features, the Blazor 3D Charts supports: - **Rotation:** Dynamically rotate the Chart from 0 to 360 degrees around a fixed point or axis in a three-dimensional space. Rotation can occur clockwise or counterclockwise. - **Tilt:** Change the inclination angle of the chart along one axis, providing a different perspective.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Rotation-and-tilt-features-in-Blazor-3D-Charts.gif](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Rotation-and-tilt-features-in-Blazor-3D-Charts.gif) Rotation and tilt features in Blazor 3D Charts ## Getting started with the Blazor 3D Charts component We’ve explored the stunning features of the new Blazor 3D Charts. Let’s see how to use it to visualize data! ### Step 1: Create a new Blazor Web App First, create a Blazor Web app using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) . You must configure the corresponding [interactive render modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs#interactivity-location) while creating a Blazor Web app. ### Step 2: Install the Syncfusion Blazor 3D Charts NuGet package To add the Blazor 3D Charts component in the app, open the NuGet package manager in Visual Studio (***Tools → NuGet Package Manager → Manage NuGet Packages for Solution***), search and install ** Syncfusion.Blazor.Chart3D**. Alternatively, you can utilize the following package manager command to achieve the same. ``` Install-Package Syncfusion.Blazor.Chart3D -Version 26.1.35 ``` ### Step 3: Register the Syncfusion Blazor service Open the **~/_Imports.razor** file and import the ** Syncfusion.Blazor** and ** Syncfusion.Blazor.Chart3D** namespaces. ``` @using Syncfusion.Blazor @using Syncfusion.Blazor.Chart3D ``` Register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App. Select the **Interactive render mode** as WebAssembly or Auto (Server and WebAssembly). If you select ** Auto** as the interactive mode, you must register the Syncfusion Blazor service in both **~/Program.cs** files of your Blazor Web App. ``` .... using Syncfusion.Blazor; .... builder.Services.AddSyncfusionBlazor(); .... ``` ### Step 4: Add the script resources The script can be obtained from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) . To include the script reference, append it to the end of the **** tag in the **~/Components/App.razor** file as illustrated below. ``` .... ``` ### Step 5: Add the Syncfusion Blazor 3D Charts component Add the Syncfusion Blazor 3D Charts component to the **.razor** file inside the ** Pages** folder. If the interactivity location is ** Per page/component** in the web app, define the render mode at the top of the component, as shown below. ``` @* Define the desired render mode here *@ @rendermode InteractiveAuto ``` ``` ``` ### Step 6: Populate the Blazor 3D Charts with data To bind data to the Blazor 3D Charts component, you can assign an **IEnumerable** object to the ** DataSource** property. It can also be provided as an instance of the ** DataManager.** Refer to the following code example. ``` @code{ public List DataSource { get; set; } = new List() { new Chart3DData { Country = "Tesla", Sales = 137429 }, new Chart3DData { Country = "Aion", Sales = 80308 }, new Chart3DData { Country = "Wuling", Sales = 76418 }, new Chart3DData { Country = "Changan", Sales = 52849 }, new Chart3DData { Country = "Geely", Sales = 47234 }, new Chart3DData { Country = "Nio", Sales = 31041 }, new Chart3DData { Country = "Neta", Sales = 22449 }, new Chart3DData { Country = "BMW", Sales = 18733 } }; public class Chart3DData { public string Country { get; set; } public double Sales { get; set; } } } ``` Now, map the **Country** and ** Sales** data fields to the series ** XName** and ** YName** properties. Then, set the data to the ** DataSource** property and the chart type to ** Column** because we will view the data in a column chart. ### Step 7: Run the app Finally, run the app by pressing **Ctrl+F5 (Windows)** or **⌘+F5 (macOS)** keys to launch the application. This will render the Syncfusion Blazor 3D Charts component in your default web browser. After executing the previous code examples, we’ll get the output in the following image. Integrating 3D Charts in the Blazor app ## References For more details, refer to the [Blazor 3D Charts documentation](https://blazor.syncfusion.com/documentation/3d-chart/getting-started) and [demos](https://blazor.syncfusion.com/demos/chart-3d/column?theme=fluent2) . ## Conclusion Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion [Blazor 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component, which is a remarkable addition to our [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download) release. Try them out and leave your feedback in the comments section below! The latest version of the Blazor Charts component is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not a Syncfusion customer, try our [30-day free trial](https://www.syncfusion.com/downloads) to check it out. You can also 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 - [What’s New in C# 13 for developers?](https://www.syncfusion.com/blogs/post/whats-new-csharp-13-for-developers) - [Syncfusion Essential Studio® 2024 Volume 2 is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2) - [Easily Implement Google Authentication in the Blazor Webassembly App](https://www.syncfusion.com/blogs/post/google-authentication-blazor-wasm-app) - [Pro Annotations on Mobile PDFs with Blazor PDF Viewer](https://www.syncfusion.com/blogs/post/mobile-pdf-annotations-with-blazor)