Blog Help & Support Contact About Login

 Show Nav

JavaScript Funnel Charts

Overview

Funnel charts are a useful chart type for illustrating progression, movement, or change in a sales or business pipeline. The chart can be vertically or horizontally oriented, and single or multiple funnels can be used to display the different stages and steps. We provide the flexibility to modify the funnel tip (pointed or flat), incorporate entry or exit arrows to show movement between different funnels, configure X/Y-axis scales, and add custom styling and tooltips. Our ZingChart Gallery contains several funnel charts as examples.

Funnel Chart Types

ZingChart offers two different funnel chart types: a vertical funnel chart and a horizontal funnel chart. You can modify the tip portion of the funnel using the "min-exit" attribute and/or add entry/exit arrows using "entry" or "exit" objects. Both are discussed in the Chart-Specific Properties section below.

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:

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "funnel",   //or "vfunnel"
  "series": [
    {"values": [101]},
    {"values": [90]},
    {"values": [60]},
    {"values": [30]},
    {"values": [15]}
  ]
}

Horizontal Funnel Chart

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "hfunnel",
  "series": [
    {"values": [101]},
    {"values": [90]},
    {"values": [60]},
    {"values": [30]},
    {"values": [15]}
  ]
}

Series Data

Our funnel charts support single or multiple funnels per chart. Each "values" array corresponds to a funnel chart step, and 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]}

Note: 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "funnel",
  "series": [
    {"values": [101]},
    {"values": [90, 99]},
    {"values": [60, 77, 59]},
    {"values": [30, 55, 34]},
    {"values": [15, 33, 29]}
  ]
}

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-exit" attribute. 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "funnel",
  "plot": {
    "min-exit": "15%"   //To adjust the appearance of your funnel tip.
  },
  "series": [
    {"values": [101]},
    {"values": [90]},
    {"values": [60]},
    {"values": [30]},
    {"values": [15]}
  ]
}

Entry and Exit Arrows

You can use arrows to indicate external inputs or outputs at specific stages or steps on your funnel chart. When working with multiple funnels, entry and exit arrows may be especially useful for showing the relationship and movement between them. 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:

{"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 the arrow will be applied to ("values" array), and what text you want displayed with it ("labels" array). For example:

{
  "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.

Note: 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 with a "padding" attribute. Provide a pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "funnel",
  "scale-x": {
    "visible": true,
    "labels": ["Q1","Q2","Q3","Q4"],
    "placement": "opposite",
    "offset-start": 50
  },
  "plot": {
    "min-exit": "15%"
  },
  "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"]
      }
    }
  ]
}

Further Customization

Further customize your funnel chart. The following sections explain how to configure your scales, style your funnel steps (colors, borders, hover states), and incorporate 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. See our Configuring Your Scales Tutorial for further information.

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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%"
  },
  "series": [
    {"values": [101]},
    {"values": [90]},
    {"values": [60]},
    {"values": [30]},
    {"values": [15]}
  ]
}

Funnel 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. For more styling options, see our Plot/Series JSON Attributes/Syntax page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "funnel",
  "scale-y": {
    "placement": "opposite",
    "labels": ["Site Visits", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
    "item": {
      "font-color": "#999999",
      "font-family": "Georgia"
    }
  },
  "plot": {
    "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"
    }, 
    {
      "values": [60],
      "background-color": "yellow"
    }, 
    {
      "values": [30],
      "background-color": "green"
    }, 
    {
      "values": [15],
      "background-color": "blue"
    }
  ]
}

Value Boxes

To add value boxes to your funnel chart, create a "value-box" object. Place it in 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, %t, %node-percent-value, or %output-percent-value. (Read more on tokens at our ZingChart Tokens page.) With the "placement" attribute, your value options are "auto"/"in" (default), "top", "bottom", "left", "right", "left-out", and "right-out". See the Value Boxes JSON Attributes/Syntax page for more attribute options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "funnel",
  "scale-y": {
    "placement": "opposite",
    "labels": ["Site Visits", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
    "item": {
      "font-color": "#999999",
      "font-family": "Georgia"
    }
  },
  "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"

    },
    "min-exit": "10%",
    "hover-state": {
      "background-color": "purple",
      "border-color": "gray",
      "border-width": 3,
      "line-style": "dashdot"
    }
  },
  "series": [
    {
      "values": [101],
      "text": "Site Visits",
      "background-color": "red"
    }, 
    {
      "values": [90],
      "text": "Trial Downloads",
      "background-color": "orange"
    }, 
    {
      "values": [60],
      "text": "Quote Requests",
      "background-color": "yellow"
    }, 
    {
      "values": [30],
      "text": "Sales",
      "background-color": "green"
    }, 
    {
      "values": [15],
      "text": "Renewals",
      "background-color": "blue"
    }
  ]
}

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). See the ZingChart Tokens page for more on tokens. For tooltip styling, available attributes include "font-color", "font-family", "font-size", "background-color", and so on. See the Tooltips JSON Attributes/Syntax page for more attribute options.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "funnel",
  "scale-y": {
    "placement": "opposite",
    "labels": ["Site Visits", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
    "item": {
      "font-color": "#999999",
      "font-family": "Georgia"
    }
  },
  "plot": {
    "value-box": {
      "text": "%v",
      "placement": "in",
      "font-color": "gray",
      "font-family": "Georgia",
      "font-size": 12,
      "font-weight": "normal"
    },
    "min-exit": "10%",
    "hover-state": {
      "background-color": "purple",
      "border-color": "gray",
      "border-width": 3,
      "line-style": "dashdot"
    },
    "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
    }
  },
  "series": [
    {
      "values": [101],
      "text": "Site Visits",
      "background-color": "red"
    }, 
    {
      "values": [90],
      "text": "Trial Downloads",
      "background-color": "orange"
    }, 
    {
      "values": [60],
      "text": "Quote Requests",
      "background-color": "yellow"
    }, 
    {
      "values": [30],
      "text": "Sales",
      "background-color": "green"
    }, 
    {
      "values": [15],
      "text": "Renewals",
      "background-color": "blue"
    }
  ]
}

Summary

Got a question about how funnel charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.