Class SfSunburstChart<TItem>

Represents the Syncfusion Blazor Sunburst Chart component, which visualizes hierarchical data as a series of concentric rings.

Inheritance

object

ComponentBase

SfSunburstChart<TItem>

Implements

IComponent

IHandleEvent

IHandleAfterRender

IAsyncDisposable

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnAfterRenderAsync(bool)

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.Charts.dll

Syntax

public class SfSunburstChart<TItem> : ComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IAsyncDisposable

Type Parameters

Name	Description
TItem	The type of the data item contained in the chart's data source.

Remarks

The SfSunburstChart<TItem> component displays hierarchical data in a radial layout, where each level of the hierarchy is represented by a ring and each data item is rendered as a segment within that ring. The size of each segment is determined by the value specified through the ValueMemberPath property.

The chart enables users to explore hierarchical relationships by presenting parent-child data structures in a compact and interactive visualization. Hierarchy is declared through the IdMemberPath, ParentIdMemberPath, LabelMemberPath, and ValueMemberPath parameters on the chart itself — there is no separate grouping subcomponent.

The Sunburst chart supports an arbitrary number of hierarchical levels, data labels, tooltips, legends, selection, highlighting, drill-down, and extensive customization options for creating rich and interactive data visualizations.

Examples

<SfSunburstChart TItem="EmployeeData" DataSource="@EmployeesData"
                 IdMemberPath="Id"
                 ParentIdMemberPath="ParentId"
                 LabelMemberPath="Name"
                 ValueMemberPath="EmployeesCount">
</SfSunburstChart>

@code {
    public List<EmployeeData> EmployeesData { get; set; } = new();
}

Constructors

SfSunburstChart()

Declaration

public SfSunburstChart()

Properties

AccessibilityDescription

Gets or sets the accessibility description for the Sunburst chart.

Declaration

[Parameter]
public string AccessibilityDescription { get; set; }

Property Value

Type	Description
string	A string that provides descriptive text for assistive technologies. The default value is Empty.

Remarks

This property specifies an accessible description for the chart, helping screen readers convey additional context and information to users.

Use this property to describe the chart's purpose, content, or any important information that may not be visually apparent.

Examples

<SfSunburstChart
    AccessibilityDescription="Displays sales distribution across regions and products">
</SfSunburstChart>

AccessibilityRole

Gets or sets the accessibility role of the Sunburst chart.

Declaration

[Parameter]
public string AccessibilityRole { get; set; }

Property Value

Type	Description
string	A string that specifies the ARIA role of the chart element. The default value is Empty.

Remarks

This property defines the semantic role of the chart root for assistive technologies. When the value is empty (the default) or not a supported ARIA role token, the rendered root falls back to the semantic default role "img". Use lowercase, element-compatible ARIA role tokens in rendered markup.

Examples

<SfSunburstChart AccessibilityRole="img">
</SfSunburstChart>

AnimationType

Gets or sets the animation effect used when rendering the Sunburst chart.

Declaration

[Parameter]
public SunburstAnimationType AnimationType { get; set; }

Property Value

Type	Description
SunburstAnimationType	A SunburstAnimationType value that specifies the animation style. The default value is Rotation.

Remarks

This property determines how the Sunburst chart is animated during its initial rendering.

• FadeIn - Gradually displays the chart segments using a fade-in effect.
• Rotation - Displays the chart segments using a rotational animation effect.

This property is applied only when EnableAnimation is set to true.

Examples

<SfSunburstChart AnimationType="SunburstAnimationType.FadeIn">
</SfSunburstChart>

<SfSunburstChart AnimationType="SunburstAnimationType.Rotation">
</SfSunburstChart>

Background

Gets or sets the background color of the Sunburst chart.

Declaration

[Parameter]
public string Background { get; set; }

Property Value

Type	Description
string	A string that specifies the background color of the Sunburst chart. The default value is "transparent".

Remarks

This property controls the background appearance of the chart area.

The color can be specified using standard CSS color formats, including named colors, hexadecimal values, RGB values, and RGBA values.

Setting the background to "transparent" allows the chart to inherit the visual appearance of its parent container.

Examples

<SfSunburstChart Background="#F5F5F5">
</SfSunburstChart>

<SfSunburstChart Background="lightblue">
</SfSunburstChart>

DataLabelRendering

Gets or sets the action that is invoked before a data label is rendered.

Declaration

[Parameter]
public Action<SunburstDataLabelRenderingEventArgs<TItem>>? DataLabelRendering { get; set; }

Property Value

Type	Description
Action<SunburstDataLabelRenderingEventArgs<TItem>>	An Action<T> that receives SunburstDataLabelRenderingEventArgs<TItem> containing information about the data label being rendered.

Remarks

This event allows you to customize the text, style, and visibility of data labels before they are rendered.

You can modify properties such as Text and Font to customize the appearance of the data label.

Set Cancel to true to prevent the data label from being rendered.

Examples

<SfSunburstChart DataLabelRendering="@DataLabelRenderTrigger">
</SfSunburstChart>

@code {
private void DataLabelRenderTrigger(SunburstDataLabelRenderingEventArgs<Emp> args)
{
args.Text = "Custom Label";
args.Font.Color = "#424242";
}
}

DataSource

Gets or sets the collection of data items used to populate the Sunburst chart.

Declaration

[Parameter]
public IEnumerable<TItem>? DataSource { get; set; }

Property Value

Type	Description
IEnumerable<TItem>	An IEnumerable<T> containing the data items to be visualized. When null, the chart renders a localized loading state instead of throwing. The default value is null.

Remarks

The data source provides the records from which the Sunburst chart hierarchy and segment values are generated.

The hierarchy is described through IdMemberPath, ParentIdMemberPath, LabelMemberPath, and ValueMemberPath; each row in the data source represents a node in the tree.

A null data source renders the loaded-state message and an empty data source renders the no-data message; neither state throws.

Examples

<SfSunburstChart TItem="EmployeeData"
                 DataSource="@EmployeesData"
                 IdMemberPath="Id"
                 ParentIdMemberPath="ParentId"
                 LabelMemberPath="Name"
                 ValueMemberPath="EmployeesCount">
</SfSunburstChart>

@code {
    public List<EmployeeData> EmployeesData { get; set; } = new();
}

DrillDownCompleted

Gets or sets the callback raised after a drill-down operation completes successfully.

Declaration

[Parameter]
public EventCallback<SunburstDrillEventArgs<TItem>> DrillDownCompleted { get; set; }

Property Value

Type	Description
EventCallback<SunburstDrillEventArgs<TItem>>	An EventCallback<TValue> that receives SunburstDrillEventArgs<TItem> providing information about the resulting drill state.

Remarks

This callback is informational only and is not raised when DrillDownStarting is cancelled or when the transition fails for any other reason. The event arguments expose the previous root, resulting root, associated nodes, and drill direction.

Examples

<SfSunburstChart DrillDownStarting="@DrillDownStartingHandler"
                 DrillDownCompleted="@DrillDownCompletedHandler">
</SfSunburstChart>

@code {
private void DrillDownCompletedHandler(SunburstDrillEventArgs<Emp> args)
{
// Custom logic after a drill-down completes.
}
}

DrillDownStarting

Gets or sets the callback that is invoked before a drill-down operation is performed.

Declaration

[Parameter]
public EventCallback<SunburstDrillStartingEventArgs<TItem>> DrillDownStarting { get; set; }

Property Value

Type	Description
EventCallback<SunburstDrillStartingEventArgs<TItem>>	An EventCallback<TValue> that receives SunburstDrillStartingEventArgs<TItem> containing information about the target segment and drill-down operation. The handler can set Cancel to true to prevent the drill-down from proceeding.

Remarks

This event is triggered when a user attempts to drill down into a Sunburst chart segment.

Use this event to inspect the target segment information, perform custom validation, or cancel the drill-down operation before navigation occurs.

Examples

<SfSunburstChart DrillDownStarting="@DrillDownStartingHandler"
                 DrillDownCompleted="@DrillDownCompletedHandler">
</SfSunburstChart>

@code {
private void DrillDownStartingHandler(SunburstDrillStartingEventArgs<Emp> args)
{
// Custom logic for drill-down event.
}
}

DrillUpCompleted

Gets or sets the callback raised after a drill-up operation completes successfully.

Declaration

[Parameter]
public EventCallback<SunburstDrillEventArgs<TItem>> DrillUpCompleted { get; set; }

Property Value

Type	Description
EventCallback<SunburstDrillEventArgs<TItem>>	An EventCallback<TValue> that receives SunburstDrillEventArgs<TItem> providing information about the resulting drill state.

Remarks

This callback is informational only and is not raised when DrillUpStarting is cancelled or when the transition fails for any other reason. The event arguments expose the previous root, resulting root, associated nodes, and drill direction.

Examples

<SfSunburstChart DrillUpStarting="@DrillUpStartingHandler"
                 DrillUpCompleted="@DrillUpCompletedHandler">
</SfSunburstChart>

@code {
private void DrillUpCompletedHandler(SunburstDrillEventArgs<Emp> args)
{
// Custom logic after a drill-up completes.
}
}

DrillUpStarting

Gets or sets the callback that is invoked before a drill-up operation is performed.

Declaration

[Parameter]
public EventCallback<SunburstDrillStartingEventArgs<TItem>> DrillUpStarting { get; set; }

Property Value

Type	Description
EventCallback<SunburstDrillStartingEventArgs<TItem>>	An EventCallback<TValue> that receives SunburstDrillStartingEventArgs<TItem> containing information about the target segment and drill-up operation. The handler can set Cancel to true to prevent the drill-up from proceeding.

Remarks

This event is triggered when a user attempts to navigate to a higher level in the Sunburst chart hierarchy.

Use this event to inspect the target segment information, perform custom validation, or cancel the drill-up operation before navigation occurs.

Examples

<SfSunburstChart DrillUpStarting="@DrillUpStartingHandler"
                 DrillUpCompleted="@DrillUpCompletedHandler">
</SfSunburstChart>

@code {
private void DrillUpStartingHandler(SunburstDrillStartingEventArgs<Emp> args)
{
// Custom logic for drill-up event.
}
}

EnableAnimation

Gets or sets a value indicating whether animation is enabled for the Sunburst chart.

Declaration

[Parameter]
public bool EnableAnimation { get; set; }

Property Value

Type	Description
bool	true to enable animation; otherwise, false. The default value is true.

Remarks

When enabled, animation is applied during the initial rendering of the Sunburst chart during transitions explicitly covered by the animation contract.

Disabling animation can improve rendering performance when working with large data sets or when immediate chart updates are preferred.

Examples

<SfSunburstChart EnableAnimation="true">
</SfSunburstChart>

EnableRTL

Gets or sets whether right-to-left rendering is enabled for the Sunburst chart.

Declaration

[Parameter]
public bool EnableRTL { get; set; }

Property Value

Type	Description
bool	true to render the chart in right-to-left direction; otherwise, false. The default value is false.

Remarks

EnableRTL is the only dedicated right-to-left parameter. An Arabic or other right-to-left culture must not silently override an explicitly supplied EnableRTL value. When enabled, RTL mirrors horizontal legend flow, mirrors breadcrumb flow, applies the appropriate text alignment, reverses the visual direction of Left and Right keyboard navigation, and preserves hierarchy identity, parent-child semantics, angular value calculations, and data order.

EndAngle

Gets or sets the angle, in degrees, at which the Sunburst chart stops rendering its segments.

Declaration

[Parameter]
public double EndAngle { get; set; }

Property Value

Type	Description
double	A double value that specifies the ending angle. The default value is 360.

Remarks

This property defines the end position of the Sunburst chart rendering.

Together with StartAngle, it controls the angular span of the chart. By adjusting these properties, you can render either a full Sunburst chart or a partial chart that occupies only a portion of the available circular area.

For example, setting StartAngle to 0 and EndAngle to 270 renders the chart across three-quarters of a circle.

Examples

<SfSunburstChart StartAngle="0"
EndAngle="270">
</SfSunburstChart>

ExportCompleted

Gets or sets the action invoked once after export succeeds.

Declaration

[Parameter]
public Action<ExportEventArgs> ExportCompleted { get; set; }

Property Value

Type	Description
Action<ExportEventArgs>	An Action<T> of ExportEventArgs invoked synchronously once the export artifact has been produced.

Remarks

Not invoked after cancellation or failure. When ExportAsync(ExportType, string, PdfPageOrientation?, bool, bool) was invoked with allowDownload set to false, the callback exposes the Data URL or Base64 representation of the export.

Exporting

Gets or sets the action invoked before export generation.

Declaration

[Parameter]
public Action<ChartExportEventArgs> Exporting { get; set; }

Property Value

Type	Description
Action<ChartExportEventArgs>	An Action<T> of ChartExportEventArgs invoked synchronously when the ExportAsync(ExportType, string, PdfPageOrientation?, bool, bool) workflow begins. Modify the supplied arguments to customize the export payload, or set Syncfusion.Blazor.Charts.BaseEventArgs.Cancel to true to skip the operation entirely.

Remarks

The shared Charts export pipeline invokes this action synchronously. Set Syncfusion.Blazor.Charts.BaseEventArgs.Cancel to true to stop generation. For visual formats (SVG, PNG, JPEG, PDF) the Width and Height properties of ChartExportEventArgs can be adjusted to override the captured canvas dimensions. For data formats (XLSX, CSV) the Workbook property exposes the Syncfusion.ExcelExport.Workbook that will be written and can be mutated prior to persistence.

FocusBorderColor

Gets or sets the color of the focus border displayed around the Sunburst chart.

Declaration

[Parameter]
public string FocusBorderColor { get; set; }

Property Value

Type	Description
string	A string that specifies the focus border color. The default value is "red".

Remarks

This property controls the color of the visual outline rendered when the chart receives keyboard focus.

The color can be specified using standard CSS color formats, including named colors, hexadecimal values, RGB values, and RGBA values.

Examples

<SfSunburstChart FocusBorderColor="blue">
</SfSunburstChart>

<SfSunburstChart FocusBorderColor="#2196F3">
</SfSunburstChart>

FocusBorderMargin

Gets or sets the margin between the Sunburst chart and its focus border.

Declaration

[Parameter]
public double FocusBorderMargin { get; set; }

Property Value

Type	Description
double	A double value that specifies the focus border margin. The default value is 5.

Remarks

This property determines the distance between the chart boundary and the focus border when the chart receives keyboard focus.

Increasing the margin creates additional spacing around the chart, making the focus indicator more prominent.

Examples

<SfSunburstChart FocusBorderMargin="5">
</SfSunburstChart>

<SfSunburstChart FocusBorderMargin="10">
</SfSunburstChart>

FocusBorderWidth

Gets or sets the width of the focus border displayed around the Sunburst chart.

Declaration

[Parameter]
public double FocusBorderWidth { get; set; }

Property Value

Type	Description
double	A double value that specifies the focus border width. The default value is 2.

Remarks

This property controls the thickness of the focus outline rendered when the chart receives keyboard focus.

A larger value results in a thicker focus border, which can improve visibility for keyboard users.

Examples

<SfSunburstChart FocusBorderWidth="2">
</SfSunburstChart>

<SfSunburstChart FocusBorderWidth="4">
</SfSunburstChart>

Focusable

Gets or sets a value indicating whether the Sunburst chart can receive keyboard focus.

Declaration

[Parameter]
public bool Focusable { get; set; }

Property Value

Type	Description
bool	true if the chart can receive focus; otherwise, false. The default value is true.

Remarks

This property determines whether users can navigate to the chart using keyboard interactions such as the Tab key.

Enabling focus improves accessibility and allows keyboard users to interact with the chart elements.

Examples

<SfSunburstChart Focusable="true">
</SfSunburstChart>

<SfSunburstChart Focusable="false">
</SfSunburstChart>

Height

Gets or sets the height of the Sunburst chart.

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Type	Description
string	A string that specifies the height of the chart. The value can be specified in pixels (for example, "600px") or as a percentage of the parent container (for example, "100%"). The default value is "450px".

Remarks

This property controls the vertical size of the Sunburst chart.

Height values can be specified using CSS-supported units such as pixels or percentages. Percentage values are calculated relative to the height of the chart's parent container.

Examples

<SfSunburstChart Height="600px">
</SfSunburstChart>

ID

Gets or sets the unique identifier of the Sunburst chart.

Declaration

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
string	A string that specifies the unique ID of the Sunburst chart. The default value is null.

Remarks

This property is used to assign a unique HTML id attribute to the Sunburst chart element.

The specified ID can be used to identify the chart in the DOM.

If multiple Sunburst charts are rendered on the same page, each chart should be assigned a unique ID to avoid conflicts.

Examples

<SfSunburstChart ID="salesDistributionChart">
</SfSunburstChart>

<SfSunburstChart ID="revenueAnalysisChart">
</SfSunburstChart>

IdMemberPath

Gets or sets the name of the data field that uniquely identifies each node in the Sunburst chart hierarchy.

Declaration

[Parameter]
public string IdMemberPath { get; set; }

Property Value

Type	Description
string	A string that specifies the data source field whose value uniquely identifies each row. The default value is Empty.

Remarks

This property establishes the stable identity of every node in the DataSource. Each row must expose a value for this field; rows missing an id are assigned an auto-generated identifier.

Identity is based only on the normalized id and never depends on label, source index, depth, value, angle, or DOM position. Comparison is ordinal and case-sensitive; string ids are trimmed before comparison. Duplicate normalized ids invalidate the complete hierarchy and are never merged.

Use this together with ParentIdMemberPath to define the hierarchical relationship between rows. There is no limit on the depth of the hierarchy.

Examples

<SfSunburstChart TItem="EmployeeData"
                 DataSource="@EmployeesData"
                 IdMemberPath="Id"
                 ParentIdMemberPath="ParentId"
                 LabelMemberPath="Name"
                 ValueMemberPath="EmployeesCount">
</SfSunburstChart>

@code {
    public List<EmployeeData> EmployeesData { get; set; } = new();
}

InnerRadius

Gets or sets the ratio of the inner radius relative to the overall radius of the Sunburst chart.

Declaration

[Parameter]
public double InnerRadius { get; set; }

Property Value

Type	Description
double	A double value that specifies the inner radius ratio. The default value is 0.2.

Remarks

This property controls the size of the hollow area at the center of the Sunburst chart.

A value of 0 renders the chart without a center hole, while values greater than 0 create a donut-like appearance. Increasing the value enlarges the inner empty space and reduces the available area for rendering segments.

The inner radius works together with Radius to determine the visual appearance and thickness of the Sunburst rings.

Examples

<SfSunburstChart InnerRadius="0.2">
</SfSunburstChart>

LabelMemberPath

Gets or sets the name of the data field whose value is used as the displayable label of each node in the Sunburst chart.

Declaration

[Parameter]
public string LabelMemberPath { get; set; }

Property Value

Type	Description
string	A string that specifies the data source field whose value provides the display text for a node. The default value is Empty.

Remarks

This property determines the text shown on segments, data labels, legends, breadcrumbs, and tooltip content. Each row's value for this field is used as the node's display label; rows missing this value fall back to the node's id.

Null or empty labels are tolerated and never throw; the label is composed from the resolved hierarchy path for accessibility descriptions.

Examples

<SfSunburstChart TItem="EmployeeData"
                 DataSource="@EmployeesData"
                 IdMemberPath="Id"
                 ParentIdMemberPath="ParentId"
                 LabelMemberPath="Name"
                 ValueMemberPath="EmployeesCount">
</SfSunburstChart>

@code {
    public List<EmployeeData> EmployeesData { get; set; } = new();
}

LegendItemRendering

Gets or sets the action that is invoked before a legend item is rendered.

Declaration

[Parameter]
public Action<SunburstLegendItemRenderingEventArgs<TItem>>? LegendItemRendering { get; set; }

Property Value

Type	Description
Action<SunburstLegendItemRenderingEventArgs<TItem>>	An Action<T> that receives SunburstLegendItemRenderingEventArgs<TItem> containing information about the legend item being rendered.

Remarks

This event allows you to customize legend item properties such as text, text color, shape color, and visibility before the legend item is displayed.

Set Cancel to true to prevent the legend item from being rendered.

Examples

<SfSunburstChart LegendItemRendering="@LegendItemRenderTrigger">
</SfSunburstChart>

@code {
private void LegendItemRenderTrigger(SunburstLegendItemRenderingEventArgs<Emp> args)
{
args.Text = "Custom Legend";
args.ShapeColor = "orange";
}
}

Loaded

Gets or sets the callback that is invoked after the Sunburst chart has been loaded and rendered.

Declaration

[Parameter]
public EventCallback<SunburstLoadedEventArgs> Loaded { get; set; }

Property Value

Type	Description
EventCallback<SunburstLoadedEventArgs>	An EventCallback<TValue> that receives SunburstLoadedEventArgs when the chart loading process has completed.

Remarks

This event is triggered after the chart initialization and rendering processes have completed.

Examples

<SfSunburstChart Loaded="@LoadedHandler">
</SfSunburstChart>

@code {
private void LoadedHandler(SunburstLoadedEventArgs args)
{
// Custom logic for chart loaded event.
}
}

OnLegendClick

Gets or sets the callback that is invoked when a legend item is clicked.

Declaration

[Parameter]
public EventCallback<SunburstLegendClickEventArgs<TItem>> OnLegendClick { get; set; }

Property Value

Type	Description
EventCallback<SunburstLegendClickEventArgs<TItem>>	An EventCallback<TValue> that receives SunburstLegendClickEventArgs<TItem> containing information about the clicked legend item.

Remarks

This event is triggered when a user clicks a legend item. It may expose cancellation because cancellation prevents the represented branch visibility change.

Use this event to perform custom actions in response to legend item interactions, such as updating external UI elements, displaying additional information, or synchronizing chart state.

Examples

<SfSunburstChart OnLegendClick="@LegendItemClickHandler">
</SfSunburstChart>

@code {
private void LegendItemClickHandler(SunburstLegendClickEventArgs<Emp> args)
{
// Custom logic for legend item click event.
}
}

OnPointClick

Gets or sets the callback that is invoked when a Sunburst chart segment is clicked.

Declaration

[Parameter]
public EventCallback<SunburstPointClickEventArgs<TItem>> OnPointClick { get; set; }

Property Value

Type	Description
EventCallback<SunburstPointClickEventArgs<TItem>>	An EventCallback<TValue> that receives SunburstPointClickEventArgs<TItem> containing information about the clicked segment.

Remarks

This event is triggered when a user clicks a Sunburst chart segment. It is observational and does not expose cancellation.

Use this event to access information about the selected data point and perform custom actions based on user interaction.

Examples

<SfSunburstChart OnPointClick="@PointClickHandler">
</SfSunburstChart>

@code {
private void PointClickHandler(SunburstPointClickEventArgs<Emp> args)
{
// Custom logic for point click event.
}
}

Palette

Gets or sets the collection of colors used to render the Sunburst chart segments.

Declaration

[Parameter]
public string[] Palette { get; set; }

Property Value

Type	Description
string[]	An array of color values used to render the Sunburst chart segments. The default value is null.

Remarks

This property allows you to customize the color palette used for the Sunburst chart segments.

The specified colors are applied sequentially to the segments. When the number of segments exceeds the number of colors in the palette, the colors are reused from the beginning of the collection.

The palette colors override the default colors provided by the selected Theme.

Examples

<SfSunburstChart Palette="@(new string[]
{
"#4472C4",
"#ED7D31",
"#A5A5A5",
"#FFC000"
})">
</SfSunburstChart>

ParentIdMemberPath

Gets or sets the name of the data field that references a node's parent identifier in the Sunburst chart hierarchy.

Declaration

[Parameter]
public string ParentIdMemberPath { get; set; }

Property Value

Type	Description
string	A string that specifies the data source field whose value references the IdMemberPath of the parent row. The default value is Empty.

Remarks

This property establishes the parent-child relationship between rows. Each row's value for this field must resolve to the id of exactly one existing node.

Null, empty, or whitespace parent ids identify source roots — those rows are attached to a hidden synthetic root at the center of the chart. Self-referencing rows (where the value equals the node's own id) and cycles are tolerated: offending nodes fall back to the synthetic root instead of throwing.

Use this together with IdMemberPath to define the hierarchical relationship between rows. Multiple source roots are supported and are attached to the synthetic root.

Examples

<SfSunburstChart TItem="EmployeeData"
                 DataSource="@EmployeesData"
                 IdMemberPath="Id"
                 ParentIdMemberPath="ParentId"
                 LabelMemberPath="Name"
                 ValueMemberPath="EmployeesCount">
</SfSunburstChart>

@code {
    public List<EmployeeData> EmployeesData { get; set; } = new();
}

PrintCompleted

Gets or sets the action invoked after the browser print workflow is requested successfully.

Declaration

[Parameter]
public Action PrintCompleted { get; set; }

Property Value

Type	Description
Action	An Action invoked synchronously once the print workflow initiated by PrintAsync() has been submitted to the browser.

Remarks

Browser-dialog cancellation is not reported as an error.

Radius

Gets or sets the ratio of the outer radius relative to the available rendering area of the Sunburst chart.

Declaration

[Parameter]
public double Radius { get; set; }

Property Value

Type	Description
double	A double value between 0 and 1 that specifies the outer radius ratio. The default value is 1.

Remarks

This property controls the overall size of the Sunburst chart within its available rendering area.

Larger values increase the chart size by utilizing more of the available space, while smaller values reduce the chart size, leaving additional padding around the chart.

The outer radius works together with InnerRadius to determine the visual appearance and thickness of the Sunburst rings.

Examples

<SfSunburstChart Radius="0.9">
</SfSunburstChart>

SegmentRendering

Gets or sets the action that is invoked before a Sunburst chart segment is rendered.

Declaration

[Parameter]
public Action<SunburstSegmentRenderingEventArgs<TItem>>? SegmentRendering { get; set; }

Property Value

Type	Description
Action<SunburstSegmentRenderingEventArgs<TItem>>	An Action<T> that receives SunburstSegmentRenderingEventArgs<TItem> containing information about the segment being rendered.

Remarks

This event allows you to customize the appearance of a segment before it is rendered.

You can modify the segment color through the Color property based on information such as the segment level or root label.

Set Cancel to true to prevent the segment from being rendered.

Examples

<SfSunburstChart SegmentRendering="@SegmentRenderTrigger">
</SfSunburstChart>

@code {
private void SegmentRenderTrigger(SunburstSegmentRenderingEventArgs<Emp> args)
{
if (args.LevelIndex == 0)
{
args.Color = "orange";
}
}
}

SelectionChanged

Gets or sets the callback that is invoked after the committed selection state of the Sunburst chart changes.

Declaration

[Parameter]
public EventCallback<SunburstSelectionChangedEventArgs<TItem>> SelectionChanged { get; set; }

Property Value

Type	Description
EventCallback<SunburstSelectionChangedEventArgs<TItem>>	An EventCallback<TValue> that receives SunburstSelectionChangedEventArgs<TItem> describing the committed selection state.

Remarks

SelectionChanged reports committed selection changes only; it is not cancellable. It is raised after OnPointClick when selection is enabled and the committed selection differs from the previous state.

Examples

<SfSunburstChart SelectionChanged="@SelectionChangedHandler">
</SfSunburstChart>

@code {
private void SelectionChangedHandler(SunburstSelectionChangedEventArgs<Emp> args)
{
// Custom logic for selection change.
}
}

StartAngle

Gets or sets the angle, in degrees, from which the Sunburst chart begins rendering its segments.

Declaration

[Parameter]
public double StartAngle { get; set; }

Property Value

Type	Description
double	A double value that specifies the starting angle. The default value is 0.

Remarks

This property controls the rotational position of the Sunburst chart.

The first segment is rendered starting from the specified angle, and the remaining segments are arranged clockwise around the chart.

Angle values are measured in degrees, where 0 corresponds to the 12 o'clock position. Changing the start angle rotates the entire chart without affecting the underlying data or hierarchy.

Examples

<SfSunburstChart StartAngle="90">
</SfSunburstChart>

Subtitle

Gets or sets the subtitle text displayed for the Sunburst chart.

Declaration

[Parameter]
public string Subtitle { get; set; }

Property Value

Type	Description
string	A string that specifies the subtitle of the Sunburst chart. The default value is Empty.

Remarks

The subtitle provides additional information about the Sunburst chart and can be used to supplement the title with context such as a reporting period, data source, or other relevant details.

Use this property together with Title to provide a more descriptive heading for the chart.

Examples

<SfSunburstChart Title="Sales Distribution by Region" Subtitle="Fiscal Year 2026">
</SfSunburstChart>

Theme

Gets or sets the visual theme applied to the Sunburst chart.

Declaration

[Parameter]
public Theme Theme { get; set; }

Property Value

Type	Description
Theme	A Theme value that specifies the appearance of the Sunburst chart. The default value is Material.

Remarks

The theme determines the overall look and feel of the Sunburst chart, including colors, fonts, backgrounds, borders, tooltips, legends, and other visual elements.

Use this property to ensure that the chart appearance is consistent with the visual design of your application.

Changing the theme automatically updates the styling of the chart and its associated UI elements according to the selected Syncfusion theme.

Examples

<SfSunburstChart Theme="Theme.Material">
</SfSunburstChart>

<SfSunburstChart Theme="Theme.Fluent2">
</SfSunburstChart>

Title

Gets or sets the title text displayed for the Sunburst chart.

Declaration

[Parameter]
public string Title { get; set; }

Property Value

Type	Description
string	A string that specifies the title of the Sunburst chart. The default value is Empty.

Remarks

The title provides a descriptive heading for the Sunburst chart and helps users understand the data being presented.

Use this property to provide context, summarize the displayed data, or identify the purpose of the chart.

Examples

<SfSunburstChart Title="Sales Distribution by Region">
</SfSunburstChart>

TooltipRendering

Gets or sets the action that is invoked before a tooltip is rendered.

Declaration

[Parameter]
public Action<SunburstTooltipRenderingEventArgs<TItem>>? TooltipRendering { get; set; }

Property Value

Type	Description
Action<SunburstTooltipRenderingEventArgs<TItem>>	An Action<T> that receives SunburstTooltipRenderingEventArgs<TItem> containing information about the tooltip being displayed.

Remarks

This event allows you to customize tooltip content, appearance, and formatting before the tooltip is rendered.

You can modify properties such as Text, HeaderText, Fill, Opacity, Point and Font.

Set Cancel to true to prevent the tooltip from being displayed.

Examples

<SfSunburstChart TooltipRendering="@TooltipRenderTrigger">
</SfSunburstChart>

@code {
private void TooltipRenderTrigger(SunburstTooltipRenderingEventArgs<Emp> args)
{
args.HeaderText = "Employee";
args.Text = $"{args.Point.Label}: {args.Point.Value}";
args.Fill = "#424242";
}
}

ValueMemberPath

Gets or sets the name of the data field that provides the value for each Sunburst chart segment.

Declaration

[Parameter]
public string ValueMemberPath { get; set; }

Property Value

Type	Description
string	A string that specifies the data source field used to determine the size of each segment. The default value is Empty.

Remarks

The specified field must contain numeric values. These values are used to calculate the relative size of each segment within the Sunburst chart.

The larger the value, the larger the corresponding segment appears in the chart. This property works together with DataSource, IdMemberPath, ParentIdMemberPath, LabelMemberPath, and ValueMemberPath to visualize parent/child hierarchical data.

Examples

<SfSunburstChart TItem="EmployeeData" DataSource="@EmployeesData"
                 IdMemberPath="Id"
                 ParentIdMemberPath="ParentId"
                 LabelMemberPath="Name"
                 ValueMemberPath="EmployeesCount">
</SfSunburstChart>

@code {
    public List<EmployeeData> EmployeesData { get; set; } = new();
}

Width

Gets or sets the width of the Sunburst chart.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Type	Description
string	A string that specifies the width of the chart. The value can be specified in pixels (for example, "800px") or as a percentage of the parent container (for example, "100%"). The default value is "100%".

Remarks

This property controls the horizontal size of the Sunburst chart.

Width values can be specified using CSS-supported units such as pixels or percentages. Percentage values are calculated relative to the width of the chart's parent container.

Examples

<SfSunburstChart Width="800px">
</SfSunburstChart>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

ExportAsync(ExportType, string, PdfPageOrientation?, bool, bool)

Exports the currently rendered Sunburst Chart or its generated hierarchical data to the specified file format.

Declaration

public Task<string?> ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true, bool isBase64 = false)

Parameters

Type	Name	Description
ExportType	type	Specifies the export format. Supported visual formats are SVG, PNG, JPEG, and PDF. Supported hierarchical data formats are XLSX and CSV.
string	fileName	Specifies the name of the exported file without requiring a file extension. The component appends the extension associated with the selected export format.
PdfPageOrientation?	orientation	Specifies the page orientation for PDF export. This value is ignored for non-PDF formats.
bool	allowDownload	Specifies whether the generated output is downloaded by the browser. The default value is true. When set to false, the generated output is returned without starting a browser download.
bool	isBase64	Specifies whether the returned output is represented as Base64 content. This parameter applies when allowDownload is false. When set to false, a Data URL is returned.

Returns

Type	Description
Task<string>	A task that represents the asynchronous export operation. When allowDownload is false, the task returns the generated Data URL or Base64 content. Otherwise, it returns null after initiating the browser download.

Remarks

Visual export preserves the latest stable chart state, including the current drill root, visible hierarchy, hidden legend branches, angular range, title, subtitle, labels, legend, breadcrumbs, theme, palette, localization, and right-to-left layout. Tooltip, hover, focus, loading, and intermediate animation states are excluded.

XLSX and CSV exports produce a deterministic, parent-first flattened representation of the generated hierarchy. The synthetic hidden root used to anchor top-level nodes is omitted; only the rows contributed by user data are written. Export waits for pending data processing, layout, rendering, and animation to complete. Calling this method does not modify the live chart state.

PrintAsync()

Prints the currently rendered Sunburst Chart using the browser print workflow.

Declaration

public Task PrintAsync()

Returns

Type	Description
Task	A task that represents the asynchronous print operation.

Remarks

The print output preserves the current drill root, visible hierarchy, legend visibility, title, subtitle, data labels, breadcrumbs, theme, palette, localization, and right-to-left layout. Transient elements such as tooltips, hover highlighting, keyboard-focus indicators, loading animations, and diagnostic overlays are excluded. The operation waits for pending data processing, layout, rendering, and animation to reach the latest stable state. Calling this method does not modify the chart's data source, hierarchy, drill state, selection, legend visibility, or focus state. The PrintCompleted callback is invoked once the print workflow has been submitted to the browser.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IAsyncDisposable