Provides guidance for building and customizing Syncfusion Blazor 3D Charts. Trigger this skill whenever the user needs help with SfChart3D, 3D Column/Bar charts, axes, data binding, rotation, tilt, depth, legends, tooltips, or any configuration in Syncfusion.Blazor.Chart3D.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
File Explorer
17 files
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview
name
syncfusion-blazor-3D-charts
description
Provides guidance for building and customizing Syncfusion Blazor 3D Charts. Trigger this skill whenever the user needs help with SfChart3D, 3D Column/Bar charts, axes, data binding, rotation, tilt, depth, legends, tooltips, or any configuration in Syncfusion.Blazor.Chart3D.
A comprehensive skill for implementing and customizing Syncfusion's Blazor 3D Chart component. The 3D Chart provides stunning three-dimensional visualization for column, bar, and stacked chart types with rich customization options including rotation, tilt, depth, and various axis types.
When to Use This Skill
Use this skill when you need to:
Create three-dimensional charts in Blazor applications
Visualize data with 3D column, bar, or stacked chart types
Implement rotatable and tiltable 3D visualizations
Configure category, numeric, datetime, or logarithmic axes for 3D charts
Bind data from various sources (IEnumerable, remote data, dynamic objects)
Customize 3D chart appearance (colors, depth, wall color, rotation)
Add data labels, legends, and tooltips to 3D charts
Configure axis labels, tick lines, and grid lines
Enable selection, highlighting, and interaction in 3D charts
Create multi-pane 3D chart layouts
Export or print 3D charts
Ensure WCAG accessibility compliance for 3D visualizations
Troubleshoot 3D chart rendering or configuration issues
The 3D Chart component renders data in three-dimensional space with configurable rotation, tilt, and depth for enhanced visual impact. It supports all standard chart features including multiple series, rich tooltips, legends, data labels, and extensive customization options.
@page "/3d-chart-demo"
@using Syncfusion.Blazor.Chart3D
<SfChart3D Title="Sales Analysis"
WallColor="transparent"
EnableRotation="true"
RotationAngle="7"
TiltAngle="10"
Depth="100">
<Chart3DPrimaryXAxis Title="Month"
ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
</Chart3DPrimaryXAxis>
<Chart3DPrimaryYAxis Title="Sales (in thousands)">
</Chart3DPrimaryYAxis>
<Chart3DLegendSettings Visible="true"></Chart3DLegendSettings>
<Chart3DTooltipSettings Enable="true"></Chart3DTooltipSettings>
<Chart3DSeriesCollection>
<Chart3DSeries DataSource="@SalesData"
Name="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> SalesData = 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 }
};
}
Common Patterns
Multiple Series Chart
@using Syncfusion.Blazor.Chart3D
<SfChart3D WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
<Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
</Chart3DPrimaryXAxis>
<Chart3DSeriesCollection>
<Chart3DSeries DataSource="@Data" Name="Series 1" XName="X" YName="Y1" Type="Chart3DSeriesType.Column">
</Chart3DSeries>
<Chart3DSeries DataSource="@Data" Name="Series 2" XName="X" YName="Y2" Type="Chart3DSeriesType.Column">
</Chart3DSeries>
</Chart3DSeriesCollection>
</SfChart3D>
@code {
public class ChartData
{
public string X { get; set; }
public double Y1 { get; set; }
public double Y2 { get; set; }
}
public List<ChartData> Data = new List<ChartData>
{
new ChartData { X = "Jan", Y1 = 35, Y2 = 28 },
new ChartData { X = "Feb", Y1 = 28, Y2 = 32 },
new ChartData { X = "Mar", Y1 = 34, Y2 = 30 },
new ChartData { X = "Apr", Y1 = 32, Y2 = 36 },
new ChartData { X = "May", Y1 = 40, Y2 = 38 },
new ChartData { X = "Jun", Y1 = 32, Y2 = 34 },
new ChartData { X = "Jul", Y1 = 35, Y2 = 37 }
};
}
Stacked Column Chart
@using Syncfusion.Blazor.Chart3D
<SfChart3D WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
<Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
</Chart3DPrimaryXAxis>
<Chart3DSeriesCollection>
<Chart3DSeries DataSource="@Data" XName="X" YName="Y1" Type="Chart3DSeriesType.StackingColumn">
</Chart3DSeries>
<Chart3DSeries DataSource="@Data" XName="X" YName="Y2" Type="Chart3DSeriesType.StackingColumn">
</Chart3DSeries>
</Chart3DSeriesCollection>
</SfChart3D>
@code {
public class StackingData
{
public string X { get; set; }
public double Y1 { get; set; }
public double Y2 { get; set; }
}
public List<StackingData> Data = new List<StackingData>
{
new StackingData { X = "Jan", Y1 = 20, Y2 = 15 },
new StackingData { X = "Feb", Y1 = 18, Y2 = 12 },
new StackingData { X = "Mar", Y1 = 25, Y2 = 14 },
new StackingData { X = "Apr", Y1 = 22, Y2 = 16 },
new StackingData { X = "May", Y1 = 28, Y2 = 18 },
new StackingData { X = "Jun", Y1 = 24, Y2 = 14 },
new StackingData { X = "Jul", Y1 = 26, Y2 = 17 }
};
}
DateTime Axis Chart
@using Syncfusion.Blazor.Chart3D
<SfChart3D WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
<Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.DateTime"
LabelFormat="yyyy">
</Chart3DPrimaryXAxis>
<Chart3DSeriesCollection>
<Chart3DSeries DataSource="@TimeSeriesData"
XName="Date"
YName="Value"
Type="Chart3DSeriesType.Column">
</Chart3DSeries>
</Chart3DSeriesCollection>
</SfChart3D>
@code {
public class TimeSeriesPoint
{
public DateTime Date { get; set; }
public double Value { get; set; }
}
public List<TimeSeriesPoint> TimeSeriesData = new List<TimeSeriesPoint>
{
new TimeSeriesPoint { Date = new DateTime(2018, 1, 1), Value = 120 },
new TimeSeriesPoint { Date = new DateTime(2019, 1, 1), Value = 135 },
new TimeSeriesPoint { Date = new DateTime(2020, 1, 1), Value = 150 },
new TimeSeriesPoint { Date = new DateTime(2021, 1, 1), Value = 170 },
new TimeSeriesPoint { Date = new DateTime(2022, 1, 1), Value = 160 },
new TimeSeriesPoint { Date = new DateTime(2023, 1, 1), Value = 185 },
new TimeSeriesPoint { Date = new DateTime(2024, 1, 1), Value = 200 }
};
}
Key Properties and APIs
SfChart3D Component
Main Properties:
Title: Chart title text
SubTitle: Chart subtitle text
Width/Height: Chart dimensions (string with units or percentage)
