--- url: https://gudhub.com/docs/gh-elements/funnel-chart/ title: "Funnel Charts\n #" description: "Funnel Charts is a gh element that allows to visualize the calculated data in the form of the funnel chart. It has its own calculation functions. You also can c" lang: uk updated: 2026-09-12T01:26:18.982Z --- # Funnel Charts [#](https://gudhub.com/docs/gh-elements/funnel-chart/#funnel-charts) **Funnel Charts** is a gh-element that allows to visualize the calculated data in the form of the funnel chart. It has its own calculation functions. You also can customize it as you wish. ## Functional Characteristics [#](https://gudhub.com/docs/gh-elements/funnel-chart/#functional-characteristics) The purpose of this element is similar to the simple funnel charts. That is, the current gh-element is used to visualize some processes with data such as for recruitment or sales. ## Value Format [#](https://gudhub.com/docs/gh-elements/funnel-chart/#value-format) This element does not have field value. ## Element Options [#](https://gudhub.com/docs/gh-elements/funnel-chart/#element-options) The element has three groups of settings. One of them is responsible only for adjusting the appearance of the graphs, while the others are important for the operation of the element itself. ### Field And Design Settings [#](https://gudhub.com/docs/gh-elements/funnel-chart/#field-and-design-settings) The first block of settings is separated on two groups. The first one contains [standard field settings](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/) and one important additional option. The design settings are not mandatory, but they help you customizing charts. ![Settings of funnel chart field and design](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/funnel-chart-field-design-settings.jpg "Funnel chart field and design settings") | Name | Description | | :-- | :-- | | Application | allows to select the source application; [details...](#application) | | Keep | allows to select the side of the cases displaying; [details...](#keep) | | Gap | allows to set the distance between trapeziums; [details...](#gap) | | Top width | allows to set the width of the trapezium top; [details...](#top-width) | | Bottom width | allows to set the width of the trapezium bottom; [details...](#bottom-width) | | Legend | allows to display the legend for the chart cases; [details...](#legend) | | Axis values | allows to display the Y axis values; [details...](#axis-values) | | Tooltips | allows to display tooltips; [details...](#tooltips) | | Values on chart | allows to display values on the chart; [details...](#values-on-chart) | #### **Application** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#application) This is the application from which the fields will be taken for calculations of funnel chart areas. #### **Keep** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#keep) This function allows to determine where the funnel area will be located: - Auto (center) - Left - Right #### **Gap** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#gap) The gap is s distance between funnels areas. #### **Top Width** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#top-width) This is a setting that allows you to adjust the width of the areas at the top of the chart. #### **Bottom Width** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#bottom-width) The current settings allows you to set the width of the chart bottom. #### **Legend** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#legend) Legend is a list of existing area marks in the upper left conner. They contains name and color of the certain funnel area. Their order is the same as the order of the cases in [Case Settings](#cases-settings). In addition, clicking on these labels allows you to show and hide the corresponding area. #### **Axis Values** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#axis-values) This is the vertical axis on which the calculated values of areas are displayed. #### **Tooltips** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#tooltips) These are pop-ups that appear when you hover your cursor over the certain area. The color of the funnel area, the name and the calculated value are displayed in the tooltips. #### **Values On Chart** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#values-on-chart) The last function allows you to determine whether the calculated values will be displayed in the corresponding areas. ### Cases Settings [#](https://gudhub.com/docs/gh-elements/funnel-chart/#cases-settings) The funnel chart is separated on the areas which show the certain data. That data is the result of the calculation of the selected fields. Cases Settings allows to configure the appearance of the areas, the type of calculation, and fields that will be used for it. ![Settings of funnel chart cases](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/funnel-chart-cases-settings.jpg "Funnel chart cases settings") | Name | Description | | :-- | :-- | | Name | allows to enter the name of the case; [details...](#name) | | Color | allows to select the color of the case area; [details...](#color) | | Field calculate | allows to select the field by which the value of the case is calculated; [details...](#field-calculate) | | Aggregation | allows to select the type of the case value; [details...](#aggregation) | | Conditions | allows to add filters that determine which items will be used in the current case; [details...](#conditions) | | Edit | allows to edit and delete cases; [details...](#edit) | #### **Name** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#name) This is the name of the the certain funnel area. #### **Color** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#color) This color is the selected color of the funnel area. #### **Field Calculate** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#field-calculate) This field by which the area will be calculated. #### **Aggregation** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#aggregation) Due to this function you can select the type of the calculation. There are only two options: - Sum - Count #### **Conditions** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#conditions) The conditions are responsible for filtering out the items. Namely, they determine which elements will be used to calculate the current area using filters. #### **Edit** [#](https://gudhub.com/docs/gh-elements/funnel-chart/#edit) This column contains two buttons for each of area. One of them allows you to edit a case, the other allows you to delete it. ## Element Style [#](https://gudhub.com/docs/gh-elements/funnel-chart/#element-style) The funnel chart has only [standard settings](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/) that customize its style. Also his [interpretation](#interpretation) has not many variation. ![Style of funnel chart element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/funnel-chart-element-style.jpg "Funnel Chart element style") ## Data Model [#](https://gudhub.com/docs/gh-elements/funnel-chart/#data-model) The element data model contains all values of its settings: Copy ```json { "data_model": { "app_id": "28827", "calculate_type": "sum", "charts_option": [{ "aggregation": "count", "color": "#2d4a84", "field_id_calc": "680004", "filters_list": [], "name": "sfd" }], "field_for_sorting": "", "filters_list": [], "height_charts": 400, "interpretation": [], "settings": { "axisValues": 1, "bottomWidth": "15", "gap": "45", "keep": "left", "legend": 1, "tooltips": 1, "topWidth": "", "valuesOnChart": 1 } } } ``` | Name | Type | Description | | :-- | :-- | :-- | | app\_id | `string` | _contains ID of the source application_ | | calculate\_type | `string` | _contains value of the selected type of calculation_ | | charts\_option | `array` | _contains settings of all charts cases_ | | aggregation | `string` | _contains value of the selected aggregation_ | | color | `string` | _contains hex code of the charts color_ | | field\_id\_calc | `string` | _contains ID of the field by which the charts values will be calculated_ | | filters\_list | `array` | _contains filters of the charts case_ | | name | `string` | _contains name of the charts case_ | | height\_charts | `number` | _contains value of the chart height_ | | interpretation | `array` | _contains all element interpretation types_ | | settings | `object` | _contains values of design settings_ | | axisValues | `boolean` | _shows whether the y axis will be displayed or not_ | | bottomWidth | `string` | _contains value of the bottom width of funnel areas_ | | gap | `string` | _contains value of the gap between the chart areas_ | | keep | `string` | _contains value of location on the chart of areas_ | | tooltips | `boolean` | _shows whether tooltips of the values will be used or not_ | | topWidth | `string` | _contains value of the top width of funnel areas_ | | valuesOnChart | `boolean` | _shows whether values of the calculation will be displayed on charts or not_ | ## Filtration [#](https://gudhub.com/docs/gh-elements/funnel-chart/#filtration) This element cannot be filtered out. ## Interpretation [#](https://gudhub.com/docs/gh-elements/funnel-chart/#interpretation) This gh-element has two types of interpretation: ![Types of funnel chart interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/funnel-chart-interpretation-types.jpg "Funnel chart interpretation types") ### Input [#](https://gudhub.com/docs/gh-elements/funnel-chart/#input) The first type of interpretation allows to display the calculated data in the form of funnel charts. It is an interactive type. ### Default [#](https://gudhub.com/docs/gh-elements/funnel-chart/#default) This type allows to display only the name of the gh-element.