labelsPlacement property
Place the labels either between the segments or on the segments.
By default, label placement will be TreemapLegendLabelsPlacement.betweenItems when setting range color mapper without setting color mapper text property otherwise label placement will be TreemapLegendLabelsPlacement.onItem.
This snippet shows how to set label placement in SfTreemap.
late List<SocialMediaUsers> _source;
late List<TreemapColorMapper> _colorMappers;
@override
void initState() {
_source = <SocialMediaUsers>[
SocialMediaUsers('India', 'Facebook', 280),
SocialMediaUsers('India', 'Instagram', 88),
SocialMediaUsers('USA', 'Facebook', 190),
SocialMediaUsers('USA', 'Instagram', 120),
SocialMediaUsers('Japan', 'Twitter', 48),
SocialMediaUsers('Japan', 'Instagram', 31),
];
_colorMappers = <TreemapColorMapper>[
TreemapColorMapper.range(
from: 0, to: 10, color: Colors.red, name: '10'),
TreemapColorMapper.range(
from: 11, to: 20, color: Colors.green, name: '20'),
TreemapColorMapper.range(
from: 21, to: 30, color: Colors.blue, name: '30'),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfTreemap(
dataCount: _source.length,
weightValueMapper: (int index) {
return _source[index].usersInMillions;
},
levels: [
TreemapLevel(
groupMapper: (int index) {
return _source[index].country;
},
),
],
colorMappers: _colorMappers,
legend: TreemapLegend.bar(
labelsPlacement: TreemapLegendLabelsPlacement.onItem,
),
),
);
}
class SocialMediaUsers {
const SocialMediaUsers(
this.country,
this.socialMedia,
this.usersInMillions,
);
final String country;
final String socialMedia;
final double usersInMillions;
}
See also:
-
edgeLabelsPlacement, to place the edge labels either inside or outside of the bar legend.
-
labelOverflow, to trims or removes the legend text when it is overflowed from the bar legend.
Implementation
final TreemapLegendLabelsPlacement? labelsPlacement;