Skip to main content

TreemapChart

TreemapChart

Hierarchical data as nested rectangles

Tags: chart hierarchy proportion nested structure

View Demo

The TreemapChart displays hierarchical data as nested rectangles, where the size represents the value. It's ideal for showing proportions within a hierarchy, such as file system sizes, organizational budgets, or market cap breakdowns by sector.

Reporting props marked Svelte only (valueFormat, showDataTable, exportable, reference lines, data zoom and so on) are available in @classic-homes/charts-svelte; React support is pending.

Import​

<script>
  import { TreemapChart } from '@classic-homes/charts-svelte';
</script>
// React
import { TreemapChart } from '@classic-homes/charts-react';

Basic Usage​

<script>
  import { TreemapChart } from '@classic-homes/charts-svelte';

  const data = [
    {
      name: 'Frontend',
      children: [
        { name: 'React', value: 40 },
        { name: 'Vue', value: 30 },
        { name: 'Svelte', value: 20 },
      ],
    },
    {
      name: 'Backend',
      children: [
        { name: 'Node.js', value: 35 },
        { name: 'Python', value: 25 },
      ],
    },
  ];
</script>

<TreemapChart title="Tech Stack" {data} height={400} />

Props​

Chart-Specific Props​

Prop Type Default Description
data TreemapNode[] required Hierarchical tree data
levels TreemapLevel[] - Visual configuration for each level
labelFormatter string | ((params: LabelFormatterParams) => string) - Data label template or function
onClick (params: TreemapEventParams) => void - Callback when clicked

Inherited Base Props​

Prop Type Default Description
title string required Chart title for accessibility
height number | string 400 Chart height
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
showTooltip boolean true Show tooltip on hover
tooltipFormatter string | ((items: TooltipFormatterParams[]) => string) - Custom tooltip template or HTML function
tooltipValueFormatter (value: number) => string - Format values in the default tooltip
option EChartsOption - Raw ECharts option deep-merged over the generated one
description string - Optional description for screen readers
minHeight number - Minimum height in pixels; also bounds an 'auto' height
maxHeight number - Maximum height in pixels; also bounds an 'auto' height
loading boolean false Show loading skeleton; over existing data a loading overlay is shown instead (Svelte)
error string | null - Error message to display
onRetry () => void - Show a Retry button on the error state, calling this (Svelte only)
emptyMessage string - Message shown when data is empty
valueFormat ValueFormatPreset | Intl.NumberFormatOptions | ((value: number) => string) - How values are written in value axes, tooltips, labels and the data table: 'number', 'integer', 'compact', 'currency', 'currencyCents', 'percent', 'percentValue', 'days', Intl options or a function (Svelte only)
locale string 'en-US' Locale for valueFormat (Svelte only)
onReady (chart: EChartsType) => void - Called with the ECharts instance when it is created (Svelte only)
events Record<string, (params) => void> - Raw ECharts event handlers keyed by event name, e.g. datazoom (Svelte only)
showDataTable boolean | 'sr-only' 'sr-only' Render the data as a table: 'sr-only' for screen readers, true adds a visible "Show data" toggle, false for none (Svelte only)
exportable boolean | ChartExportConfig false Show PNG and CSV download buttons; or { image, csv, filename } (Svelte only)
patterns boolean false Fill series with decal patterns as well as colour, for colour-blind readers (Svelte only)
class string - Custom CSS class
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
showLegend boolean - Show chart legend
showGrid boolean - Show grid lines (where applicable)

Data Structure​

interface TreemapNode {
  name: string; // Node label
  value?: number; // Node value (calculated from children if not set)
  children?: TreemapNode[]; // Child nodes
  color?: string; // Fill colour for this node
}

interface TreemapLevel {
  itemStyle?: {
    borderWidth?: number;
    borderColor?: string;
    gapWidth?: number;
  };
}

Examples​

File System​

<TreemapChart
  title="Disk Usage"
  data={[
    {
      name: 'Documents',
      children: [
        { name: 'PDFs', value: 500 },
        { name: 'Images', value: 300 },
        { name: 'Videos', value: 2000 },
      ],
    },
    {
      name: 'Applications',
      children: [
        { name: 'Development', value: 1500 },
        { name: 'Productivity', value: 800 },
      ],
    },
  ]}
/>

Budget Breakdown​

<TreemapChart
  title="Department Budget"
  data={[
    {
      name: 'Engineering',
      children: [
        { name: 'Salaries', value: 500000 },
        { name: 'Equipment', value: 100000 },
        { name: 'Training', value: 50000 },
      ],
    },
    {
      name: 'Marketing',
      children: [
        { name: 'Advertising', value: 200000 },
        { name: 'Events', value: 75000 },
      ],
    },
  ]}
/>

Accessibility​

  • Labels visible on larger rectangles
  • Tooltip provides full details
  • Color coding by parent category
On this page