Blazor Sunburst Chart Highlight and Selection Example

This Blazor Sunburst Chart example visualizes Customer Effort Score Distribution (in Percent of Customer Journeys) across touchpoint tiers (First, Second, Third, Fourth, Fifth) categorized by engagement channels and interaction types.

In this example, you can see how to configure selection and highlight behaviors in a sunburst chart with an asymmetric multi-tier radial hierarchy. By default, both selection and highlight are disabled. Use the property panel to enable selection or highlight, then choose the desired mode to explore hierarchical relationships. Key features demonstrated here include:

• SunburstSelectionSettings with Enable toggleable from the property panel to allow clicking and selecting a segment
• Mode options such as Child, Parent, Single, and All to control selection scope
• SunburstHighlightSettings with Enable toggleable to visually emphasize a segment on hover
• Asymmetric depth levels ranging from 2 up to 4 rings producing an uneven sunburst flare silhouette
• SunburstDataLabelSettings with LabelRotationMode set to Angle and LabelOverflowMode set to Trim for readable curved labels
• A custom Palette aligned to the active theme to color the rings consistently

Tooltip is enabled in this example. To see tooltip details, hover over or tap on a segment. Enable selection and highlight from the property panel to interact with the chart.

More information about the sunburst chart selection and highlight can be found in this documentation section.