Treemap Chart
Visualize hierarchical data as nested rectangles. The area of each rectangle is proportional to its value, making it easy to spot the largest categories.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <TreemapChart />
Annual operating budget broken down by department and sub-team. Nested children show how each department's allocation is split internally.
Filesystem usage breakdown by directory. A flat (non-hierarchical) treemap quickly surfaces the largest consumers of storage space.
Revenue by product category and individual SKU. Data labels enabled so each tile shows its name without hovering.
Headcount by business unit with a violet-to-indigo palette override and Toolbox for screenshot export.
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
TreemapChart
| Property | Type | Default | Description |
|---|---|---|---|
| Data | List<TreemapData> | [] | Hierarchical data with Name, Value, and optional Children. |
| ShowLegend | bool | true | Shows or hides the chart legend. |
| Colors | List<string>? | null | Custom color palette. |
| IsLoading | bool | false | When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state. |
| ShowLoadingSkeleton | bool | true | Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true). |
| SkeletonKind | ChartSkeletonKind | (chart default) | Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic). |
| SkeletonStyle | ChartSkeletonStyle | Phantom | Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay. |
| ShowLoadingLabel | bool | true | Shows a small "Loading…" pill in the top-right corner whenever IsLoading is true. Layered on top of any SkeletonStyle. Set to false for bare visuals. (rc.18) |
| LoadingText | string? | "Loading…" | Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. (rc.18) |
| Width | string | "100%" | Chart container width as a CSS length. |
| Height | string | "350px" | Chart container height as a CSS length. |
| Theme | string? | null | ECharts theme name applied to this chart instance. |
| ColorPalette | List<string>? | null | Named palette used to seed tile colors. |
| ShowTooltip | bool | true | Shows or hides hover tooltips on treemap tiles. |
| ShowDataLabels | bool | false | Show value labels on tiles. |
| LabelPosition | string | "inside" | Position of data labels relative to each tile. |
| LabelFormat | string? | null | ECharts label formatter template string. |
| DataZoom | bool | false | Enable interactive zoom controls. |
| Toolbox | bool | false | Show ECharts toolbox with save, restore, and zoom utilities. |
| AnimationDuration | int? | null | Animation length in milliseconds when rendering. |
| AnimationEasing | string? | null | ECharts easing function name applied to animations. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds while loading. |