Treemap

A treemap presents data hierarchically as nested rectangles. The size of each rectangle follows its measure value, so a treemap compares proportions within a hierarchy, for example, the share of product categories within each region.

Buckets

Sorting

The treemap places the rectangles at each level by size, largest first. With both viewBy and segmentBy set, it requests the data sorted by the viewBy attribute in ascending order, then by the measures in descending order, so the legend lists the viewBy values in ascending order. Treemap has no sortBy prop.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Limits

• A treemap can’t show negative values. If the data contains any, the chart shows an error and onError receives a NegativeValuesSdkError.
• A treemap renders up to 10,000 data points. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Treemap } from "@gooddata/sdk-ui-charts";

<Treemap
    measures={<measures>}
    viewBy={<attribute>}
    segmentBy={<attribute>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Treemap } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <Treemap
        measures={[Md.NrChecks]}
        viewBy={Md.LocationState}
        segmentBy={Md.LocationCity}
    />
</div>

Props