Core

Treemap Chart

A treemap chart shows hierarchical data using nested rectangles and is useful when size and grouping need to be understood together.

Example

Usage

Features

  • Best for hierarchical size comparisons.
  • Supports nested groups and leaf nodes.
  • Uses LibravelUI colors through the shared chart palette.
  • Built-in tooltip support is included.
  • Leaf labels are handled inside the chart surface.

Anatomy

import { TreemapChart } from "@/components/ui/core/charts/treemap-chart";
<TreemapChart
  data={data}
  hideValue={false}
/>

Props

Loading types…

Accessible React component library to copy, customize, and own your UI. Built for Next.js, Vite, and Laravel.

Crafted by dervyon. Peep the Source Code on GitHub.

Hosted on Vercel. The source code's got the MIT license.

2025 - 2026 · LibravelUI

Starter Kits

Templates

    Coming Soon

Labs