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

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 the lines of the cone funnel.
• valueKey provides the numerical values which determine the width of line.

Horizontal Cone Funnel

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

{
    direction: 'horizontal',
}

Customisation

{
    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