Labels in Blazor TreeMap component
Data labels are used to identify the name of items or groups in the TreeMap component. Data labels will be shown by specifying the data source properties in LabelPath.
The following options are available to customize the labels in the TreeMap component.
Formatting labels
Customize the labels for each item using the LabelFormat property in TreeMapLeafItemSettings.
The label format is shown in the following code example.
@using Syncfusion.Blazor.TreeMap
<SfTreeMap WeightValuePath="Count" TValue="Car" DataSource="Cars" RangeColorValuePath="Count">
<TreeMapLeafItemSettings LabelPath="Name" LabelFormat="${Name}-${Brand}"></TreeMapLeafItemSettings>
</SfTreeMap>
@code {
public class Car
{
public string Name { get; set; }
public string Brand { get; set; }
public int Count { get; set; }
};
public List<Car> Cars = new List<Car> {
new Car { Name="Mustang", Brand="Ford", Count=232 },
new Car { Name="EcoSport", Brand="Ford", Count=121 },
new Car { Name="Swift", Brand="Maruti", Count=143 },
new Car { Name="Baleno", Brand="Maruti", Count=454 },
new Car { Name="Vitara Brezza", Brand="Maruti", Count=545 },
new Car { Name="A3 Cabriolet", Brand="Audi",Count=123 },
new Car { Name="RS7 Sportback", Brand="Audi", Count=523 }
};
}
Label position
Customize the labels position using the LabelPosition property by specifying the any of the following locations.
The labels positioning is shown in the following code example.
<SfTreeMap WeightValuePath="Count" TValue="Car" DataSource="Cars" RangeColorValuePath="Count">
<TreeMapLeafItemSettings LabelPath="Name" LabelFormat="${Name}-${Brand}" LabelPosition="LabelPosition.Center" Gap="2"></TreeMapLeafItemSettings>
</SfTreeMap>Refer code block to know the property value of Cars.
Intersect action
When the label size in each item exceeds the actual size, use the InterSectAction property in TreeMapLeafItemSettings to customise the labels.
The intersect action concepts are illustrated in the following code example.
@using Syncfusion.Blazor.TreeMap
<SfTreeMap WeightValuePath="Count" TValue="Car" DataSource="Cars">
<TreeMapLeafItemSettings LabelPath="Name" LabelFormat="${Name}-${Brand}" InterSectAction="LabelAlignment.WrapByWord">
</TreeMapLeafItemSettings>
</SfTreeMap>
@code{
public class Car
{
public string Name { get; set; }
public string Brand { get;set; }
public int Count { get; set; }
};
public List<Car> Cars = new List<Car> {
new Car { Name="Mustang", Brand="Ford Motor Company", Count=232 },
new Car { Name="Lincoln Continental Mark V", Brand="Ford Motor Company", Count=50},
new Car { Name="EcoSport", Brand="Ford Motor Company", Count=121 },
new Car { Name="Swift", Brand="Maruti", Count=143 },
new Car { Name="Baleno", Brand="Maruti", Count=454 },
new Car { Name="Vitara Brezza", Brand="Maruti", Count=545 },
new Car { Name="A3 Cabriolet", Brand="Audi",Count=123 },
new Car { Name="RS7 Sportback", Brand="Audi", Count=523 }
};
}
