Ripl

Appearance

Treemap Chart ​

The Treemap Chart tiles a rectangle with smaller rectangles whose areas are proportional to their values. Reach for it when a total breaks down into many parts and every part has to stay on screen — market share, disk usage, budget allocation — where a pie chart would collapse the small slices into slivers. key, value and label bind the cells, colorBy groups their colors, and gap, borderRadius and format set the finish. Cells are labeled and colored automatically, and the layout re-tiles with an animation when the data changes. Point it at a Canvas, SVG or terminal context and nothing else changes.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

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

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

Data Format ​

Each item is one rectangle, with a key, a numeric value that sets its area, and a display label:

ts
const data = [
    {
        id: 'chrome',
        name: 'Chrome',
        share: 64.5,
    },
    {
        id: 'safari',
        name: 'Safari',
        share: 18.8,
    },
    {
        id: 'edge',
        name: 'Edge',
        share: 5.2,
    },
];

Rectangles are laid out largest-first, so the ordering of the array does not matter.

Options ​

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

ts
createTreemapChart('#container', {
    data,
    key: 'id',
    value: 'size',
    label: 'name',
    colorBy: 'group',
    // Gap between cells, in pixels.
    gap: 2,
    borderRadius: 4,
    legend: { position: 'bottom' },
    format: 'number',
});

Events ​

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

ts
// Emitted when a cell is clicked.
chart.on('nodeclick', event => console.log(event.data)); // event.data: TreemapChartNodeEvent
// Emitted when the pointer enters a cell.
chart.on('nodeenter', event => console.log(event.data)); // event.data: TreemapChartNodeEvent
// Emitted when the pointer leaves a cell.
chart.on('nodeleave', event => console.log(event.data)); // event.data: TreemapChartNodeEvent