In Flutter Treemap, you can position the legend on the Treemap by following these steps: Step 1: Add Syncfusion® Flutter Treemap package to your dependencies in the pubspec.yaml file, and then initialize the data source and ColorMapper in the initState() method. late List<SocialMediaUsers> _socialMediaUsers; late List<TreemapColorMapper> _colorMappers; @override void initState() { _socialMediaUsers = <SocialMediaUsers>[ SocialMediaUsers('India', 'Facebook', 25.4), SocialMediaUsers('USA', 'Instagram', 19.11), SocialMediaUsers('Japan', 'Facebook', 13.3), SocialMediaUsers('Germany', 'Instagram', 10.65), SocialMediaUsers('France', 'Twitter', 7.54), ]; _colorMappers = <TreemapColorMapper>[ TreemapColorMapper.range( from: 0, to: 10, minSaturation: 0.5, maxSaturation: 1, color: Colors.blue[200]!), const TreemapColorMapper.range( from: 10, to: 20, minSaturation: 0.5, maxSaturation: 1, color: Colors.deepOrange), TreemapColorMapper.range( from: 20, to: 30, minSaturation: 0.5, maxSaturation: 1, color: Colors.blue[800]!), ]; super.initState(); } Step 2: Initialize the Treemap with the necessary properties. Please refer to this documentation for initializing the Treemap and populating the data source. Step 3: Set the legend property to the Treemap and position the legend by using the offset property. @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SizedBox( height: 400, width: 400, child: SfTreemap( dataCount: _socialMediaUsers.length, legend: const TreemapLegend(direction: Axis.vertical, offset: Offset(-180, 310)), weightValueMapper: (int index) { return _socialMediaUsers[index].usersInMillions; }, levels: [ TreemapLevel( groupMapper: (int index) { return _socialMediaUsers[index].country; }, colorValueMapper: (TreemapTile tile) { return tile.weight; }, ), ], colorMappers: _colorMappers, ), ), ), ); } class SocialMediaUsers { SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); final String country; final String socialMedia; final double usersInMillions; } Output Check the following links for more features in Syncfusion® Flutter Treemap: Syncfusion® Flutter Treemap product page User guide documentation for Treemap pub.dev Live samples Android iOS Web Windows Linux Blogs related to Treemap Introduction to the Flutter Treemap widget Visualize election results with Flutter Treemap ConclusionI hope you enjoyed learning about how to position the legend on Flutter Treemap.You can refer to our Flutter Treemap feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Treemap example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The WPF Chart allows us to visualize the segments in series with different gradient colors as shown in the following image. It has been achieved by setting the Interior value of series with LinearGradientBrush as shown in the following code sample. [XAML] <chart:SfChart Margin="20" x:Name="chart" > <chart:SfChart.DataContext> <local:ViewModel/> </chart:SfChart.DataContext> <chart:SfChart.PrimaryAxis> <chart:NumericalAxis /> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis /> </chart:SfChart.SecondaryAxis> <chart:SfChart.Legend> <chart:ChartLegend DockPosition="Top"/> </chart:SfChart.Legend> <!--Declare the series in which segments need to fill with different gradient--> <chart:StackingBar100Series XBindingPath="XValue" Label="0-100" YBindingPath="YValue1" ItemsSource="{Binding Data}"> <!--By setting the desired color with its offset, getting each segment gradient --> <chart:StackingBar100Series.Interior> <LinearGradientBrush> <GradientStop Offset="0" Color="#ffff01" /> <GradientStop Offset="1" Color="#13ab11" /> </LinearGradientBrush> </chart:StackingBar100Series.Interior> </chart:StackingBar100Series> … </chart:SfChart> View the sample in Github See alsoHow to set color for the series ColorModel propertyHow to define the fill color for each datapoint from ItemsSourceHow to change colors of specific data points in the chartHow to add custom color model to series
You can provide colors based on the ColorValuePath to a LeafTemplate by using MappedColor property and you can add any colormapping for leafnode using “LeafColorMapping” property. XAML <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:RangeBrushColorMapping> <syncfusion:RangeBrushColorMapping.Brushes> <syncfusion:RangeBrush Color="#77D8D8" From="0" To="2" /> . . . </syncfusion:RangeBrushColorMapping.Brushes> </syncfusion:RangeBrushColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> Use MappedColor API as binding path in Leaftemplate to bind the set of provided colors using LeafColorMapping based on ColorValuePath. XAML <syncfusion:SfTreeMap.LeafTemplate> . . . <Border Background="{Binding MappedColor}" > . . . </Border> . . . </syncfusion:SfTreeMap.LeafTemplate> Sample Location: TreeMapCustomization.zip XAML <syncfusion:SfTreeMap> . . . <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:RangeBrushColorMapping> <syncfusion:RangeBrushColorMapping.Brushes> <syncfusion:RangeBrush Color="#77D8D8" From="0" To="2" /> <syncfusion:RangeBrush Color="#AED960" From="3" To="8" /> <syncfusion:RangeBrush Color="#FFAF51" From="9" To="11" /> <syncfusion:RangeBrush Color="#F3D240" From="12" To="16" /> </syncfusion:RangeBrushColorMapping.Brushes> </syncfusion:RangeBrushColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> . . . <syncfusion:SfTreeMap.LeafTemplate> <DataTemplate> <Border BorderBrush="Transparent" BorderThickness="2" Background="{Binding MappedColor}" > . . . </Border> </DataTemplate> </syncfusion:SfTreeMap.LeafTemplate> . . . </syncfusion:SfTreeMap> The following screenshot illustrates the output. Figure SEQ Figure \* ARABIC 1: LeafTemplate colors using mappedcolor
The TreeMap leaf nodes can be colored by populating the multiple color brushes inside the Colors collection of the PaletteColorMapping. XAML <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:PaletteColorMapping> <syncfusion:PaletteColorMapping.Colors> <SolidColorBrush Color="Red"/> <SolidColorBrush Color="Blue"/> <SolidColorBrush Color="Green"/> <SolidColorBrush Color="Yellow"/> <SolidColorBrush Color="Orange"/> <SolidColorBrush Color="Orchid"/> <SolidColorBrush Color="Brown"/> <SolidColorBrush Color="BlueViolet"/> <SolidColorBrush Color="OrangeRed"/> <SolidColorBrush Color="Magenta"/> <SolidColorBrush Color="Olive"/> <SolidColorBrush Color="Crimson"/> <SolidColorBrush Color="DeepSkyBlue"/> </syncfusion:PaletteColorMapping.Colors> </syncfusion:PaletteColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> Refer to the following online documentation link for more details on PaletteColorMapping: https://help.syncfusion.com/winrt/installation-and-deployment Sample Location for PaletteColorMapping: PaletteColorMapping.zip XAML <syncfusion:SfTreeMap> . . . <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:PaletteColorMapping> <syncfusion:PaletteColorMapping.Colors> <SolidColorBrush Color="Red"/> <SolidColorBrush Color="Blue"/> <SolidColorBrush Color="Green"/> <SolidColorBrush Color="Yellow"/> <SolidColorBrush Color="Orange"/> <SolidColorBrush Color="Orchid"/> <SolidColorBrush Color="Brown"/> <SolidColorBrush Color="BlueViolet"/> <SolidColorBrush Color="OrangeRed"/> <SolidColorBrush Color="Magenta"/> <SolidColorBrush Color="Olive"/> <SolidColorBrush Color="Crimson"/> <SolidColorBrush Color="DeepSkyBlue"/> </syncfusion:PaletteColorMapping.Colors> </syncfusion:PaletteColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> . . . </syncfusion:SfTreeMap> The following screenshot displays the PaletteColorMapping. Figure SEQ Figure \* ARABIC 1: PaletteColorMapping
The TreeMap leaf nodes can be colored by using the Color property specified in the DesaturationColorMapping. The RangeMinimum and RangeMaximum must be specified to determine the opacity for each leaf node. The opacity of lead nodes are in the range of From and To mentioned in DesaturationColorMapping. XAML Refer to the following online documentation link for more details on DesaturationColorMapping. http://help.syncfusion.com/UG/winrt/documents/desaturationcolormap.htm Sample Location for DesaturationColorMapping DesaturationColorMapping.zip XAML The following screenshot displays DesaturationColorMapping. Figure 1: DesaturationColorMapping
The TreeMap leaf nodes can be colored using the Color property based on its Range, From and To, and the Brush, specified using RangeBrush collection of RangeBrushColorMapping. XAML <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:RangeBrushColorMapping> <syncfusion:RangeBrushColorMapping.Brushes> <syncfusion:RangeBrush Color="#77D8D8" From="0" To="1" LegendLabel="1 % Growth"/> . . . </syncfusion:RangeBrushColorMapping.Brushes> </syncfusion:RangeBrushColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> Refer the following online documentation link for more details about RangeBrushColorMapping. https://help.syncfusion.com/winrt/treemap/colormapping#rangebrushcolormapping Sample Location for RangeBrushColorMapping: RangeBrushColorMapping.zip XAML <syncfusion:SfTreeMap> . . . <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:RangeBrushColorMapping> <syncfusion:RangeBrushColorMapping.Brushes> <syncfusion:RangeBrush Color="#77D8D8" From="0" To="1" LegendLabel="1 % Growth"/> <syncfusion:RangeBrush Color="#AED960" From="0" To="2" LegendLabel="2 % Growth"/> <syncfusion:RangeBrush Color="#FFAF51" From="0" To="3" LegendLabel="3 % Growth"/> <syncfusion:RangeBrush Color="#F3D240" From="0" To="4" LegendLabel="4 % Growth"/> </syncfusion:RangeBrushColorMapping.Brushes> </syncfusion:RangeBrushColorMapping> </syncfusion:SfTreeMap.LeafColorMapping> . . . </syncfusion:SfTreeMap> Screenshot: Figure SEQ Figure \* ARABIC 1: RangeBrushColorMapping
The TreeMap leaf nodes can be colored by using the Color property that is specified in the UniColorMapping. XAML <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:UniColorMapping Color="Crimson"/> </syncfusion:SfTreeMap.LeafColorMapping> Refer to the following online documentation link for more details on UniColorMapping: https://help.syncfusion.com/winrt/treemap/colormapping#unicolormapping Sample Location for UniColorMapping: UniColorMapping.zip XAML <syncfusion:SfTreeMap> . . . <syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:UniColorMapping Color="Crimson"/> </syncfusion:SfTreeMap.LeafColorMapping> . . . </syncfusion:SfTreeMap> The following screenshot displays UniColorMapping. Figure SEQ Figure \* ARABIC 1: UniColorMapping
