legend property

Shows legend for the data rendered in the treemap.

Defaults to null.

By default, legend will not be shown.

If SfTreemap.colorMappers is null, then the legend items' icon color and legend item's text will be applied based on the value of TreemapLevel.color and the values returned from the TreemapLevel.groupMapper callback of first TreemapLevel added in the levels collection.

If SfTreemap.colorMappers is not null and TreemapColorMapper.value() constructor is used, the legend item's icon color will be applied based on the TreemapColorMapper.color property and the legend text applied based on the TreemapColorMapper.value property.

And, when using TreemapColorMapper.range constructor, the legend item's icon color will be applied based on the TreemapColorMapper.color property and the legend text will be applied based on the TreemapColorMapper.name property. If the TreemapColorMapper.name property is null, then the text will be applied based on the TreemapColorMapper.from and TreemapColorMapper.to properties

The below code snippet represents how to setting default legend to the tree map.

late List<SocialMediaUsers> _source;

@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),
  ];
  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;
          },
        ),
      ],
      legend: TreemapLegend(),
    ),
  );
}

class SocialMediaUsers {
  const SocialMediaUsers(
    this.country,
    this.socialMedia,
    this.usersInMillions,
  );
  final String country;
  final String socialMedia;
  final double usersInMillions;
}

The below code snippet represents how to setting bar legend to the tree map.

late List<SocialMediaUsers> _source;

@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),
  ];
  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;
          },
        ),
      ],
      legend: TreemapLegend.bar(),
    ),
  );
}

class SocialMediaUsers {
  const SocialMediaUsers(
    this.country,
    this.socialMedia,
    this.usersInMillions,
  );
  final String country;
  final String socialMedia;
  final double usersInMillions;
}

Implementation

SfTreemap class