A squarified treemap chart for showing a hierarchy of parts by size, like revenue by region and country, where you click a tile to drill in and the tiles animate to fill the view.
"use client";
import Treemap from "@/components/ui/treemap";
const data = {
id: "root",
label: "Revenue",
children: [
{
id: "americas",
label: "Americas",
children: [
{ id: "us", label: "United States", value: 420 },
{ id: "ca", label: "Canada", value: 95 },
{ id: "br", label: "Brazil", value: 60 },
],
},
{
id: "emea",
label: "EMEA",
children: [
{ id: "uk", label: "United Kingdom", value: 150 },
{ id: "de", label: "Germany", value: 130 },
{ id: "fr", label: "France", value: 90 },
],
},
{
id: "apac",
label: "APAC",
children: [
{ id: "jp", label: "Japan", value: 110 },
{ id: "au", label: "Australia", value: 55 },
],
},
],
};
export default function TreemapDemo() {
return (
<div className="w-full max-w-2xl p-4">
<Treemap data={data} label="Revenue" formatValue={(v) => `$${v}M`} />
</div>
);
}