edgeLabelsPlacement property
Place the edge labels either inside or outside of the bar legend.
edgeLabelsPlacement doesn't works with TreemapLegendLabelsPlacement.betweenItems.
Defaults to TreemapLegendEdgeLabelsPlacement.inside.
This snippet shows how to set edge 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(
edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center,
),
),
);
}
class SocialMediaUsers {
const SocialMediaUsers(
this.country,
this.socialMedia,
this.usersInMillions,
);
final String country;
final String socialMedia;
final double usersInMillions;
}
See also:
- labelsPlacement, place the labels either between the segments or on the segments.
- labelOverflow, to trims or removes the legend text when it is overflowed from the bar legend.
Implementation
final TreemapLegendEdgeLabelsPlacement edgeLabelsPlacement;