Funnel Chart

• Overview
• Modules
• Quick Start
• General Settings
• Special Settings
  • Head
  • Neck
  • Appearance
    • All Points
    • Individual Points
  • Labels
    • Connectors
    • Position
    • Overlapping
  • Labels and Tooltips (Text)
    • Tokens
    • Formatting Functions

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:

Modules

The Funnel chart requires adding the Core and Pyramid and Funnel modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-pyramid-funnel.min.js"></script>

Learn more: Modules.

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();

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

A head, or base, is the upper part of a Funnel, where the difference between areas is significant (in percentage terms) and is demonstrated by areas' size. To set the width of the head (in pixels or as a percentage), use the baseWidth() method:

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

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%");

Appearance

All Points

The appearance settings of a Funnel chart can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods:

• fill() to set the fill
• hatchFill() to set the hatch fill
• stroke() to set the stroke

Also, you can use some other methods from anychart.core.StateSettings.

In the sample below, there is a Funnel chart with appearance settings configured:

// configure the visual settings of the chart
chart.normal().fill("#004d39", 0.3);
chart.hovered().fill("#004d39", 0.1);
chart.selected().fill("#004d39", 0.5);
chart.hovered().hatchFill("forward-diagonal", "#004d39", 1, 15);
chart.selected().hatchFill("forward-diagonal", "#004d39", 1, 15);
chart.normal().stroke("white");
chart.hovered().stroke("white", 2);
chart.selected().stroke("white", 2);

Individual Points

If you use object notation to set the data, you can change the appearance (and some other settings) of individual points by adding special fields to your data:

// create data
var data = [
  {name: "Total Market", value: 232000},
  {name: "Prospects", value: 94480,
   normal:   {
             hatchFill: "backward-diagonal",
             stroke: "black"
             },
   hovered:  {
               fill: "lightGray",
               hatchFill: "backward-diagonal",
               stroke: "black"
             },
   selected: {
               fill: "white",
               hatchFill: "backward-diagonal",
               stroke: "black"
             }
  },
  {name: "Leads", value: 47390},
  {name: "Sales", value: 22181}
];

// create a chart and set the data
chart = anychart.funnel(data);

Labels

Labels are text or image elements that can be placed anywhere on any chart. This section explains how to adjust the connectors and position of labels and to allow or forbid overlapping. To learn how to modify the text of labels, see the Labels and Tooltips (Text) section of this article.

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.

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 the connectorLength() method 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);

Overlapping

Sometimes labels overlap each other. To allow or forbid overlapping, use the overlapMode() method. The code sample below demonstrates setting labels with overlapping allowed:

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

Labels and Tooltips (Text)

For text labels, font settings and text formatters are available. The same settings can be applied to tooltips - text boxes displayed when chart points are hovered over.

Tokens

To change the text of labels, combine the labels() and format() methods with tokens.

To configure tooltips, do the same with the tooltip() and format() methods.

Besides tokens that work with all chart types, there is a token that is specific to the Funnel - {%yPercentOfTotal}. It returns an element's percentage of the total.

Also, you can add a custom field to your data and use a custom token corresponding to it.

This sample shows how to work with tokens:

// create data
var data = [
  {name: "Total Market", value: 232000, custom_field: "info 1"},
  {name: "Prospects", value: 94480, custom_field: "info 2"},
  {name: "Leads", value: 47390, custom_field: "info 3"},
  {name: "Sales", value: 22181, custom_field: "info 4"}
];

// create a chart and set the data
var chart = anychart.funnel(data);

// configure labels
chart.labels().format("{%x}: {%yPercentOfTotal}%");

// configure tooltips
chart.tooltip().format("{%yPercentOfTotal}% ({%value})\n\n{%custom_field}");

Formatting Functions

To configure labels and tooltips, you can use formatting functions instead of tokens.

You can also add a custom field to your data and refer to it by using the getData() method.

In the sample below, functions modify the format of labels and tooltips depending on elements' percentages of the total, and a custom data field is used:

// create data
var data = [
  {name: "Total Market", value: 232000, custom_field: "info 1"},
  {name: "Prospects", value: 94480, custom_field: "info 2"},
  {name: "Leads", value: 47390, custom_field: "info 3"},
  {name: "Sales", value: 22181, custom_field: "info 4"}
];

// create a chart and set the data
var chart = anychart.funnel(data);

// enable HTML for labels and tooltips
chart.labels().useHtml(true);
chart.tooltip().useHtml(true);

// configure labels
chart.labels().format(function() {
  var percentOfTotal = (this.getData("value")*100)/this.getStat("sum");
  if (percentOfTotal > 50)
    return "<span style='color:#dd2c00;font-weight:bold'>" +
           this.x + ": " + percentOfTotal.toFixed(1) + "%</span>";
  return this.x + ": " + percentOfTotal.toFixed(1) + "%";
});

// configure tooltips
chart.tooltip().format(function() {
var percentOfTotal = (this.getData("value")*100)/this.getStat("sum");
  if (percentOfTotal > 50)
    return "<span style='font-size:18'>" +
           percentOfTotal.toFixed(1) + "% (" +
           this.value + ")</span><br><br>" +
           this.getData("custom_field");
  return percentOfTotal.toFixed(1) + "% (" + this.value +
         ")<br><br>" + this.getData("custom_field");
});