Treemap Chart

The Treemap Chart displays hierarchical data as nested rectangles, where each rectangle's area is proportional to its value. It's great for visualizing how a total breaks down into parts — market share, disk usage, budget allocation, etc. Cells are labeled, automatically colored, and animate smoothly on data changes. Configurable gaps and rounded corners keep the layout clean.

NOTE

For the full API, see the Charts API Reference.

Example

Usage

import {
    createTreemapChart,
} from '@ripl/charts';

const chart = createTreemapChart('#container', {
    data: [...],
    key: 'name',
    value: 'value',
    label: 'name',
});

Options

• data — The data array
• key — Unique key accessor
• value — Value accessor (determines rectangle area)
• label — Label accessor (displayed inside cells)
• color — Optional color accessor
• gap — Gap between cells in pixels (default 3)
• borderRadius — Cell corner radius (default 4)