# Funnel Chart

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F0hz5stvO1LDjYdUxT8MH%2Fimage.png?alt=media&#x26;token=3bed0285-0e3a-45ba-88df-36d5eeb050c2" alt=""><figcaption></figcaption></figure>

## Configuration

#### Option

Provide the JSON content to generate the chart dynamically. Sample data is given blow.

```json
{
  "data": [
    {
      "value": 100,
      "name": "Show",
      "color": "#fc8452"
    },
    {
      "value": 80,
      "name": "Click",
      "color": "#9a60b4"
    },
    {
      "value": 60,
      "name": "Visit",
      "color": "#fac858"
    },
    {
      "value": 40,
      "name": "Query",
      "color": "#ee6666"
    },
    {
      "value": 20,
      "name": "Buy",
      "color": "#3ba272"
    }
  ]
}
```

The fields in the data array include-

| Property | Value                                                         |
| -------- | ------------------------------------------------------------- |
| value    | Indicates the number value that decides the size of the node  |
| name     | Specifies the label of the node that is displayed to the user |
| color    | Decides the color that is used to fill the node               |

#### Legend Position

Position of the legend refers to the placement of the key that explains the various elements displayed on the chart. It is essential to ensure that viewers can easily understand the information presented.

| Property | Value                                           |
| -------- | ----------------------------------------------- |
| Bottom   | The legend is placed at the bottom of the chart |
| Top      | The legend is placed at the top of the chart    |

#### Label Position

Refers to the placement of the label/name of each node component. The users can decide the position according to the need.

| Property | Value                                                                            |
| -------- | -------------------------------------------------------------------------------- |
| Center   | The label is printed right within the node and the text is aligned at the center |
| Right    | The label text is pushed to the right end of each component to denote the node   |
| Left     | The label is placed on the left side of the node                                 |

#### Title Position

This refers to where the main title of the chart is located on the visual representation of data. Consider the placement of the chart title in guiding viewers through the information displayed on the chart.

| Property | Value                                                       |
| -------- | ----------------------------------------------------------- |
| Center   | The title is aligned to the center part of the title area   |
| Right    | The title text is pushed to the right end of the title area |
| Left     | The title text is pushed to the left end of the title area  |

#### Left

Specify the number of pixels that splits the left-border of the chart container and the actual funnel chart.

#### Top

Specify the number of pixels that splits the top-border of the chart container and the funnel chart.

#### Bottom

Specify the number of pixels that splits the bottom-border of the chart container and the funnel chart.

#### Width

Specify the width value for the chart in numerical number.

#### Min

It is a number that sets the minimum value the chart accepts. Any node that represents a lesser value than this will be set empty.

#### Max

It is a number that sets the maximum value the chart accepts. Any node that represents a greater value than this will be set empty.

#### Gap

Specify the number value to increase or decrease the space among the chart components.

#### Title

Provide a short and descriptive title for the chart that clearly summarizes the data and information being presented. This title should be concise yet informative, helping the audience understand the content of the chart at a glance.

#### Tooltip

This tooltip pops up when the user moves the mouse over the component area of the chart. This is commonly used to provide some extra or important information to the user on the usage of the widget.

The tooltip will be immediately shown when the user's mouse hovers over the widget, and immediately hides when the user's mouse leaves. This information will be contextual, useful, and informative.

#### Label

Adjust the settings for the visibility of the labels attached to the chart components. You have the option to turn off this setting in order to hide the labels.

#### Legend Visibility

This feature allows the user to determine the visibility of the legend on the chart based on their preference.

## Interaction

#### Event Handlers

| Event                                        | Description                                                                                                                                                                                                                                                                                         |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**`Click`**</mark> | <p>This event will be triggered when the user clicks on the chart.<br><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-e03606ebaa039ac4c6aa3cec8eb669615ef08ed5%2Fimage%20(203).png?alt=media" alt=""></p> |

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Background</td><td>Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.</td></tr></tbody></table>

## Layout

#### Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appizap.ae/appizap-studio/widget-library/funnel-chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.