syncfusion-blazor-sunburst-chart

Syncfusion Blazor Sunburst Chart

The SfSunburstChart renders hierarchical data as concentric rings of segments — a visual sometimes described as a multi-level pie chart or radial treemap. Each ring represents a level in the hierarchy inferred from a flat DataSource, and each segment represents a node in that hierarchy. The component is ideal for displaying population breakdowns, organizational workforces, file-system usage, sales by region, or any data with a parent-child structure that fits a parent → child traversal.

This skill guides you through setup across all Blazor hosting models, data binding from a flat collection, appearance and geometry, interactive features (highlight, selection, drill-down, tooltip, legend), events, printing/exporting, and accessibility.

When to Use This Skill
Documentation and Navigation Guide
- Getting Started
- Getting Started — Blazor Web App
- Getting Started — Standalone WebAssembly
- Working with Data
- Appearance
- Dimensions
- Animation
- Data Label
- Legend
- Highlight
- Selection
- Drill-Down
- Tooltip
- Events
- Print and Export
- Accessibility
Quick Start
Common Patterns
- Enable legend, tooltip, and data labels together
- Enable drill-down with breadcrumbs
- Full interactive dashboard (palette + legend + data labels + drill-down + tooltip)
Key Props Reference
See also

When to Use This Skill

Add a Sunburst Chart to a Blazor Server, WebAssembly, or Web App project.
Bind hierarchical data using IdMemberPath, ParentIdMemberPath, LabelMemberPath, and ValueMemberPath.
Customize theme, palette, background, border, margin, radius, inner radius, start/end angles, title, and subtitle.
Size the chart to fit a container, fixed pixels, or percentages.
Enable and style data labels, legend, highlight, selection, drill-down with breadcrumbs, and tooltips.
Subscribe to drill, click, selection, legend, data-label, segment, tooltip, loaded, and export events.
Print the chart or export it as PNG, JPEG, SVG, PDF, XLSX, or CSV.
Meet WCAG 2.2 AA, Section 508, screen reader, keyboard, and ARIA accessibility requirements.

Package: Syncfusion.Blazor.Charts NuGet. Platform: Blazor (.NET 8/9/10).

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Create a Blazor Server App, install the NuGet package, and add _Imports.razor namespaces.
Register AddSyncfusionBlazor() in Program.cs.
Add the script reference and first chart example.

Getting Started — Blazor Web App

📄 Read: references/getting-started-web-app.md

Create a Blazor Web App (Server/WebAssembly/Auto interactivity).
Install the package in the .Client project for WASM/Auto render modes.
Register services, add the script reference, and render the first chart.

Getting Started — Standalone WebAssembly

📄 Read: references/getting-started-wasm.md

Create a standalone Blazor WebAssembly app.
Install the package, register the service, add the script to index.html.
Render the first chart.

Working with Data

📄 Read: references/working-with-data.md

Bind a flat collection via DataSource and the four member paths.
Required member paths and the hierarchy-inference rules.
Hierarchy validation: missing/duplicate IDs, cycles, unresolvable parents, multiple roots, and depth limits.
Reflection binding with nameof, numeric values and culture, and data updates.

Appearance

📄 Read: references/appearance.md

Built-in themes via Theme, custom color palette via Palette, and Background.
Chart border using SunburstChartBorder, chart margin using SunburstChartMargin.
Ring geometry: Radius, InnerRadius, StartAngle, EndAngle.
Title and subtitle via SunburstTitleSettings and SunburstSubtitleSettings.

Dimensions

📄 Read: references/dimensions.md

Size the chart to fit a container with CSS, fixed pixels, or percentage values.
Width and Height defaults (100% each).

Animation

📄 Read: references/animation.md

EnableAnimation (default true) toggles the entrance animation.
AnimationType chooses Rotation (default) or FadeIn.
Disabling animation for performance and large datasets.

Data Label

📄 Read: references/data-label.md

Enable labels via SunburstDataLabelSettings.Visible.
OverflowMode (Trim, Hide, None) and RotationMode (Angle, Normal).
Customize text style with SunburstDataLabelTextStyle.

Legend

📄 Read: references/legend.md

Enable and position the legend via SunburstLegendSettings.
Position (Top, Bottom, Left, Right), ToggleVisibility, and accessibility properties.
Customize appearance with SunburstLegendTextStyle and SunburstLegendBorder.

Highlight

📄 Read: references/highlight.md

Enable hover highlighting via SunburstHighlightSettings.
Mode (Single, Parent, Child, All), Color, and Opacity.
Tooltip-driven highlighting with SunburstTooltipSettings.EnableHighlight.

Selection

📄 Read: references/selection.md

Enable segment selection via SunburstSelectionSettings.
Mode (Single [default], Parent, Child, All), Color, and Opacity.
Selection clears on re-click and drill navigation.

Drill-Down

📄 Read: references/drill-down.md

SunburstDrillSettings.Enable activates drill-down (double-click, double-tap, or Enter).
Breadcrumb position belongs to SunburstDrillSettings (BreadcrumbHorizontalAlignment, BreadcrumbVerticalAlignment); appearance and accessibility belong to the nested SunburstBreadcrumbSettings child component.

Tooltip

📄 Read: references/tooltip.md

SunburstTooltipSettings.Enable displays label and value.
Format, HeaderText, EnableHighlight, ShowHeaderLine, Opacity, Fill.
Customize text style and border.

Events

📄 Read: references/events.md

Drills: DrillDownStarting/DrillUpStarting (cancelable), DrillDownCompleted/DrillUpCompleted.
Interactions: PointClick, SelectionChanged, LegendClick.
Rendering: LegendItemRendering, DataLabelRendering, SegmentRendering, TooltipRendering.
Lifecycle and export: Loaded, PrintCompleted, Exporting, ExportCompleted.
Action<> vs EventCallback<> semantics.

Print and Export

📄 Read: references/print-export.md

Print via PrintAsync.
Export via ExportAsync to PNG, JPEG, SVG, PDF (with orientation), XLSX, or CSV.
AllowDownload and IsBase64 parameters.

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2 AA, Section 508, screen reader, keyboard, and ARIA support.
WAI-ARIA roles and attributes for segments, levels, breadcrumbs, and legend.
Keyboard navigation table (Tab, arrows, Home, End, Enter, Space).

Quick Start

@using Syncfusion.Blazor.Charts

<SfSunburstChart TItem="NodeDetails"
                 Title="Population by Region"
                 DataSource="@DataSource"
                 IdMemberPath="@nameof(NodeDetails.Id)"
                 ParentIdMemberPath="@nameof(NodeDetails.ParentId)"
                 ValueMemberPath="@nameof(NodeDetails.Value)"
                 LabelMemberPath="@nameof(NodeDetails.Name)"
                 Width="100%"
                 Height="450px">
</SfSunburstChart>

@code {
    public class NodeDetails
    {
        public string Id { get; set; } = string.Empty;
        public string? ParentId { get; set; }
        public string Name { get; set; } = string.Empty;
        public double Value { get; set; }
    }

    public List<NodeDetails> DataSource = new()
    {
        new NodeDetails { Id = "USA", ParentId = null, Name = "USA" },
        new NodeDetails { Id = "USA-Electronics", ParentId = "USA", Name = "Electronics", Value = 35 },
        new NodeDetails { Id = "India", ParentId = null, Name = "India" },
        new NodeDetails { Id = "India-Electronics", ParentId = "India", Name = "Electronics", Value = 30 },
        new NodeDetails { Id = "Germany", ParentId = null, Name = "Germany" },
        new NodeDetails { Id = "Germany-Electronics", ParentId = "Germany", Name = "Electronics", Value = 20 }
    };
}

Common Patterns

Enable legend, tooltip, and data labels together

<SfSunburstChart TItem="RegionData"
                 DataSource="@Regions"
                 IdMemberPath="@nameof(RegionData.Id)"
                 ParentIdMemberPath="@nameof(RegionData.ParentId)"
                 LabelMemberPath="@nameof(RegionData.Label)"
                 ValueMemberPath="@nameof(RegionData.Population)"
                 Width="100%" Height="600px">
    <SunburstLegendSettings Visible="true" Position="SunburstLegendPosition.Bottom" />
    <SunburstTooltipSettings Enable="true" />
    <SunburstDataLabelSettings Visible="true" />
</SfSunburstChart>

Enable drill-down with breadcrumbs

<SfSunburstChart TItem="RegionData"
                 DataSource="@Regions"
                 IdMemberPath="@nameof(RegionData.Id)"
                 ParentIdMemberPath="@nameof(RegionData.ParentId)"
                 LabelMemberPath="@nameof(RegionData.Label)"
                 ValueMemberPath="@nameof(RegionData.Population)"
                 Width="100%" Height="600px">
    <SunburstDrillSettings Enable="true" ShowBreadcrumbs="true" />
</SfSunburstChart>

Full interactive dashboard (palette + legend + data labels + drill-down + tooltip)

A common real-world request combines custom colors, an interactive legend, readable data labels, drill-down navigation, and a highlighted tooltip. Set the breadcrumb alignment to Bottom and Center when the user wants breadcrumbs below the chart rather than at the top (the default is Top/Left).

<SfSunburstChart TItem="NodeDetails"
                 Title="Global Workforce Distribution"
                 DataSource="@WorkforceData"
                 Palette="@BrandPalette"
                 IdMemberPath="@nameof(NodeDetails.Id)"
                 ParentIdMemberPath="@nameof(NodeDetails.ParentId)"
                 LabelMemberPath="@nameof(NodeDetails.Name)"
                 ValueMemberPath="@nameof(NodeDetails.HeadCount)"
                 Width="90%" Height="600px">
    <SunburstLegendSettings Visible="true"
                            Position="SunburstLegendPosition.Top"
                            ToggleVisibility="true" />
    <SunburstDataLabelSettings Visible="true"
                               OverflowMode="SunburstLabelOverflowMode.Hide"
                               RotationMode="SunburstLabelRotationMode.Normal" />
    <SunburstDrillSettings Enable="true"
                           ShowBreadcrumbs="true"
                           BreadcrumbHorizontalAlignment="BreadcrumbHorizontalAlignment.Center"
                           BreadcrumbVerticalAlignment="BreadcrumbVerticalAlignment.Bottom">
        <SunburstBreadcrumbSettings FontWeight="600"
                                     Separator=">"
                                     SeparatorColor="#9E9E9E" />
    </SunburstDrillSettings>
    <SunburstTooltipSettings Enable="true"
                             HeaderText="Workforce Detail"
                             EnableHighlight="true" />
</SfSunburstChart>

Key Props Reference

Property	Component	Purpose
`DataSource`	`SfSunburstChart`	Flat `IEnumerable<TItem>` providing the rows
`IdMemberPath`	`SfSunburstChart`	Property name for each row's stable ID (required)
`ParentIdMemberPath`	`SfSunburstChart`	Property name for each row's parent ID (required)
`LabelMemberPath`	`SfSunburstChart`	Property name for each segment's label text (required)
`ValueMemberPath`	`SfSunburstChart`	Numeric property for each segment's value (required)
`Theme`	`SfSunburstChart`	Built-in theme (`Theme.Bootstrap5`, `Fluent`, etc.)
`Palette`	`SfSunburstChart`	Custom color array for root-level segments
`Radius` / `InnerRadius`	`SfSunburstChart`	Ring geometry ratios (0-1)
`StartAngle` / `EndAngle`	`SfSunburstChart`	Angular span in degrees
`EnableAnimation`	`SfSunburstChart`	Toggle entrance animation (default `true`)
`AnimationType`	`SfSunburstChart`	`Rotation` (default) or `FadeIn`
`Title` / `Subtitle`	`SfSunburstChart`	Chart heading and optional secondary line

About this skill

Table of Contents