Vue ChartsCone Funnel Series

A Funnel Series illustrates how a value changes during a process, with a line representing the value at each stage and filled areas denoting the change between them.

Simple Cone Funnel Copy Link

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

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

In this configuration:

• stageKey defines the stages which are used for the lines of the cone funnel.
• valueKey provides the numerical values which determine the width of line.

Horizontal Cone Funnel Copy Link

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

{
    direction: 'horizontal',
}

Customisation Copy Link

{
    fills: ['#5090DC', '#FFA03A', '#459D55'],
}

In this configuration:

• The fills for each drop off area are defined in the fills array.
• The Cone Funnel series is reversed by providing the data items in the reverse order.

API Reference Copy Link