Skip to content

Commit fec7386

Browse files
vasavi-SF4854vasavi-SF4854
committed
Merge branch 'development' of https://github.com/syncfusion-content/maui-docs into Add-selectionmodes-in-maui-toolbar
2 parents 9bcfabc + f6e02d5 commit fec7386

File tree

4 files changed

+424
-1
lines changed

4 files changed

+424
-1
lines changed

‎MAUI/Release-notes/v30.1.37.md‎

Whitespace-only changes.

‎MAUI/SunburstChart/DrillDown.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
layout: post
3+
title: Drill Down in .NET MAUI Sunburst Chart control | Syncfusion
4+
description: This section explains how to enable and customize drill-down toolbar in the Syncfusion<sup>®</sup> .NET MAUI Sunburst Chart control.
5+
platform: maui
6+
control: SfSunburstChart
7+
documentation: ug
8+
---
9+
10+
# Drill Down in .NET MAUI Sunburst Chart
11+
12+
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. Double tapping the segment performs the drill-down operation. Toolbar will be enabled on drill-down that helps in performing zoom back and reset operations.
13+
14+
To enable this feature, set the `EnableDrillDown` property to true in [SfSunburstChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html). By default, `EnableDrillDown` is set to false.
15+
16+
{% tabs %}
17+
18+
{% highlight xaml %}
19+
20+
<sunburst:SfSunburstChart EnableDrillDown="True" >
21+
. . .
22+
</sunburst:SfSunburstChart>
23+
24+
{% endhighlight %}
25+
26+
{% highlight c# %}
27+
28+
SfSunburstChart sunburst = new SfSunburstChart();
29+
sunburst.EnableDrillDown = true;
30+
. . .
31+
this.Content = sunburst;
32+
33+
{% endhighlight %}
34+
35+
{% endtabs %}
36+
37+
## Toolbar Alignment
38+
39+
The vertical and the horizontal alignments of the toolbar can be customized using the `VerticalAlignment` and `HorizontalAlignment` properties, respectively.
40+
41+
Both the alignment properties has the following enum types:
42+
43+
* Start: Aligns the toolbar to the top (for vertical) or left (for horizontal) of the chart plot area.
44+
* Center: Aligns the toolbar to the center of the chart plot area, either vertically or horizontally.
45+
* End: Aligns the toolbar to the bottom (for vertical) or right (for horizontal) of the chart plot area.
46+
47+
{% tabs %}
48+
49+
{% highlight xaml %}
50+
51+
<sunburst:SfSunburstChart EnableDrillDown="True">
52+
. . .
53+
<chart:SfSunburstChart.ToolbarSettings>
54+
<chart:SunburstToolbarSettings HorizontalAlignment="Center"
55+
VerticalAlignment="Center"/>
56+
</chart:SfSunburstChart.ToolbarSettings>
57+
</sunburst:SfSunburstChart>
58+
59+
{% endhighlight %}
60+
61+
{% highlight c# %}
62+
63+
SfSunburstChart sunburst = new SfSunburstChart();
64+
sunburst.EnableDrillDown = true;
65+
. . .
66+
SunburstToolbarSettings toolbarSettings = new SunburstToolbarSettings()
67+
{
68+
HorizontalAlignment = SunburstToolbarAlignment.Center,
69+
VerticalAlignment = SunburstToolbarAlignment.Center,
70+
};
71+
sunburst.ToolbarSettings = toolbarSettings;
72+
this.Content = sunburst;
73+
74+
{% endhighlight %}
75+
76+
{% endtabs %}
77+
78+
## Toolbar Positioning
79+
80+
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.
81+
82+
{% tabs %}
83+
84+
{% highlight xaml %}
85+
86+
<sunburst:SfSunburstChart EnableDrillDown="True">
87+
. . .
88+
<chart:SfSunburstChart.ToolbarSettings >
89+
<chart:SunburstToolbarSettings OffsetX="50" OffsetY="100"/>
90+
</chart:SfSunburstChart.ToolbarSettings>
91+
</sunburst:SfSunburstChart>
92+
93+
{% endhighlight %}
94+
95+
{% highlight c# %}
96+
97+
SfSunburstChart sunburst = new SfSunburstChart();
98+
sunburst.EnableDrillDown = true;
99+
. . .
100+
SunburstToolbarSettings toolbarSettings = new SunburstToolbarSettings()
101+
{
102+
OffsetX = 50,
103+
OffsetY = 100,
104+
};
105+
sunburst.ToolbarSettings = toolbarSettings;
106+
this.Content = sunburst;
107+
108+
{% endhighlight %}
109+
110+
{% endtabs %}
111+
112+
## Toolbar Customization
113+
114+
The appearance of the drill-down toolbar in the Sunburst Chart can be customized using the following properties
115+
116+
* `IconBrush`: Gets or sets the brush used to style the icons within the drill-down toolbar.
117+
* `Background`: Gets or sets the background brush of the drill-down toolbar.
118+
119+
{% tabs %}
120+
121+
{% highlight xaml %}
122+
123+
<sunburst:SfSunburstChart EnableDrillDown="True">
124+
. . .
125+
<chart:SfSunburstChart.ToolbarSettings>
126+
<chart:SunburstToolbarSettings IconBrush="White" Background="#2989F9"/>
127+
</chart:SfSunburstChart.ToolbarSettings>
128+
</sunburst:SfSunburstChart>
129+
130+
{% endhighlight %}
131+
132+
{% highlight c# %}
133+
134+
SfSunburstChart sunburst = new SfSunburstChart();
135+
sunburst.EnableDrillDown = true;
136+
. . .
137+
SunburstToolbarSettings toolbarSettings = new SunburstToolbarSettings()
138+
{
139+
IconBrush = Colors.White,
140+
Background = new SolidColorBrush(Color.FromArgb("#2989F9")),
141+
};
142+
sunburst.ToolbarSettings = toolbarSettings;
143+
this.Content = sunburst;
144+
145+
{% endhighlight %}
146+
147+
{% endtabs %}

0 commit comments

Comments
 (0)