Funnel Charts

Overview

ZingChart supports two funnel chart types:

  • Vertical
  • Horizontal

Note: See our Funnel Chart Gallery for inspiration on all the different funnel chart possibilities.

Funnel Chart Types

ZingChart offers two different funnel chart types: a vertical funnel chart and a horizontal funnel chart.

Vertical Funnel Chart

To create a standard (vertical) funnel chart, add a type attribute, and set the value to funnel or vfunnel. Without further modification, a funnel chart with five stages or levels looks like this:

{
  type: "funnel"
}
https://app.zingsoft.com/demos/embed/9QCK3HY8
https://app.zingsoft.com/demos/embed/9QCK3HY8

Horizontal Funnel Chart

To create a horizontal funnel chart, add a type attribute, and set the value to hfunnel.

{
  type: "hfunnel"
}
https://app.zingsoft.com/demos/embed/1XDES2PO
https://app.zingsoft.com/demos/embed/1XDES2PO

Data

Our funnel charts support single or multiple funnels per chart. Each values array corresponds to a funnel chart step, so you'll provide your data in the following format:

Single Funnel

{ values: [step1]},
{ values: [step2]},
...,
{ values: [stepN]}

Multiple Funnels

{ values: [funnel1-step1, funnel2-step1, ..., funnelN-step1]},
{ values: [funnel1-step2, funnel2-step2, ..., funnelN-step2]},
...,
{ values: [funnel1-stepN, funnel2-stepN, ..., funnelN-stepN]}

Null or Zero Values

This chart type supports null or zero values for missing or unavailable funnel steps, or to accommodate for different size funnels in a single chart.

{
  type: "funnel",
  series: [
    { values: [101]},
    { values: [90, 99]},
    { values: [60, 77, 59]},
    { values: [30, 55, 34]},
    { values: [15, 33, 29]}
  ]
}
https://app.zingsoft.com/demos/embed/CUKE4I3R
https://app.zingsoft.com/demos/embed/CUKE4I3R

Chart-Specific Properties

Once you have your basic funnel chart, you can modify the funnel tip and/or incorporate arrows to illustrate movement between your funnels.

Funnel Tip Modification

You can modify the appearance of your funnel tip, which appears pointed by default. In your plot object, add a min-exitattribute. You can provide a pixel value, which will correspond to the width of your funnel base, or you can provide a percentage (0%-100%) or decimal (between 0-1) value, which is sized in relation to the funnel plot area.

{
  type: "funnel",
  plot: {
    'min-exit': "15%"   //To adjust the appearance of your funnel tip.
  }
}
https://app.zingsoft.com/demos/embed/TJAHAAA8
https://app.zingsoft.com/demos/embed/TJAHAAA8

Entry and Exit Arrows

You can use arrows to indicate external inputs or outputs at specific stages or steps on your funnel chart. We have two types of arrows: entry arrows, which appear on the left side of the funnel, and exit arrows, which appear on the right side of the funnel. To create them, you need to keep in mind how data is formatted with this chart type:

{
  series: [
    {
      values: [funnel1-step1, funnel2-step1, ..., funnelN-step1
    },
    { 
      values: [funnel1-step2, funnel2-step2, ..., funnelN-step2]
    },
    ...,
    { 
      values: [funnel1-stepN, funnel2-stepN, ..., funnelN-stepN]
    }
  ]
}

Each values array corresponds to a funnel step, whether your chart has single or multiple funnels. The entry and/or exit objects are added to the applicable series object, and then you'll specify which of your funnels (values array) the arrow will be applied to, and what text (labels array) you want displayed with it. For example:

{
  series: [
    {
      values: [funnel1-step1, funnel2-step1, ..., funnelN-step1],   //Series data.
      entry: {      //or "exit" object
        values: [funnel1, funnel2, ..., funnelN], //Specify whether an arrow applies (null or 1).
        labels: [ "text1", "text2", ..., "textN" ]  //Provide text, if applicable.
      }
    }  
  ]
}

See the funnel chart below to understand how the arrows correspond to the funnel steps. To add multiple arrows to a single funnel step, create an entry or exit array in lieu of an object. In the array, add an object for each arrow. See the example array in Step 4 below.

Note: You can increase the padding around your text by adding a padding attribute with a pixel value.

{
  series: [
    {   //Step 1
      values: [101],
      entry: {
        values: [1],
        labels: [ "Start" ],
        padding: 4
      }
    },
    {   //Step 2
      values: [90,99],
      exit: {
        values: [1],
        labels: [ "Next" ]
      }
    },
    {   //Step 3
      values: [60,77,59],
      entry: {
        values: [null,1],
        labels: [null, "Surplus" ]
      }
    },
    {   //Step 4
      values: [30,55,34,30],
      entry: [  //Array, with two arrow objects inside.
        {
          values: [null,null,1],
          labels: [null,null, "Carryover" ]
        },
        {
          values: [null,null,1],
          labels: [null,null, "New" ]
        }
      ],
      exit: {
        values: [null,null,1],
        labels: [null,null, "Remaining" ]
      }
    },
    {   //Step 5
      values: [15,33,29,11],
      exit: {
        values: [null,null,null,1],
        labels: [null,null,null, "End" ]
      }
    }
  ]
}
https://app.zingsoft.com/demos/embed/ZCKOQ4AT
https://app.zingsoft.com/demos/embed/ZCKOQ4AT

Entry and Exit Space

The space of in funnel sections can be modified with two attributes. The spaceEntry attribute modifies the space before funnel sections. To modify the width of the after funnel sections, use the spaceExit attribute.

{
  type: 'funnel',
  plot: {
    spaceEntry: 1,  // default is 0.1
    spaceExit: 1,   // default is 0.1
  },
}
https://app.zingsoft.com/demos/embed/ILUFH6HV
https://app.zingsoft.com/demos/embed/ILUFH6HV

Start Width

The startWidth attribute determines how the funnels are scaled when plotting multiple funnels. When set to 'dynamic', the funnels are scaled relative to the maximum. On the other hand, 'static' results in funnels starting with the same size.

{
  type: 'funnel',
  plot: {
    startWidth: 'static', // default is 'dynamic'
  }
}
https://app.zingsoft.com/demos/embed/PXWG6HBO
https://app.zingsoft.com/demos/embed/PXWG6HBO

Further Customization

Further customize your funnel chart by configuring your scales, styling your funnel steps (colors, borders, hover states), and incorporating value boxes and tooltips.

Scale Configuration

Our funnel charts are set against an x/y-axis scale, and can be configured accordingly. You can change the placement of your scale(s), add scale labels, and style your text, axis lines, tick marks, guides, and more.

Note: See our Configuring Your Scales Tutorial for more information on scales.

Note: The x-axis is not visible by default. To make it visible, create a scale-x object. Add a visible attribute, and set the value to true. The same scale configuration options apply.

{
  type: "funnel",
  'scale-y': {
    placement: "opposite",
    labels: [ "Site Visits", "Trial Downloads", "Quote Requests", "Sales", "Renewals" ],
    item: {
      'font-color': "#999999",
      'font-family': "Georgia"
    },
    guide: {
      'line-color': "none",
      items: [
        {'background-color': "#fff"},
        {'background-color': "#e5faff"},
        {'background-color': "#b3efff"},
        {'background-color': "#66e0ff"},
        {'background-color': "#00ccff"}
      ]
    }
  },
  plot: {
    'min-exit': "10%"
  }
}
https://app.zingsoft.com/demos/embed/325L7V14
https://app.zingsoft.com/demos/embed/325L7V14

Styling

You can style the background colors, borders, and hover states of your funnel steps. To make global changes, place your styling attributes in the plot object. For local changes, place the attributes in the applicable series object. Commonly used styling attributes include: background-color, border-color, and border-width.

To specify how a step appears when a user hovers over it, create a hover-state object. Place the styling attributes you want applied inside the object.

Note: For more styling options, see our Plot/Series JSON Attributes/Syntax page.

{
  plot: {// global changes
    'min-exit': "10%",
    'hover-state': {
      'background-color': "purple",
      'border-color': "gray",
      'border-width': 3,
      'line-style': "dashdot"
    }
  },
  series: [
    {
      values: [101],
      'background-color': "red"
    },
    {
      values: [90],
      'background-color': "orange"
    }
  ]
}
https://app.zingsoft.com/demos/embed/YK325JYL
https://app.zingsoft.com/demos/embed/YK325JYL

Value Boxes

To add value boxes to your funnel chart, create a value-box object within the plot object. You can specify what text and/or tokens to display with the text attribute. Commonly used tokens with this chart type include: %v (node value), %t (plot text), %npv (percentage of the current node value relative to the sum of all nodes), or %output-percent-value (percentage of the current node value relative to the previous node value).

With the placement attribute, your value options are: auto/in (default), top, bottom, left, right, left-out, and right-out.

Note: Read more on tokens with our ZingChart Tokens page. See the Value Boxes JSON Attributes/Syntax page for more attribute options.

{
  plot: {
    'value-box': {
      text: "%v",
      placement: "left-out", //"auto"/"in" (default), "top", "bottom", "left", "right", "left-out", or "right-out"
      'font-color': "gray",
      'font-family': "Georgia",
      'font-size': 12,
      'font-weight': "normal"
    }
  }
}
https://app.zingsoft.com/demos/embed/M22DXSSM
https://app.zingsoft.com/demos/embed/M22DXSSM

Tooltips

Tooltips appear when you hover over a funnel step. You can specify what text and/or tokens to display and incorporate custom styling with a tooltip object.

Use the text attribute to provide your tooltip text. You can use standard tokens such as %v(to show funnel step values) and %t (to show funnel step text). You can also use the following percentage tokens: %node-percent-value (to show the percentage of the value relative to the sum of all values) and %output-percent-value (to show the percentage of the current value relative to the previous value).

For tooltip styling, available attributes include font-color, font-family, font-size, background-color, and so on.

Note: Read more on tokens with our ZingChart Tokens page. See the Tooltips JSON Attributes/Syntax page for more stylingattribute options.

https://app.zingsoft.com/demos/embed/X6FPYULG
https://app.zingsoft.com/demos/embed/X6FPYULG
{
  plot: {
    tooltip: {
      text: "Value: %v<br>Text: %t<br>Percentage (relative to sum of all values): %node-percent-value%<br>Percentage (relative to previous node): %output-percent-value%",
      'font-family': "Georgia",
      'font-size': 12
    }
  }
}