TreeMap Elements in Xamarin TreeMap (SfTreeMap)

18 May 20218 minutes to read

The TreeMap contains the following elements:

  • Legends
  • Headers
  • Labels

Legend

You can set the color value of leaf nodes using the LegendSettings property. This legend is appropriate only for the tree map whose leaf nodes are colored using RangeColorMapping.

The visibility of legend can be enabled by setting the ShowLegend property to true.

TreeMap legends

You can set the size of legend icons by setting the IconSize property of LegendSettings in TreeMap.

Labels for legends

You can customize the labels of the legend items using the LegendLabel property of RangeColorMapping.

<treemap:SfTreeMap.LegendSettings>
                <treemap:LegendSettings ShowLegend="True"  Size="700,45">
                    <treemap:LegendSettings.LabelStyle>
                        <treemap:Style Color="Black"></treemap:Style>
                    </treemap:LegendSettings.LabelStyle>
                </treemap:LegendSettings>
            </treemap:SfTreeMap.LegendSettings>
LegendSettings legendSettings = new LegendSettings();
            legendSettings.ShowLegend = true;
            legendSettings.Size = new Size(700, 45);
            legendSettings.LabelStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
            treeMap.LegendSettings = legendSettings;

Treemap legend

You can set headers for each level by setting the ShowHeader property of each TreeMap level. The HeaderHeight property helps you set the height of header, and the GroupPath value determines the header value.

<treemap:SfTreeMap.Levels>
                <treemap:TreeMapFlatLevel  HeaderHeight="20" GroupPath = "Continent" GroupGap =" 5" ShowHeader = "true">
                    <treemap:TreeMapFlatLevel.HeaderStyle>
                        <treemap:Style Color= "Black"/>
                    </treemap:TreeMapFlatLevel.HeaderStyle>
                </treemap:TreeMapFlatLevel>
            </treemap:SfTreeMap.Levels>
TreeMapFlatLevel flatLevel = new TreeMapFlatLevel();
            flatLevel.HeaderHeight = 20;
            flatLevel.GroupPath = "Continent";
            flatLevel.GroupGap = 5;
            flatLevel.ShowHeader = true;
            flatLevel.HeaderStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
            treeMap.Levels.Add(flatLevel);

Treemap header

Data labels

The ShowLabels property is used to enable or disable the labels in leaf nodes. The LabelPath property allows you to set values to labels.

<treeMap:SfTreeMap.LeafItemSettings>
                <treeMap:LeafItemSettings  LabelPath="Country" ShowLabels="True">
                </treeMap:LeafItemSettings>
            </treeMap:SfTreeMap.LeafItemSettings>
treeMap.LeafItemSettings.ShowLabels = true;
            treeMap.LeafItemSettings.LabelPath = "Country";

Providing Visibility for data labels in Xamarin.Forms TreeMap

Avoid overlap in data labels

The OverflowMode property aligns data labels within leaf node boundaries using the Trim, Wrap, and Hide options. The default value of the OverflowMode property is Trim.

Trim

You can trim the data labels inside the leaf node boundaries using the Trim option.

<treeMap:SfTreeMap.LeafItemSettings>
                <treeMap:LeafItemSettings  LabelPath="Country" OverFlowMode="Trim">
                </treeMap:LeafItemSettings>
            </treeMap:SfTreeMap.LeafItemSettings>
treeMap.LeafItemSettings.OverFlowMode = LabelOverflowMode.Trim;

Data label trim support in Xamarin.Forms TreeMap

Wrap

You can wrap the data labels inside the leaf node boundaries using the Wrap option.

<treeMap:SfTreeMap.LeafItemSettings>
                <treeMap:LeafItemSettings  LabelPath="Country" OverFlowMode="Wrap">
                </treeMap:LeafItemSettings>
            </treeMap:SfTreeMap.LeafItemSettings>
treeMap.LeafItemSettings.OverFlowMode = LabelOverflowMode.Wrap;

Data label wrap support in Xamarin.Forms TreeMap

Hide

You can hide the data labels inside the leaf node boundaries using the Hide option.

<treeMap:SfTreeMap.LeafItemSettings>
                <treeMap:LeafItemSettings  LabelPath="Country" OverFlowMode="Hide">
                </treeMap:LeafItemSettings>
            </treeMap:SfTreeMap.LeafItemSettings>
treeMap.LeafItemSettings.OverFlowMode = LabelOverflowMode.Hide;

Data label hide support in Xamarin.Forms TreeMap

Customize data labels

You can customize the data labels using the LabelStyle property of LeafItemSettings. The font color, font size, font attribute, and font family can be customized using the Color, FontSize, FontAttributes, and FontFamily properties.

<treeMap:SfTreeMap.LeafItemSettings>
                <treeMap:LeafItemSettings  LabelPath="Country" OverFlowMode="Trim">
                    <treeMap:LeafItemSettings.LabelStyle>
                        <treeMap:Style Color="Blue" FontSize="15" FontAttributes="Bold">
                            <treeMap:Style.FontFamily>
                                <OnPlatform x:TypeArguments="x:String" iOS="Chalkduster" Android="cursive" WinPhone="Chiller" />
                            </treeMap:Style.FontFamily>
                        </treeMap:Style>
                    </treeMap:LeafItemSettings.LabelStyle>
                </treeMap:LeafItemSettings>
            </treeMap:SfTreeMap.LeafItemSettings>
treeMap.LeafItemSettings.LabelStyle.FontSize = 15;
            treeMap.LeafItemSettings.LabelStyle.FontAttributes = FontAttributes.Bold;
            treeMap.LeafItemSettings.LabelStyle.FontFamily = Device.RuntimePlatform == Device.iOS ? "Chalkduster" : Device.RuntimePlatform == Device.Android ? "cursive" : "Chiller";
            treeMap.LeafItemSettings.LabelStyle.Color = Color.Blue;

Customizing the data labels support in Xamain.Forms TreeMap