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 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