Funnel Chart

Description

Funnel Chart presents the phases of the process. It quickly shows the reduction of data in the sequence of steps. At each stage some users, events are lost. Funnel visualization is an easy way to identify the bottlenecks of the flow.

You can observe what happens in the following stages, identify problems at a glance, react and seal the leaks. Funnel Chart is usually used in the sales, marketing or business context.

Category

  • Part to whole
  • Comparison
  • Trend

Plot

The plot is a part of keen.io/charts package and can be used in React environment as standalone component.

API

Property Description Type Default
data Chart data Record<string, any> -
valueKey Key used to pick value property from data string “value”
labelSelector Name of data object property used to create labels on axis string -
layout Layout applied on chart bars enum[vertical, horizontal] “horizontal”
formatValues Function used to format step values (value: number) => HTMLElement Default number formatter
theme Theme used for chart styling Theme Keen Theme
svgDimensions SVG height and width Dimension “auto”
margins SVG margins Margins { top: 50, right: 20, bottom: 50, left: 40 }

Theme

List of theme properties supported by Funnel Chart widget.

Property Description Type
colors Colors applied on bars string[]
funnel.header Funnel header settings { backgroundColor: string}
funnel.header.badge Badge settings { enabled: boolean, backgroundColor: null, typography: Typography }
funnel.header.title Title settings { typography: Typography }
funnel.header.value Value settings { enabled: boolean, typography: Typography }
funnel.step Step settings { backgroundColor: string}

Composition

The amount of data for the initial step is treated as a 100% reference for the next steps. The succeeding parts show how the amount of the given property decreases down to the last phase.

Steps areas are calculated according to their percentage of the initial value. Wide part of the funnel is called base or head and as it narrows down it transforms to the neck.

Color

Remember that you can add meaning to your funnel with the proper colors. Don’t use one color or the colors that have almost the same for the entire chart. It will be just a plain set of data. Apply hues that are somehow connected to the stages or just clearly different shades of the same color.

Annotations

  • Use a funnel chart with the minimum three steps.
  • Use a funnel chart when the steps significantly change in size. If they are roughly the same size it means that your flow is quite good and maybe it is a good time to focus on details.

Playground