Skip to content
CHARTS · COMPLETE

TreemapChart

Show proportions as rectangles, the bigger the value the bigger the area.

Show proportions as rectangles whose areas follow the values.

Why it helps

  • Area equals value
  • Hierarchies
  • Compact

Where it fits

  • Disk usage
  • Budgets
  • Portfolios

Example

<TreemapChart Label="Storage by type" Slices="_slices" ValueFormat="N0" />

@code {
    private readonly ChartSlice[] _slices =
    [
        new("Video", 420), new("Photos", 260), new("Documents", 150), new("Music", 110),
        new("Apps", 90), new("Mail", 45), new("Other", 25)
    ];
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Part of RayCraft Complete.

All controls ยท Documentation