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.
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.
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.
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.
You can learn more from the Appearance Settings article.
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.
The line that joins a label with a particular funnel point is called a connector. Tune connectors' visual appearance with the connectorStroke() method.
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.
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.
The content of the labels is adjusted with the format() method. Read more about text formatting in the Labels Text Formatting article.
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.
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.