Skip to content

983838: Updated the UG content and example changes in the TreeMap control. #6842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 13, 2025
Merged

983838: Updated the UG content and example changes in the TreeMap control. #6842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b701c9b
983838: Updated the UG content and example changes in the TreeMap con…
mohammednowfel4989 Oct 8, 2025
750f3e6
985588: Resolved the font matter error in the PR.
mohammednowfel4989 Oct 13, 2025
2539991
985588: Updated content correction mentioned in the PR.
mohammednowfel4989 Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions blazor/treemap/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Accessibility in Blazor TreeMap Component | Syncfusion
description: Checkout and learn here all about Accessibility in Syncfusion Blazor TreeMap component and much more.
description: Check out and learn here all about Accessibility in Syncfusion Blazor TreeMap component and much more.
platform: Blazor
control: TreeMap
documentation: ug
---

# Accessibility in Blazor TreeMap Component

The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).
The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component adheres to widely adopted accessibility standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles).

The accessibility compliance for the Blazor TreeMap component is outlined below.
The accessibility compliance for the Blazor TreeMap component is summarized below.

| Accessibility Criteria | Compatibility |
| -- | -- |
Expand Down Expand Up @@ -39,28 +39,28 @@ The accessibility compliance for the Blazor TreeMap component is outlined below.

## WAI-ARIA attributes

The Blazor TreeMap component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following `WAI-ARIA` attributes are used in the TreeMap component:
The Blazor TreeMap component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to support accessibility. The following ARIA attributes are used in the TreeMap component:

| Attributes | Purpose |
| --- | --- |
| `role=region` | It specifies the TreeMap areas that do not support interactive functions like selection and highlight. |
| `role=button` | It specifies the TreeMap areas where interactive functions such as selection and highlight are available. |
| `aria-label` | Provides an accessible name for the title, subtitle, data labels, legend title, and legend item labels. |
| `role=region` | Identifies TreeMap areas without interactive behavior such as selection or highlight. |
| `role=button` | Identifies TreeMap areas where interactive behavior such as selection or highlight is available. |
| `aria-label` | Provides accessible names for the title, subtitle, data labels, legend title, and legend item labels. |

## Screen reading in TreeMap

Accessibility in the Blazor TreeMap component ensures that all users, regardless of ability or disability, can use screen reading. The following TreeMap elements will be read aloud using screen reading software, such as Narrator for Windows.
Accessibility support in the Blazor TreeMap component enables screen readers to announce relevant content. The following TreeMap elements are read by screen readers such as Narrator on Windows.

| Elements | Description |
| --- | --- |
| Data labels | Reads the labels displayed on leaf items of the TreeMap. |
| Title | Reads the title in the TreeMap. |
| Subtitle | Reads the title below the main title content in the TreeMap. |
| Legend title | Reads the title of the legend in the TreeMap. |
| Legend item label | Reads the label of the legend item in the TreeMap. |
| Data labels | Announces the labels displayed on leaf items of the TreeMap. |
| Title | Announces the TreeMap title. |
| Subtitle | Announces the subtitle below the main title. |
| Legend title | Announces the legend title in the TreeMap. |
| Legend item label | Announces the label of each legend item in the TreeMap. |

## Ensuring accessibility

The Blazor TreeMap component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
The Blazor TreeMap component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing.

The accessibility compliance of the TreeMap component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treemap) in a new window to evaluate the accessibility of the TreeMap component with accessibility tools.
The accessibility compliance of the TreeMap component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treemap) in a new window to evaluate TreeMap accessibility with testing tools.
80 changes: 48 additions & 32 deletions blazor/treemap/color-mapping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
---
layout: post
title: Color Mapping in Blazor TreeMap Component | Syncfusion
description: Checkout and learn here all about Color Mapping in Syncfusion Blazor TreeMap component and much more.
description: Check out and learn how to configure Color Mapping in the Syncfusion Blazor TreeMap component and much more.
platform: Blazor
control: TreeMap
documentation: ug
---

# Color Mapping in Blazor TreeMap Component

Color mapping is used to customize the color for each group or item based on the specified types. The following options are available to customize the group and leaf items in the TreeMap component.
Color mapping customizes group and leaf item colors based on defined mapping types. The following options allow customizing group and leaf items in the TreeMap component.

## Range color mapping

Range color mapping applies colors to items based on numeric ranges of a specified value, defined by the [RangeColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RangeColorValuePath) property.

```cshtml
@using Syncfusion.Blazor.TreeMap
Expand All @@ -32,25 +33,28 @@ Color mapping is used to customize the color for each group or item based on the
public string FruitName { get; set; }
public double Count { get; set; }
};

public List<Fruit> Fruits = new List<Fruit> {
new Fruit { FruitName="Apple", Count=5000 },
new Fruit { FruitName="Mango", Count=3000 },
new Fruit { FruitName="Orange", Count=2300 },
new Fruit { FruitName="Banana", Count=500 },
new Fruit { FruitName="Grape", Count=4300 },
new Fruit { FruitName="Papaya", Count=1200 },
new Fruit { FruitName="Melon", Count=4500 }
new Fruit { FruitName = "Apple", Count = 5000 },
new Fruit { FruitName = "Mango", Count = 3000 },
new Fruit { FruitName = "Orange", Count = 2300 },
new Fruit { FruitName = "Banana", Count = 500 },
new Fruit { FruitName = "Grape", Count = 4300 },
new Fruit { FruitName = "Papaya", Count = 1200 },
new Fruit { FruitName = "Melon", Count = 4500 }
};
}

```

![Blazor TreeMap with Color Mapping](images/Colormapping/blazor-treemap-color-mapping.png)

## Equal color mapping

Equal color mapping is used to fill colors to each item by specifying equal value present in the data source, that can be specified in the [EqualColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EqualColorValuePath) property.
Equal color mapping fills items with colors by matching equal values from the data source, specified by the [EqualColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EqualColorValuePath) property.

```cshtml

@using Syncfusion.Blazor.TreeMap

<SfTreeMap WeightValuePath="Count" TValue="Car" DataSource="Cars" EqualColorValuePath="Brand">
Expand All @@ -71,24 +75,26 @@ Equal color mapping is used to fill colors to each item by specifying equal valu
public string Brand { 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 }
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 }
};
}

```

![Blazor TreeMap with Equal Color Mapping](images/Colormapping/blazor-treemap-equal-color-mapping.png)

## Desaturation color mapping

Desaturation color mapping is used to apply colors to the items based on the [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and the [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) properties in the [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html).
Desaturation color mapping applies colors to items based on [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) properties in [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html).

```cshtml

@using Syncfusion.Blazor.TreeMap

<SfTreeMap WeightValuePath="Count" TValue="Fruit" DataSource="Fruits" RangeColorValuePath="Count">
Expand All @@ -99,17 +105,19 @@ Desaturation color mapping is used to apply colors to the items based on the [Mi
</TreeMapLeafColorMappings>
</TreeMapLeafItemSettings>
</SfTreeMap>

```

N> Refer to the [code block](#range-color-mapping) to know about the property value of the **Fruits**.
N> See the [range color mapping](#range-color-mapping) section for the **Fruits** data model and values.

![Blazor TreeMap with Desaturation Color Mapping](images/Colormapping/blazor-treemap-desaturation-color-mapping.png)

## Desaturation with multiple colors

Multiple colors are used to provide gradient effect to the TreeMap items based on the [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html) ranges and specify the **n** number of colors in the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping) property.
Multiple colors provide a gradient effect to TreeMap items based on [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html) ranges. Specify multiple colors in the [ColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping) property.

```cshtml

@using Syncfusion.Blazor.TreeMap

<SfTreeMap WeightValuePath="Count" TValue="Fruit" DataSource="Fruits" RangeColorValuePath="Count">
Expand All @@ -120,33 +128,38 @@ Multiple colors are used to provide gradient effect to the TreeMap items based o
</TreeMapLeafColorMappings>
</TreeMapLeafItemSettings>
</SfTreeMap>

```

N> Refer to the [code block](#range-color-mapping) to know about the property value of **Fruits**.
N> See the [range color mapping](#range-color-mapping) section for the **Fruits** data model and values.

![Multiple Color Mapping in Blazor TreeMap with Desaturation](images/Colormapping/blazor-treemap-desaturation-with-multiple-color.png)

## Palette color mapping

Palette color mapping assigns colors to items from a predefined set of colors specified using the [Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_Palette) property.

```cshtml

@using Syncfusion.Blazor.TreeMap

<SfTreeMap WeightValuePath="Count" TValue="Car" DataSource="Cars" Palette='new string[] { "red", "green" }'>
<TreeMapLeafItemSettings LabelPath="Name">
</TreeMapLeafItemSettings>
</SfTreeMap>

```

N> Refer to the [code block](#equal-color-mapping) to know about the property value of **Cars**.
N> See the [equal color mapping](#equal-color-mapping) section for the **Cars** data model and values.

![Blazor TreeMap with Palette Color Mapping](images/Colormapping/blazor-treemap-palette-color-mapping.png)

## Color for items excluded from color mapping

Get the excluded ranges from data source using the color mapping and apply the specific color to those items, without specifying the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and the [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange) properties.
Retrieve excluded ranges from the data source and apply a specific color to those items without specifying [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange) properties.

```cshtml

@using Syncfusion.Blazor.TreeMap

<SfTreeMap WeightValuePath="Count" TValue="Fruit" DataSource="Fruits" RangeColorValuePath="Count">
Expand All @@ -158,16 +171,17 @@ Get the excluded ranges from data source using the color mapping and apply the s
</TreeMapLeafColorMappings>
</TreeMapLeafItemSettings>
</SfTreeMap>

```

N> Refer to the [code block](#range-color-mapping) to know about the property value of the **Fruits**.
N> See the [range color mapping](#range-color-mapping) section for the **Fruits** data model and values.

![Blazor TreeMap with Color Mapping for Excluded Items](images/Colormapping/blazor-treemap-color-for-exclude-item.png)

## Bind the colors to items from the data source


```cshtml

@using Syncfusion.Blazor.TreeMap

<SfTreeMap WeightValuePath="Count" TValue="Fruit" DataSource="Fruits" RangeColorValuePath="Count" ColorValuePath="Color">
Expand All @@ -182,16 +196,18 @@ N> Refer to the [code block](#range-color-mapping) to know about the property va
public double Count { get; set; }
public string Color { get; set; }
};

public List<Fruit> Fruits = new List<Fruit> {
new Fruit { Name="Apple", Count=5000, Color = "red" },
new Fruit { Name="Mango", Count=3000, Color="blue" },
new Fruit { Name="Orange", Count=2300, Color="green" },
new Fruit { Name="Banana", Count=500 , Color="yellow"},
new Fruit { Name="Grape", Count=4300 , Color="orange"},
new Fruit { Name="Papaya",Count=1200 , Color="pink"},
new Fruit { Name="Melon", Count=4500, Color="violet" }
new Fruit { Name = "Apple", Count = 5000, Color = "red" },
new Fruit { Name = "Mango", Count = 3000, Color = "blue" },
new Fruit { Name = "Orange", Count = 2300, Color = "green" },
new Fruit { Name = "Banana", Count = 500 , Color = "yellow"},
new Fruit { Name = "Grape", Count = 4300 , Color = "orange"},
new Fruit { Name = "Papaya",Count = 1200 , Color = "pink"},
new Fruit { Name = "Melon", Count = 4500, Color = "violet" }
};
}

```

![Binding Colors in Blazor TreeMap](images/Colormapping/blazor-treemap-color-binding.png)
Loading