Pyramid chart

A pyramid chart displays values as proportional segments in a triangular shape, showing hierarchical structures and relative proportions. Pyramid charts are typically used for displaying demographic data, market segmentation, organizational structures, or workflows.

Buckets

For code samples of both setups, see Usage patterns.

Sorting

With viewBy set, the pyramid chart sorts the segments by value in descending order. With several measures and no viewBy, the segments keep the order of measures. PyramidChart has a sortBy prop. For the segments to follow sortBy when viewBy is set, also set enableChartSorting: true in config. Otherwise, the chart re-sorts them by value.

Configuration

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

The following example shows the config structure with sample values for pyramid charts:

import type { IChartConfig } from "@gooddata/sdk-ui-charts";

const config: IChartConfig = {
    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "02"
        }
    }],
    legend: {
        enabled: true,
        position: "top",
    },
    dataLabels: {
        visible: "auto"
    },
    separators: {
        thousand: ",",
        decimal: "."
    }
};

Limits

• A pyramid chart can’t show negative values. If the data contains any, the chart shows an error and onError receives a NegativeValuesSdkError.
• A pyramid chart renders up to 10,000 segments. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• viewBy works only with a single measure. With viewBy and more than one measure, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError.
• Pyramid charts are easiest to read with a small number of segments, typically three to ten.

Usage patterns

Single measure with a viewBy attribute

When using a single measure with a viewBy attribute, each attribute value creates a segment in the pyramid:

<PyramidChart
    measures={[Md.$Revenue]}
    viewBy={Md.Region}
/>

Multiple measures

When using multiple measures, each measure creates a segment in the pyramid. The viewBy attribute cannot be used in this case:

<PyramidChart
    measures={[Md.$Revenue, Md.$Profit, Md.$Costs]}
/>

Structure

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

<PyramidChart
    measures={<measures>}
    config={<chart-config>}
    …
/>

Example

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

const style = { height: 300 };

<div style={style}>
    <PyramidChart
        measures={[Md.$TotalSales]}
        viewBy={Md.Product.Name}
    />
</div>

Props