# Inverted Funnel

Inverted Funnel charts are a great way to track progress through a workflow with multiple steps. They can highlight how well a process is being followed and easily identify any bottlenecks.

The users can invert the funnel chart to see things from a different point of view. It widens at the bottom and narrows at the top pinpointing the various phases in a classified structure. This chart can be used to see the hierarchical structure of an organization or distribution process of fund/salary/profit etc.

## **Best Situations to Use a Column chart**

To display hierarchical pattern

**Example:** To categorize the administrative structure in an organization

## **Default Chart Image**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Fyi1LazXjjmjL9cpTnGjm%2Finvfunnel_default.png?alt=media&#x26;token=dd692ff4-b71e-4862-8a4d-d1606019f2cf" alt=""><figcaption></figcaption></figure>

## **Properties of the Inverted Funnel Chart**

<figure><img src="https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/SncwmnN4CtS8VClnnXFa/image.png" alt=""><figcaption></figcaption></figure>

### **General**

The user can change the height, width, top, left, chart type, column type & Line form. In this case, we have changed the chart type to Inverted & Identical Stack.

* **Component Name**: Assigns a unique identifier to the inverted funnel chart component. This field contains an auto-generated name indicating the sequence of the component in the dashboard.
* **Left**: Determines the horizontal position of the chart within the container.
* **Top**: Sets the vertical positioning of the chart.
* **Height**: Specifies the height of the funnel chart.
* **Width**: Defines the width of the chart.
* **Initial Visibility**: Controls whether the chart is visible upon initial load.
* **Max Button**: Allows the inclusion of a button to maximize the chart view.
* **Show Percentage**: Enables the display of percentage values on the chart.
* **Series Colors**: Customizes the colors for different series in the funnel chart.

<figure><img src="https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/sSfme8yZXDiXC7gL3v3k/image.png" alt=""><figcaption><p><em><strong>General Properties with Identical Stack Chart Type</strong></em></p></figcaption></figure>

### **Tooltip**

Tooltips enhance user interaction by displaying additional information about chart elements.

* **Show Tool Tip**: Enable this option to display tooltips for the chart series, providing descriptions or data insights.
  * Click the ***Show Tool Tip*** icon to access the ***Tool Tip Configuration*** window.
  * Select the ***Default*** option.
  * Click the ***Save*** option to display Tool Tip in the default display. ![](https://2748020991-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3b0OCsxHg64sEwjM1HIh%2Fuploads%2FcWWivuNU2lfsHTPFgkLe%2Fimage.png?alt=media\&token=81daa71d-250c-495e-b7c7-2de0da716305)
* **Background Color**: Choose a background color for the tooltip to enhance visibility and match your visual theme.
* **Opacity**: Adjust the tooltip's transparency to ensure it doesn't obstruct important chart elements while remaining readable.
* **Border Color**: Select a border color that complements the tooltip, ensuring clarity and contrast against the chart background.
* **Tooltip Font Size**: Customize the font size to maintain readability, adapting it to the overall chart presentation.
* **Box Width**: Define the width of the tooltip box to ensure it fits the content appropriately and maintains a neat appearance.
* **Precision**: Set the numerical precision for data values displayed in the tooltip, aiding in clearer data interpretation.
* **Highlighter**: Toggle the highlighter to emphasize specific data points on the chart, drawing user attention to crucial information.

&#x20;       ![](https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/nV1fpJKVheMlTALApqnj/image.png)

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> To use the Custom option for the Tool Tip configuration, please refer to the* [***Tooltip (Default & Custom)***](https://docs.bdb.ai/governed-dashboards-6/configurations/tooltip-default-and-custom) *page.*
{% endhint %}

### **Background**

* **Gradient Rotation**: Modify the angle of the gradient to achieve the desired effect.
* **Opacity**: Set the transparency level to balance visibility and aesthetics.
* **Gradient**: Choose and customize the gradient colors to match your theme.
  * Click the ***Gradient*** icon to access the ***Background gradient colors*** dialog box.
  * Click the ***Add Color*** option to add multiple colors.
  * Click the **Save** option to apply the selected background colors.  ![](https://2748020991-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3b0OCsxHg64sEwjM1HIh%2Fuploads%2FX8MsR79haIZdmhQRn9rU%2Fimage.png?alt=media\&token=093b5c73-4e3a-4f3d-8acf-d06dabcda6ee)
* **Border**: Add a border around the chart for a defined perimeter.
* **Border Color**: Alter the border color to complement or contrast with the chart.
* **Border Radius**: Round the corners of the chart border for a smoother look.
* **Shadow**: Enable shadows to create depth and a 3D-like effect.
* **Shadow Color**: Customize the shadow color to blend naturally with the chart.
* **Shadow Transparency**: Adjust the transparency level to control the intensity of the shadow effect.

&#x20;     ![](https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/CSy1r2l7RFlk5zRisQL1/image.png)

### **Title**

* **Show Title Box**: Enable or disable the display of the title box on the chart.
* **Title Box Color**: Choose the background color for the title box.
* **Show Title**: Enable or disable the display of the title text.
* **Title Bar Height**: Set the height of the title bar.
* **Description**: Add a description text below the title.
* **Font Color**: Select the color of the title text.
* **Font Size**: Specify the size of the title text.
* **Font Style**: Choose a Font style using the drop-down menu (e.g., italic or normal).
* **Font Weight**: Set the weight (boldness) of the font. The supported options are Normal, Bold, 300, 600, and 900.&#x20;
* **Font Family**: Choose the font family for the title text from the given choices.
* **Align**: Align the title text (e.g., left, center, right).
* **Text Decoration**: Apply text decorations (e.g., underline) to the title text.
* **Show Dataset Description**: Enable or disable the dataset description in the title.&#x20;

&#x20;      ![](https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/Nv0SqZVcbBfeF4LJdiCn/image.png)

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> By enabling the **Show Dataset Description** option the Title will get added from the mapped dataset.* &#x20;
{% endhint %}

### **Subtitle**&#x20;

* **Show Sub Title**: Enable or disable the display of the sub-title text.
* **Description**: Add a description text below the sub-title.
* **Font Color**: Select the color of the sub-title text.
* **Font Size**: Specify the size of the sub-title text.
* **Font Style**: Choose the font style for the Sub-title (e.g., italic or normal).
* **Font Weight**: Set the weight (boldness) of the font. The supported options are Normal, Bold, 300, 600, and 900.
* **Font Family**: Choose the font family for the sub-title text from the given choices.
* **Align**: Align the sub-title text (e.g., left, center, right).
* **Text Decoration**: Apply text decorations (e.g., underline) to the sub-title text.&#x20;

&#x20;      ![](https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/BpD8CA8wZTwQd07wCK2V/image.png)

### **Legend**

* **Show Legend**: Toggle the visibility of the chart legend.
* **Font Color**: Choose the font color for the legend text.
* **Font Weight**: Determine the weight (boldness) of the legend text.
* **Font Size**: Specify the size of the font for the legend text.
* **Font Family**: Select the font family for the legend text.
* **Font Style**: Choose the font style (e.g., italic) for the legend text.
* **Text Decoration**: Add text decorations (e.g., underline) to the legend text.
* **Hide on Load**: Determine if the legend should be hidden when the chart initially loads.

&#x20;     ![](https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/9AFi4A8lSJm7dVoDNwAY/image.png)

### **Formatter**

* **Unit**: Define the unit of measurement for the values displayed in the chart.
* **Precision**: Set the number of decimal places to display for numerical values.
* **Currency**: Format the numbers as a currency with the appropriate symbol.
* **Position**: Determine the position of the formatted value (e.g., before or after the number).
* **Number Formatter**: Apply a specific notation or style to the numbers (e.g., Indian, International).    &#x20;

&#x20;       ![](https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/V7KwOQVjb3WeafDBU2OZ/image.png)

### **Export Options**&#x20;

* **Enable Context Menu**: Activate a right-click context menu for quick access to export options in the preview mode of the chart.
* **Export Excel**: Save the chart data in an Excel file format (.xlsx).
* **Export CSV**: Export the chart data into a CSV file format (.csv).
* **Export JPEG**: Export the chart as a JPEG image (.jpg).
* **Export PNG**: Export the chart as a PNG image (.png).
* **Export PPT**: Export the chart to a PowerPoint presentation (.pptx).
* **Export PDF**: Export the chart as a PDF document (.pdf).
* **Show Print**: Include an option to print the chart directly.
* **Export Heading**: Add a custom heading to the exported file.
* **Export Sub Heading**: Add a custom subheading to the exported file.
* **Export File Name**: Specify the file name for the exported file/dashboard.
* **Global Export Type**: Define the default export format using the drop-down (e.g., Screenshot, Tabular). &#x20;

&#x20;      ![](https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/lQ7UprMMqdL6lSxwAMis/image.png)

The user can get the ***Export Context Menu*** from the preview mode to download the reports in different export formats.&#x20;

<figure><img src="https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/dgcasps9X2ANIfqZFStW/image.png" alt=""><figcaption></figcaption></figure>

## **Dataset  Series Properties**&#x20;

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FXH0vhMqteUIQfS8xdkL2%2Finvfunnel_dataset.png?alt=media\&token=f461211b-62ee-4da3-acab-16a818a30487)

## **Inverted Funnel Chart Variants**

#### **Inverted Chart**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FZl1iykkkXhwX0LoKyl2i%2Finvfunnel_preview.png?alt=media&#x26;token=f931e748-c176-41af-880b-718e8b8c576e" alt=""><figcaption></figcaption></figure>

#### **Identical Stack Chart**

​

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FmiYWMEQghf7YoJlagN2S%2Finvfunnel_identical%20stack.png?alt=media&#x26;token=8d76fbd6-7149-45bd-be84-34470a818283" alt=""><figcaption></figcaption></figure>

## Sample Data&#x20;

Download the given sample data and map it as mentioned below to plot your ***Inverted Funnel*** chart.&#x20;

* Use the ***Stage*** column as ***Category*** field, and ***Count*** column as ***Series** to plot data.*

{% file src="<https://content.gitbook.com/content/3b0OCsxHg64sEwjM1HIh/blobs/90d5k193pOqVAF9KXRTG/Sample%20Data_Inverted%20Funnel%20chart.xlsx>" %}