Category / Section
How to apply GradientColorMapping to SfTreeMap
By using the leaf color mapping, you can apply colors to tree map. To apply gradient colors, specify the gradient ranges as demonstrated in the following code sample.
<syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:RangeBrushColorMapping> <syncfusion:RangeBrushColorMapping.Brushes> <syncfusion:RangeBrush From="0" To="1" LegendLabel="1 % Growth"> <syncfusion:RangeBrush.GradientColors> <Color A="255" R="241" G="236" B="216"/> <Color A="255" R="222" G="226" B="185"/> </syncfusion:RangeBrush.GradientColors> </syncfusion:RangeBrush> <syncfusion:RangeBrush From="0" To="2" LegendLabel="2 % Growth"> <syncfusion:RangeBrush.GradientColors> <Color A="255" R="222" G="226" B="185"/> <Color A="255" R="203" G="216" B="154"/> </syncfusion:RangeBrush.GradientColors> </syncfusion:RangeBrush> <syncfusion:RangeBrush Color="#FFAF51" From="0" To="3" LegendLabel="3 % Growth"> <syncfusion:RangeBrush.GradientColors> <Color A="255" R="203" G="216" B="154"/> <Color A="255" R="184" G="206" B="123"/> </syncfusion:RangeBrush.GradientColors> </syncfusion:RangeBrush> <syncfusion:RangeBrush Color="#F3D240" From="0" To="4" LegendLabel="4 % Growth"> <syncfusion:RangeBrush.GradientColors> <Color A="255" R="184" G="206" B="123"/> <Color A="255" R="156" G="191" B="78"/> </syncfusion:RangeBrush.GradientColors> </syncfusion:RangeBrush> </syncfusion:RangeBrushColorMapping.Brushes> </syncfusion:RangeBrushColorMapping> </syncfusion:SfTreeMap.LeafColorMapping>
Output Image
Sample for applying gradient colors to tree map: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreemapGradient-1305433188
