Angular ChartsFunnel Series

A Funnel Series illustrates how a value changes during a process, with bar widths representing the value at each stage and drop-offs denoting the change between them.

Simple Funnel Copy Link

To create a Funnel Series, use the funnel series type.

series: [
    {
        type: 'funnel',
        stageKey: 'group',
        valueKey: 'value',
    },
];

In this configuration:

• stageKey defines the stages which are used for the bars of the funnel.
• valueKey provides the numerical values which determine the width of each bar.

Horizontal Funnel Copy Link

To create a horizontal Funnel Series, set the direction to horizontal.

direction: 'horizontal';

Segmented Funnel Copy Link

A segmented funnel does not draw the drop offs between the stages.

To disable the drop offs, set enabled to false in the dropOff configuration.

dropOff: {
    enabled: false,
}

Customisation Copy Link

fills: ['#5090DC', '#FFA03A', '#459D55', '#34BFE1'];

In this configuration:

• The fills for each stage are defined in the fills array.
• The drop offs use an opacity of the same fills. This can be changed in the drop off options.
• The Funnel Series is reversed by providing the data items in the reverse order.

API Reference Copy Link