Vue 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

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

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

{
    direction: 'horizontal',
}

Segmented Funnel

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

{
    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