Docs Charts Hierarchy

TreemapChart

import { useState } from "react";
import { TreemapChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
const hierarchy = {
  id: "cloud-spend",
  label: "Cloud spend · July",
  children: [
    {
      id: "compute",
      label: "Compute",
      color: "var(--accent)",
      children: [
        {
          id: "kubernetes",
          label: "Kubernetes",
          color: "var(--accent)",
          children: [
            {
              id: "k8s-eu-west-2",
              label: "eu-west-2",
              value: 96,
              color: "var(--accent)",
            },
            {
              id: "k8s-us-east-1",
              label: "us-east-1",
              value: 72,
              color: "var(--accent)",
            },
          ],
        },
        {
          id: "serverless",
          label: "Serverless",
          color: "var(--accent)",
          children: [
            {
              id: "checkout-fns",
              label: "Checkout functions",
              value: 41,
              color: "var(--accent)",
            },
            {
              id: "webhooks",
              label: "Webhooks",
              value: 28,
              color: "var(--accent)",
            },
          ],
        },
        {
          id: "gpu-inference",
          label: "GPU inference",
          value: 54,
          color: "var(--accent)",
        },
        {
          id: "batch",
          label: "Batch jobs",
          value: 38,
          color: "var(--accent)",
        },
      ],
    },
    {
      id: "data",
      label: "Data services",
      color: "var(--vs-success)",
      children: [
        {
          id: "warehouse",
          label: "Warehouse",
          color: "var(--vs-success)",
          children: [
            {
              id: "analytics-wh",
              label: "Analytics",
              value: 78,
              color: "var(--vs-success)",
            },
            {
              id: "finance-wh",
              label: "Finance",
              value: 44,
              color: "var(--vs-success)",
            },
          ],
        },
        {
          id: "storage",
          label: "Object storage",
          value: 61,
          color: "var(--vs-success)",
        },
        {
          id: "streaming",
          label: "Streaming",
          color: "var(--vs-success)",
          children: [
            {
              id: "events-stream",
              label: "Events",
              value: 29,
              color: "var(--vs-success)",
            },
            {
              id: "cdc",
              label: "CDC",
              value: 18,
              color: "var(--vs-success)",
            },
          ],
        },
        {
          id: "cache",
          label: "Cache",
          value: 24,
          color: "var(--vs-success)",
        },
      ],
    },
    {
      id: "platform",
      label: "Platform",
      color: "var(--vs-info)",
      children: [
        {
          id: "cdn",
          label: "CDN",
          value: 52,
          color: "var(--vs-info)",
        },
        {
          id: "observability",
          label: "Observability",
          color: "var(--vs-info)",
          children: [
            {
              id: "traces",
              label: "Traces",
              value: 31,
              color: "var(--vs-info)",
            },
            {
              id: "logs",
              label: "Logs",
              value: 22,
              color: "var(--vs-info)",
            },
          ],
        },
        {
          id: "ci-runners",
          label: "CI runners",
          value: 34,
          color: "var(--vs-info)",
        },
        {
          id: "feature-flags",
          label: "Feature flags",
          value: 16,
          color: "var(--vs-info)",
        },
      ],
    },
    {
      id: "security",
      label: "Security",
      color: "var(--vs-warning)",
      children: [
        {
          id: "waf",
          label: "WAF",
          value: 19,
          color: "var(--vs-warning)",
        },
        {
          id: "secrets",
          label: "Secrets",
          value: 14,
          color: "var(--vs-warning)",
        },
        {
          id: "audit",
          label: "Audit trail",
          value: 11,
          color: "var(--vs-warning)",
        },
      ],
    },
  ],
};
 
export default function TreemapChartDemo() {
  const [tessellation, setTessellation] = useState<"squarify" | "voronoi">("squarify");
  return (
    <div>
      <VariantToggle
        label="Tessellation"
        options={[
          { value: "squarify" as const, label: "Squarify" },
          { value: "voronoi" as const, label: "Voronoi" },
        ]}
        value={tessellation}
        onChange={setTessellation}
      />
      <TreemapChart
        root={hierarchy}
        tessellation={tessellation}
        ariaLabel="July cloud spend of 782 thousand dollars across compute, data, platform, and security" />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { TreemapChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const tessellation = ref<"squarify" | "voronoi">("squarify");
const tessellations = [
  { value: "squarify", label: "Squarify" },
  { value: "voronoi", label: "Voronoi" },
];
const hierarchy = {
  id: "cloud-spend",
  label: "Cloud spend · July",
  children: [
    {
      id: "compute",
      label: "Compute",
      color: "var(--accent)",
      children: [
        {
          id: "kubernetes",
          label: "Kubernetes",
          color: "var(--accent)",
          children: [
            {
              id: "k8s-eu-west-2",
              label: "eu-west-2",
              value: 96,
              color: "var(--accent)",
            },
            {
              id: "k8s-us-east-1",
              label: "us-east-1",
              value: 72,
              color: "var(--accent)",
            },
          ],
        },
        {
          id: "serverless",
          label: "Serverless",
          color: "var(--accent)",
          children: [
            {
              id: "checkout-fns",
              label: "Checkout functions",
              value: 41,
              color: "var(--accent)",
            },
            {
              id: "webhooks",
              label: "Webhooks",
              value: 28,
              color: "var(--accent)",
            },
          ],
        },
        {
          id: "gpu-inference",
          label: "GPU inference",
          value: 54,
          color: "var(--accent)",
        },
        {
          id: "batch",
          label: "Batch jobs",
          value: 38,
          color: "var(--accent)",
        },
      ],
    },
    {
      id: "data",
      label: "Data services",
      color: "var(--vs-success)",
      children: [
        {
          id: "warehouse",
          label: "Warehouse",
          color: "var(--vs-success)",
          children: [
            {
              id: "analytics-wh",
              label: "Analytics",
              value: 78,
              color: "var(--vs-success)",
            },
            {
              id: "finance-wh",
              label: "Finance",
              value: 44,
              color: "var(--vs-success)",
            },
          ],
        },
        {
          id: "storage",
          label: "Object storage",
          value: 61,
          color: "var(--vs-success)",
        },
        {
          id: "streaming",
          label: "Streaming",
          color: "var(--vs-success)",
          children: [
            {
              id: "events-stream",
              label: "Events",
              value: 29,
              color: "var(--vs-success)",
            },
            {
              id: "cdc",
              label: "CDC",
              value: 18,
              color: "var(--vs-success)",
            },
          ],
        },
        {
          id: "cache",
          label: "Cache",
          value: 24,
          color: "var(--vs-success)",
        },
      ],
    },
    {
      id: "platform",
      label: "Platform",
      color: "var(--vs-info)",
      children: [
        {
          id: "cdn",
          label: "CDN",
          value: 52,
          color: "var(--vs-info)",
        },
        {
          id: "observability",
          label: "Observability",
          color: "var(--vs-info)",
          children: [
            {
              id: "traces",
              label: "Traces",
              value: 31,
              color: "var(--vs-info)",
            },
            {
              id: "logs",
              label: "Logs",
              value: 22,
              color: "var(--vs-info)",
            },
          ],
        },
        {
          id: "ci-runners",
          label: "CI runners",
          value: 34,
          color: "var(--vs-info)",
        },
        {
          id: "feature-flags",
          label: "Feature flags",
          value: 16,
          color: "var(--vs-info)",
        },
      ],
    },
    {
      id: "security",
      label: "Security",
      color: "var(--vs-warning)",
      children: [
        {
          id: "waf",
          label: "WAF",
          value: 19,
          color: "var(--vs-warning)",
        },
        {
          id: "secrets",
          label: "Secrets",
          value: 14,
          color: "var(--vs-warning)",
        },
        {
          id: "audit",
          label: "Audit trail",
          value: 11,
          color: "var(--vs-warning)",
        },
      ],
    },
  ],
};
</script>
 
<template>
  <div>
    <VariantToggle v-model="tessellation" label="Tessellation" :options="tessellations" />
    <TreemapChart
      :root="hierarchy"
      :tessellation="tessellation"
      aria-label="July cloud spend of 782 thousand dollars across compute, data, platform, and security" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootTreemapChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-treemap-chart-chart-demo",
  standalone: true,
  imports: [GrassrootTreemapChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Tessellation"
      [options]="tessellations"
      [value]="tessellation()"
      (valueChange)="setTessellation($event)"
    /><grassroot-treemap-chart
    [tessellation]="tessellation()"
    [root]="hierarchy"
    ariaLabel="July cloud spend of 782 thousand dollars across compute, data, platform, and security"
  />`,
})
export class TreemapChartDemoComponent {
  readonly tessellation = signal<"squarify" | "voronoi">("squarify");
  readonly tessellations = [
    { value: "squarify", label: "Squarify" },
    { value: "voronoi", label: "Voronoi" },
  ] as const;
  readonly hierarchy = {
    id: "cloud-spend",
    label: "Cloud spend · July",
    children: [
      {
        id: "compute",
        label: "Compute",
        color: "var(--accent)",
        children: [
          {
            id: "kubernetes",
            label: "Kubernetes",
            color: "var(--accent)",
            children: [
              {
                id: "k8s-eu-west-2",
                label: "eu-west-2",
                value: 96,
                color: "var(--accent)",
              },
              {
                id: "k8s-us-east-1",
                label: "us-east-1",
                value: 72,
                color: "var(--accent)",
              },
            ],
          },
          {
            id: "serverless",
            label: "Serverless",
            color: "var(--accent)",
            children: [
              {
                id: "checkout-fns",
                label: "Checkout functions",
                value: 41,
                color: "var(--accent)",
              },
              {
                id: "webhooks",
                label: "Webhooks",
                value: 28,
                color: "var(--accent)",
              },
            ],
          },
          {
            id: "gpu-inference",
            label: "GPU inference",
            value: 54,
            color: "var(--accent)",
          },
          {
            id: "batch",
            label: "Batch jobs",
            value: 38,
            color: "var(--accent)",
          },
        ],
      },
      {
        id: "data",
        label: "Data services",
        color: "var(--vs-success)",
        children: [
          {
            id: "warehouse",
            label: "Warehouse",
            color: "var(--vs-success)",
            children: [
              {
                id: "analytics-wh",
                label: "Analytics",
                value: 78,
                color: "var(--vs-success)",
              },
              {
                id: "finance-wh",
                label: "Finance",
                value: 44,
                color: "var(--vs-success)",
              },
            ],
          },
          {
            id: "storage",
            label: "Object storage",
            value: 61,
            color: "var(--vs-success)",
          },
          {
            id: "streaming",
            label: "Streaming",
            color: "var(--vs-success)",
            children: [
              {
                id: "events-stream",
                label: "Events",
                value: 29,
                color: "var(--vs-success)",
              },
              {
                id: "cdc",
                label: "CDC",
                value: 18,
                color: "var(--vs-success)",
              },
            ],
          },
          {
            id: "cache",
            label: "Cache",
            value: 24,
            color: "var(--vs-success)",
          },
        ],
      },
      {
        id: "platform",
        label: "Platform",
        color: "var(--vs-info)",
        children: [
          {
            id: "cdn",
            label: "CDN",
            value: 52,
            color: "var(--vs-info)",
          },
          {
            id: "observability",
            label: "Observability",
            color: "var(--vs-info)",
            children: [
              {
                id: "traces",
                label: "Traces",
                value: 31,
                color: "var(--vs-info)",
              },
              {
                id: "logs",
                label: "Logs",
                value: 22,
                color: "var(--vs-info)",
              },
            ],
          },
          {
            id: "ci-runners",
            label: "CI runners",
            value: 34,
            color: "var(--vs-info)",
          },
          {
            id: "feature-flags",
            label: "Feature flags",
            value: 16,
            color: "var(--vs-info)",
          },
        ],
      },
      {
        id: "security",
        label: "Security",
        color: "var(--vs-warning)",
        children: [
          {
            id: "waf",
            label: "WAF",
            value: 19,
            color: "var(--vs-warning)",
          },
          {
            id: "secrets",
            label: "Secrets",
            value: 14,
            color: "var(--vs-warning)",
          },
          {
            id: "audit",
            label: "Audit trail",
            value: 11,
            color: "var(--vs-warning)",
          },
        ],
      },
    ],
  };
  setTessellation(value: string): void {
    if (value === "squarify" || value === "voronoi") this.tessellation.set(value);
  }
}
 
export default TreemapChartDemoComponent;

<script lang="ts">
  import { TreemapChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let tessellation = $state<"squarify" | "voronoi">("squarify");
  const tessellations = [
    { value: "squarify", label: "Squarify" },
    { value: "voronoi", label: "Voronoi" },
  ];
  const hierarchy = {
    id: "cloud-spend",
    label: "Cloud spend · July",
    children: [
      {
        id: "compute",
        label: "Compute",
        color: "var(--accent)",
        children: [
          {
            id: "kubernetes",
            label: "Kubernetes",
            color: "var(--accent)",
            children: [
              {
                id: "k8s-eu-west-2",
                label: "eu-west-2",
                value: 96,
                color: "var(--accent)",
              },
              {
                id: "k8s-us-east-1",
                label: "us-east-1",
                value: 72,
                color: "var(--accent)",
              },
            ],
          },
          {
            id: "serverless",
            label: "Serverless",
            color: "var(--accent)",
            children: [
              {
                id: "checkout-fns",
                label: "Checkout functions",
                value: 41,
                color: "var(--accent)",
              },
              {
                id: "webhooks",
                label: "Webhooks",
                value: 28,
                color: "var(--accent)",
              },
            ],
          },
          {
            id: "gpu-inference",
            label: "GPU inference",
            value: 54,
            color: "var(--accent)",
          },
          {
            id: "batch",
            label: "Batch jobs",
            value: 38,
            color: "var(--accent)",
          },
        ],
      },
      {
        id: "data",
        label: "Data services",
        color: "var(--vs-success)",
        children: [
          {
            id: "warehouse",
            label: "Warehouse",
            color: "var(--vs-success)",
            children: [
              {
                id: "analytics-wh",
                label: "Analytics",
                value: 78,
                color: "var(--vs-success)",
              },
              {
                id: "finance-wh",
                label: "Finance",
                value: 44,
                color: "var(--vs-success)",
              },
            ],
          },
          {
            id: "storage",
            label: "Object storage",
            value: 61,
            color: "var(--vs-success)",
          },
          {
            id: "streaming",
            label: "Streaming",
            color: "var(--vs-success)",
            children: [
              {
                id: "events-stream",
                label: "Events",
                value: 29,
                color: "var(--vs-success)",
              },
              {
                id: "cdc",
                label: "CDC",
                value: 18,
                color: "var(--vs-success)",
              },
            ],
          },
          {
            id: "cache",
            label: "Cache",
            value: 24,
            color: "var(--vs-success)",
          },
        ],
      },
      {
        id: "platform",
        label: "Platform",
        color: "var(--vs-info)",
        children: [
          {
            id: "cdn",
            label: "CDN",
            value: 52,
            color: "var(--vs-info)",
          },
          {
            id: "observability",
            label: "Observability",
            color: "var(--vs-info)",
            children: [
              {
                id: "traces",
                label: "Traces",
                value: 31,
                color: "var(--vs-info)",
              },
              {
                id: "logs",
                label: "Logs",
                value: 22,
                color: "var(--vs-info)",
              },
            ],
          },
          {
            id: "ci-runners",
            label: "CI runners",
            value: 34,
            color: "var(--vs-info)",
          },
          {
            id: "feature-flags",
            label: "Feature flags",
            value: 16,
            color: "var(--vs-info)",
          },
        ],
      },
      {
        id: "security",
        label: "Security",
        color: "var(--vs-warning)",
        children: [
          {
            id: "waf",
            label: "WAF",
            value: 19,
            color: "var(--vs-warning)",
          },
          {
            id: "secrets",
            label: "Secrets",
            value: 14,
            color: "var(--vs-warning)",
          },
          {
            id: "audit",
            label: "Audit trail",
            value: 11,
            color: "var(--vs-warning)",
          },
        ],
      },
    ],
  };
</script>
 
<div>
  <VariantToggle
    label="Tessellation"
    options={tessellations}
    value={tessellation}
    onchange={(value) => (tessellation = value as typeof tessellation)}
  />
  <TreemapChart
    root={hierarchy}
    {tessellation}
    ariaLabel="July cloud spend of 782 thousand dollars across compute, data, platform, and security" />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { TreemapChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
const hierarchy = {
  id: "cloud-spend",
  label: "Cloud spend · July",
  children: [
    {
      id: "compute",
      label: "Compute",
      color: "var(--accent)",
      children: [
        {
          id: "kubernetes",
          label: "Kubernetes",
          color: "var(--accent)",
          children: [
            {
              id: "k8s-eu-west-2",
              label: "eu-west-2",
              value: 96,
              color: "var(--accent)",
            },
            {
              id: "k8s-us-east-1",
              label: "us-east-1",
              value: 72,
              color: "var(--accent)",
            },
          ],
        },
        {
          id: "serverless",
          label: "Serverless",
          color: "var(--accent)",
          children: [
            {
              id: "checkout-fns",
              label: "Checkout functions",
              value: 41,
              color: "var(--accent)",
            },
            {
              id: "webhooks",
              label: "Webhooks",
              value: 28,
              color: "var(--accent)",
            },
          ],
        },
        {
          id: "gpu-inference",
          label: "GPU inference",
          value: 54,
          color: "var(--accent)",
        },
        {
          id: "batch",
          label: "Batch jobs",
          value: 38,
          color: "var(--accent)",
        },
      ],
    },
    {
      id: "data",
      label: "Data services",
      color: "var(--vs-success)",
      children: [
        {
          id: "warehouse",
          label: "Warehouse",
          color: "var(--vs-success)",
          children: [
            {
              id: "analytics-wh",
              label: "Analytics",
              value: 78,
              color: "var(--vs-success)",
            },
            {
              id: "finance-wh",
              label: "Finance",
              value: 44,
              color: "var(--vs-success)",
            },
          ],
        },
        {
          id: "storage",
          label: "Object storage",
          value: 61,
          color: "var(--vs-success)",
        },
        {
          id: "streaming",
          label: "Streaming",
          color: "var(--vs-success)",
          children: [
            {
              id: "events-stream",
              label: "Events",
              value: 29,
              color: "var(--vs-success)",
            },
            {
              id: "cdc",
              label: "CDC",
              value: 18,
              color: "var(--vs-success)",
            },
          ],
        },
        {
          id: "cache",
          label: "Cache",
          value: 24,
          color: "var(--vs-success)",
        },
      ],
    },
    {
      id: "platform",
      label: "Platform",
      color: "var(--vs-info)",
      children: [
        {
          id: "cdn",
          label: "CDN",
          value: 52,
          color: "var(--vs-info)",
        },
        {
          id: "observability",
          label: "Observability",
          color: "var(--vs-info)",
          children: [
            {
              id: "traces",
              label: "Traces",
              value: 31,
              color: "var(--vs-info)",
            },
            {
              id: "logs",
              label: "Logs",
              value: 22,
              color: "var(--vs-info)",
            },
          ],
        },
        {
          id: "ci-runners",
          label: "CI runners",
          value: 34,
          color: "var(--vs-info)",
        },
        {
          id: "feature-flags",
          label: "Feature flags",
          value: 16,
          color: "var(--vs-info)",
        },
      ],
    },
    {
      id: "security",
      label: "Security",
      color: "var(--vs-warning)",
      children: [
        {
          id: "waf",
          label: "WAF",
          value: 19,
          color: "var(--vs-warning)",
        },
        {
          id: "secrets",
          label: "Secrets",
          value: 14,
          color: "var(--vs-warning)",
        },
        {
          id: "audit",
          label: "Audit trail",
          value: 11,
          color: "var(--vs-warning)",
        },
      ],
    },
  ],
};
 
export default function TreemapChartDemo() {
  const [tessellation, setTessellation] = createSignal<"squarify" | "voronoi">("squarify");
  const tessellations = [
    { value: "squarify", label: "Squarify" },
    { value: "voronoi", label: "Voronoi" },
  ];
  return (
    <div>
      <VariantToggle
        label="Tessellation"
        options={tessellations}
        value={tessellation}
        onChange={(value) => setTessellation(value as "squarify" | "voronoi")}
      />
      <TreemapChart
        root={hierarchy}
        tessellation={tessellation()}
        ariaLabel="July cloud spend of 782 thousand dollars across compute, data, platform, and security" />
    </div>
  );
}

Installation

API Reference

Import

import { useState } from "react";
import { TreemapChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

Description

root

HierarchyDatum

—

required

—

tessellation

"squarify" | "voronoi" | undefined

—

optional

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

ariaLabel

string | undefined

—

optional

—

keyboardNavigation

boolean | undefined

—

optional

—

Prop: root
Type: HierarchyDatum
Default: —
Requirement: required
Description: —

Prop: tessellation
Type: "squarify" | "voronoi" | undefined
Default: —
Requirement: optional
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional
Description: —

Prop: selectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultSelectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: onSelectedIdsChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`
`onSelectedIdsChange`	`((ids: readonly string[]) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { ref } from "vue";
import { TreemapChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: root
Type: HierarchyDatum
Default: —
Requirement: required

Prop: tessellation
Type: "squarify" | "voronoi" | undefined
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`
`selectedIdsChange`	`[ids: readonly string[]]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootTreemapChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: "none"
Requirement: optional

Prop: selectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: SelectionValue) => void
Default: —
Requirement: optional

Prop: root
Type: HierarchyDatum
Default: —
Requirement: required

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Prop: tessellation
Type: TreemapChartOptions["tessellation"]
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`
`selectedIdsChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { TreemapChart } from "@grassroot/charts-svelte";
import VariantToggle from "./VariantToggle.svelte";

Props

Prop

Type

Default

Requirement

root

HierarchyDatum

—

required

tessellation

TreemapChartOptions["tessellation"]

—

optional

selectionMode

"none" | "single" | "multiple"

"none"

optional

selectedIds

readonly string[]

—

optional

defaultSelectedIds

readonly string[]

—

optional

onSelectedIdsChange

(ids: readonly string[]) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

Prop: root
Type: HierarchyDatum
Default: —
Requirement: required

Prop: tessellation
Type: TreemapChartOptions["tessellation"]
Default: —
Requirement: optional

Prop: selectionMode
Type: "none" | "single" | "multiple"
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(ids: readonly string[]) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { createSignal } from "solid-js";
import { TreemapChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

root

HierarchyDatum

—

required

tessellation

TreemapChartOptions["tessellation"]

—

optional

selectionMode

SelectionMode

—

optional

selectedIds

readonly string[]

—

optional

defaultSelectedIds

readonly string[]

—

optional

onSelectedIdsChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

Prop: root
Type: HierarchyDatum
Default: —
Requirement: required

Prop: tessellation
Type: TreemapChartOptions["tessellation"]
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary