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.

Funnel Chart Component


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



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

const style = { height: 300 };

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


measurestrueIMeasure[]An array of measure definitions
viewByfalseIAttributeThe attribute definition
filtersfalseIFilter[]An array of filter definitions
sortByfalseISortItem[]An array of sort definitions
configfalseIChartConfigThe chart configuration object
backendfalseIAnalyticalBackendThe object with the configuration related to communication with the backend and access to analytical workspaces
workspacefalsestringThe workspace ID
localefalsestringThe localization of the chart. Defaults to en-US.
drillableItemsfalseIDrillableItem[]An array of points and attribute values to be drillable
ErrorComponentfalseComponentA component to be rendered if this component is in error state
LoadingComponentfalseComponentA component to be rendered if this component is in loading state
onErrorfalseFunctionA callback when the component updates its error state
onExportReadyfalseFunctionA callback when the component is ready for exporting its data
onLoadingChangedfalseFunctionA callback when the component updates its loading state
onDrillfalseFunctionA callback when a drill is triggered on the component

The following example shows the supported config structure with sample values. For the description of the individual options, see ChartConfig.

    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",
        percentsVisible: true
    separators: {
        thousand: ",",
        decimal: "."