Funnel chart

A funnel chart shows data as parts of a funnel. Funnel charts can be segmented by either multiple measures or a single attribute. A funnel chart displays values as progressively decreasing proportions.

Buckets

Sorting

By default, the funnel chart sorts the segments by value in descending order, so the largest value sits in the broadest part of the funnel. FunnelChart has a sortBy prop. For the segments to follow sortBy, 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.

Limits

• A funnel chart can’t show negative values. If the data contains any, the chart shows an error and onError receives a NegativeValuesSdkError.
• A funnel 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.
• The funnel chart leaves out empty values and leading zero values.

Structure

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

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

Example

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

const style = { height: 300 };

<div style={style}>
    <FunnelChart
        measures={[Md.$FranchiseFeesAdRoyalty, Md.$FranchiseFeesInitialFranchiseFee, Md.$FranchiseFeesOngoingRoyalty]}
    />
</div>

Props