Syncfusion AI Assistant

How can I help you?

Drill Down in .NET MAUI Sunburst Chart

5 Sep 20254 minutes to read

Drill Down provides better visualization of hierarchical data. Large datasets can be visualized as simplified views. Each segment level can be drilled down into. The Sunburst Chart provides animation along with the drill-down support. Double-tapping a segment initiates the drill-down operation. A toolbar is enabled during drill-down, allowing zoom-back and reset operations.

Enable Drill Down

To enable this feature, set the EnableDrillDown property to true in SfSunburstChart. By default, EnableDrillDown is set to false.

<sunburst:SfSunburstChart EnableDrillDown="True" >
    . . .
</sunburst:SfSunburstChart>
SfSunburstChart sunburst = new SfSunburstChart();
sunburst.EnableDrillDown = true;
. . .
this.Content = sunburst;

Drill Down in MAUI Sunburst Chart.

Toolbar Alignment

The vertical and the horizontal alignments of the toolbar can be customized using the VerticalAlignment and HorizontalAlignment properties, respectively.

Both alignment properties have the following enum types:

  • Start: Aligns the toolbar to the top (vertical) or left (horizontal) of the chart plot area.
  • Center: Aligns the toolbar to the center of the chart plot area.
  • End: Aligns the toolbar to the bottom (vertical) or right (horizontal) of the chart plot area.
<sunburst:SfSunburstChart EnableDrillDown="True">
    . . .
    <chart:SfSunburstChart.ToolbarSettings>
        <chart:SunburstToolbarSettings HorizontalAlignment="End" 
                                       VerticalAlignment="End"/>
    </chart:SfSunburstChart.ToolbarSettings>
</sunburst:SfSunburstChart>
SfSunburstChart sunburst = new SfSunburstChart();
sunburst.EnableDrillDown = true;
. . .
SunburstToolbarSettings toolbarSettings = new SunburstToolbarSettings()
{
    HorizontalAlignment = SunburstToolbarAlignment.End,
    VerticalAlignment = SunburstToolbarAlignment.End,
};
sunburst.ToolbarSettings = toolbarSettings;
this.Content = sunburst;

Drill Down Toolbar Alignment.

Toolbar Positioning

The toolbar’s position within the Sunburst Chart can be adjusted both horizontally and vertically using the OffsetX and OffsetY properties of the SunburstToolbarSettings class.

<sunburst:SfSunburstChart EnableDrillDown="True">
    . . .
    <chart:SfSunburstChart.ToolbarSettings >
        <chart:SunburstToolbarSettings OffsetX="-50" OffsetY="200"/>
    </chart:SfSunburstChart.ToolbarSettings>
</sunburst:SfSunburstChart>
SfSunburstChart sunburst = new SfSunburstChart();
sunburst.EnableDrillDown = true;
. . .
SunburstToolbarSettings toolbarSettings = new SunburstToolbarSettings()
{
    OffsetX = -50,
    OffsetY = 200,
};
sunburst.ToolbarSettings = toolbarSettings;
this.Content = sunburst;

Drill Down Toolbar Positioning.

Toolbar Customization

The appearance of the drill-down toolbar in the Sunburst Chart can be customized using the following properties

  • IconBrush: Gets or sets the brush used to style the icons within the drill-down toolbar.
  • Background: Gets or sets the background brush of the drill-down toolbar.
<sunburst:SfSunburstChart EnableDrillDown="True">
    . . .
    <chart:SfSunburstChart.ToolbarSettings>
        <chart:SunburstToolbarSettings IconBrush="White" Background="#2989F9"/>
    </chart:SfSunburstChart.ToolbarSettings>
</sunburst:SfSunburstChart>
SfSunburstChart sunburst = new SfSunburstChart();
sunburst.EnableDrillDown = true;
. . .
SunburstToolbarSettings toolbarSettings = new SunburstToolbarSettings()
{
    IconBrush = Colors.White,
    Background = new SolidColorBrush(Color.FromArgb("#2989F9")),
};
sunburst.ToolbarSettings = toolbarSettings;
this.Content = sunburst;

Drill Down Toolbar Customization.