Funnel Chart

Yeeflow team
Yeeflow team
  • Updated

The funnel chart is a specialized chart type that demonstrates the flow of users through a business or sales process. The chart takes its name from its shape, which starts from a broad head and ends in a narrow neck. The number of users at each stage of the process are indicated from the funnel's width as it narrows.

 

Example: Sales Pipeline - To visualize potentials across each stage

Funnel_Chart_Overview.jpg

 

Add Funnel Chart to the page

Firstly, find the Funnel Chart control in the controls add panel,. Then, drag and drop it into a section or container on your page.

Funnel_Chart_add.jpg

 

Select data source

The source explains where you found the information that is in your graph. Select the target data list as the source content to create Funnel Chart based on filters conditions.

Open the Content > Data Source block, and in the Application section, select the application which is the current application by default. 

Afterward, move on to the List section. Select the data list under the selected application.

In the Data Filters section, click the condition button to filter the data from the selected data list.

Funnel_Chart_source.jpg

 

Category and value

Open the Content > Chart block to select the field as Category and Value of this Funnel Chart.

 

Funnel_Chart_Category.jpg

 

Settings of Funnel Chart

Chart Height: set the height of this Funnel Chart control. 

Label: Show/hide the label on the Funnel Chart.

 

Funnel_Chart_Title.jpg

 

Title of Funnel Chart

Display: turn on to show title of the Funnel Chart.

Chart Title: type the text of the title, or set dynamic content as the title text.

Title Position: set the display position of the title as Before Chart or After Chart.

Text Align: Set the alignment of the title as LeftCenterRight, or Justify.

 

Legend of Funnel Chart

Display: turn on to show Legend of the Funnel Chart.

Position: set the display position of the legend around the Funnel Chart.

 

Funnel_Chart_legend.jpg

 

Tooltip of Pie Chart

Enable: turn on to show Tooltip of the Funnel Chart.

Number Suffix: set the suffix of the number on the Tooltip.

 

Styling the Funnel Chart control

 

Title

  1. Text Color: Set the color of the title.
  2. Typography: Set the typography of the title.
  3. Margin: Set the Margin of the title in PX or %.
  4. Padding: Set the Padding of the title in PX or %.
  5. Text Shadow: Adjust box shadow options.

 

Label

  1. Font Family: Set font family of the label.
  2. Size: Set font size of the label.
  3. Weight: Set font weight of the label.
  4. Style: Set font style of the label.
  5. Text Color: Set the color of the label.

 

Legend

  1. Font Family: Set font family of the legend.
  2. Size: Set font size of the legend.
  3. Weight: Set font weight of the legend.
  4. Style: Set font style of the legend.
  5. Line-Height: Set line-height of the legend.
  6. Text Color: Set the color of the legend.

 

Tooltip

  1. Background Color: Set the background color of the Tooltip container.
  2. Padding: Set the Padding of the tooltip container in PX or %.
  3. Text Shadow: Adjust box shadow options.
  4. Title: Set the Title's style of the Tooltip.
    • Font Family: Set font family of the Tooltip's title.
    • Size: Set font size of the Tooltip's title.
    • Weight: Set font weight of the Tooltip's title.
    • Style: Set font style of the Tooltip's title.
    • Line-Height: Set line-height of the Tooltip's title.
    • Text Color: Set the color of the Tooltip's title.
  5. Value: Set the Value's style of the Tooltip.
    • Font Family: Set font family of the Tooltip's value.
    • Size: Set font size of the Tooltip's value.
    • Weight: Set font weight of the Tooltip's value.
    • Style: Set font style of the Tooltip's value.
    • Line-Height: Set line-height of the Tooltip's value.
    • Text Color: Set the color of the Tooltip's value.

 

 

 

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.