Treemap
Squarified treemap of nested data with fitting labels, hover and keyboard tooltip, and drill-down with an animated zoom and breadcrumb.
Preview
Cloud spend by team, October
Click a team to open it- Platform › Compute: $48.2K, 22.8% of All teams. Press Enter to open
- Platform › Storage: $21.4K, 10.1% of All teams. Press Enter to open
- Platform › Network: $9.8K, 4.6% of All teams. Press Enter to open
- Platform › Edge cache: $6.1K, 2.9% of All teams. Press Enter to open
- Data › Warehouse: $31.8K, 15% of All teams. Press Enter to open
- Data › Pipelines: $14.6K, 6.9% of All teams. Press Enter to open
- Data › Model training: $22.9K, 10.8% of All teams. Press Enter to open
- Product › Web app: $17.3K, 8.2% of All teams. Press Enter to open
- Product › Mobile API: $11.2K, 5.3% of All teams. Press Enter to open
- Product › Search: $8.4K, 4% of All teams. Press Enter to open
- Product › Email: $2.9K, 1.4% of All teams. Press Enter to open
- Operations › Monitoring: $7.6K, 3.6% of All teams. Press Enter to open
- Operations › Backups: $4.3K, 2% of All teams. Press Enter to open
- Operations › Log retention: $5.2K, 2.5% of All teams. Press Enter to open
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; value?: number; children?: TreemapNode[]; color?: string } | — | Root node; groups sum their children. |
| label | string | — | Accessible name of the chart. |
| height | number | 320 | Height in px; width follows the container. |
| valueFormatter | (value: number) => string | Intl number | Formats values in tiles, tooltip and breadcrumb. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.