Category / Section
How to apply GradientColorMapping to SfTreeMap
1 min read
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
