Drill Down in Xamarin Sunburst Chart (SfSunburstChart)

8 Jan 20253 minutes to read

The drill-down provides better visualization of hierarchy. Large set of data can be virtualized into minimal views. Each level of the segments can be drilled down. The sunburst chart provides animation along with the drill-down support. Toolbar will be enabled on drill-down that helps in performing zoom back and reset operations. The drill-down can be enabled or disabled using the Enable property in the drill-down settings.

IMPORTANT

Double tapping the segment performs the drill-down operation.

The following code shows enabling the DrilldownSettings.

XAML

<sunburst:SfSunburstChart.DrilldownSettings>
      <sunburst:DrilldownSettings Enable="True"></sunburst:DrilldownSettings>
  </sunburst:SfSunburstChart.DrilldownSettings>

C#

DrilldownSettings drilldownSettings = new DrilldownSettings();
  drilldownSettings.Enable = true;
  sunburstChart.DrilldownSettings = drilldownSettings;

Positioning Toolbar

Toolbar can be positioned anywhere on the chart by specifying the OffsetX and OffsetY values. The offset values range from 0 to 1.

XAML

<sunburst:SfSunburstChart.DrilldownSettings>
         <sunburst:DrilldownSettings OffsetX="0.5" OffsetY="0" 
                 Enable="True"></sunburst:DrilldownSettings>
  </sunburst:SfSunburstChart.DrilldownSettings>

C#

DrilldownSettings drilldownSettings = new DrilldownSettings();
  drilldownSettings.Enable = true;
  drilldownSettings.OffsetX = 0.5;
  drilldownSettings.OffsetY = 0;
  sunburstChart.DrilldownSettings = drilldownSettings;

Toolbar alignment

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

Both the alignment properties has the following enum types:

• Center: Toolbar takes the specified offset value as the center of the toolbar and get positioned.
• End: Toolbar takes the specified offset value as the start of the toolbar and get positioned.
• Start: Toolbar takes the specified offset value as the end of the toolbar and get positioned.

The following code shows the toolbar alignment.

XAML

<sunburst:SfSunburstChart.DrilldownSettings>
         <sunburst:DrilldownSettings OffsetX="0.5" OffsetY="0.5" Enable="True" 
                    ToolbarHorizontalAlignment="Center"
                    ToolbarVerticalAlignment="Center">
         </sunburst:DrilldownSettings>
  </sunburst:SfSunburstChart.DrilldownSettings>

C#

DrilldownSettings drilldownSettings = new DrilldownSettings();
  drilldownSettings.Enable = true;
  drilldownSettings.OffsetX = 0.5;
  drilldownSettings.OffsetY = 0.5;
  drilldownSettings.ToolbarHorizontalAlignment = ToolbarAlignment.Center;
  drilldownSettings.ToolbarVerticalAlignment = ToolbarAlignment.Center;
  sunburstChart.DrilldownSettings = drilldownSettings;