Still have questions?
Contact support

Funnel Chart

Overview

Funnel Charts are so-called Accumulation Charts and they show percentage ratio. Funnel Charts are often used to represent stages in a sales process and show the amount of potential revenue for each stage. This type of chart can also be useful in identifying potential problem areas in an organization’s sales processes.

This article explains how to create a basic Funnel Chart as well as configure settings that are specific to the type. The table below gives a brief overview of the Funnel Chart's characteristics:

API
Classanychart.charts.Funnel
DATA
Data Fieldsname, value
Multiple SeriesNO
OPTIONS
StackedN/A
VerticalN/A
3DN/A
Error BarsN/A
SUPPORTED CHART PLOTS
PolarN/A
RadarN/A
ScatterN/A
StockN/A
RELATED TYPES
Pie
Pyramid
Stacked
SEE ALSO
Chartopedia: Funnel Chart
General Settings

Quick Start

To create a Funnel Chart, use the anychart.funnel() chart constructor. If you pass the data to this chart constructor, it will create a Funnel series. Another way to create the Funnel Chart is to call the funnel() method. Funnel Charts are single-series, like Pie or Pyramid Charts.

The following sample demonstrates how a basic Funnel Chart is created:

var data = [
  ["Total Market", 232000],
  ["Prospects", 94480],
  ["Leads", 47390],
  ["Sales", 22181]
];

chart = anychart.funnel(data);

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

JsFiddle Playground

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Area chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings

Head (or base) is the upper part of a Funnel, where the difference between areas is significant (in percentage value) and is demonstrated by areas' size. To adjust the width of the Funnel Head, use the baseWidth() method.

// set the base width
chart.baseWidth("50%");

JsFiddle Playground

Neck

The neck is a lower part of a Funnel. All values under the neck look like a Stacked Column, which means that the difference between them is not really important. The default value of the Neck height is 25%. The neckWidth() and width() will help to adjust the neck width, and the neckHeight() method is used for setting the Funnel Chart neck's height.

// adjust the funnels neck
chart.neckWidth("20%");
chart.neckHeight("35%");

JsFiddle Playground

Appearance

Here is a full list of methods used to configure visual settings that are available for the Funnel Chart:

You can learn more from the Appearance Settings article.

In the sample below, there is a Funnel Chart with some of the appearance settings configured:

// adjust appearance
chart.fill("#DEB887");
chart.hoverFill("#FFEBCD");
chart.selectFill("#A0522D");
chart.hatchFill("forwardDiagonal");
chart.hoverHatchFill("#backwardDiagonal");
chart.selectHatchFill("diagonalCross");
chart.stroke("#fff");
chart.hoverStroke("#fff", 2);
chart.selectStroke("fff", 4);

JsFiddle Playground

Note that when you set colors through the methods, it is not possible to set different colors to the points. In this case, use the dataset, so you can adjust any settings you need for each point particularly.

var data = [
  {name: "Total Market", value: 232000},
  {name: "Prospects", value: 94480, fill: "#1976d2", selectFill: "#1976d2", hatchFill: "backwardDiagonal", hoverHatchFill:"forwardDiagonal", selectHatchFill: "diagonalCross", stroke: "#455a64"},
  {name: "Leads", value: 47390, fill: "#87CEFA", selectFill: "#00BFFF"},
  {name: "Sales", value: 22181, fill: "#B0E0E6", selectFill: "#87CEFA"}
];

JsFiddle Playground

Labels

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

Connectors

The line that joins a label with a particular funnel point is called a connector. Tune connectors' visual appearance with the connectorStroke() method.

chart.connectorStroke({
  // set thickness of the connectors
  thickness: 2,
  // set color of the connectors
  color: "#444",
  // set dashed connectors. Dashes are 4px and gaps are 2px
  dash: "4 2"
});

Find more information about lines in Line Settings tutorial. Here is the funnel with tuned connectors.

JsFiddle Playground

Note: to hide connectors, set null value for connectorStroke() method.

Position

Position of the labels is controlled by the position() method. There are five acceptable values for funnel labels:

  • inside - place labels inside each funnel point.
  • outsideLeftInColumn - place labels to the left of the funnel and align them in a column.
  • outsideRightInColumn - place labels to the right of the funnel and align them in a column.
  • outsideLeft - place labels to the left of the funnel.
  • outsideRight - place labels to the right of the funnel.

If you use outsideLeft or outsideRight, it becomes possible to adjust length of labels connectors. Use connectorLength() parameter to set custom length for all labels connectors.

// place labels to the right
var labels = chart.labels();
labels.position("outsideRight");

// set 45px connectors length
chart.connectorLength(45);

JsFiddle Playground

The content of the labels is adjusted with the format() method. Read more about text formatting in the Labels Text Formatting article.

Overlapping

After adjusting content of the funnel labels some of them can overlap others. To control or prevent overlapping use the overlapMode() method. The code sample below demonstrates setting labels with overlapping allowed.

// allow labels overlapping
chart.overlapMode("allowOverlap");

Tooltips

A Tooltip is a text box displayed when a chart point is hovered. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.