Funnel EChart

Funnel ECharts are ideal for visualizing processes that involve sequential stages, such as sales pipelines, customer journeys, or conversion funnels. Each section's width represents the relative size of data at a given stage, visually showing drop-offs or progression through steps.

Create a Funnel EChart

In the Resource or Document Portal, click + Create > Create Dashboard.
Choose Blank Dashboard or a template, then click Create.
From the Custom Visualization tab, drag and drop Funnel Chart (ECharts) onto the canvas.

Bind Dataset to Funnel EChart

Select the chart and choose a dataset from the Choose Data dropdown.
Drag fields into the Values, Legend (Series), and Tooltip containers.
Optionally, select a Drill Down Mode (Default, Pre-set Targets, or Pre-set Path). For more, see Drill-Down.

Format Data Attributes

Click the settings icon next to each data field to:

Aggregate Values: Choose Sum, Average, Max, Min, Count, or Distinct Count.
Apply Quick Functions: Use date-based, ranking, running total, percentile, and moving average calculations.
Filter Data: Show only relevant data.
Rename Fields: Give data fields user-friendly names.
Remove Fields: Exclude unnecessary attributes.
Customize Tooltips: Adjust formatting, add/remove fields, or use expressions.

Analyze Data

Use the Action Bar tools above the chart to:

Filter: Limit data to specific values.
Sort: Reorder data for clarity.
Conditional Visualization: Highlight trends or outliers.
Data Binding: Swap or modify bound fields.
Focus: Expand the chart to full screen.

Customize Appearance

Chart Style

Maintain Color Assignments: Manually assign colors or use default palettes.
Graph Opacity: Adjust transparency from 0% to 100%.
Width Range: Set min and max widths for funnel segments.
Symbol Sort: Choose Default, Ascending, or Descending.
Symbol Gap: Set spacing between funnel sections.
Symbol Align: Align funnel segments Left, Right, or Center.
Auto Gradient: Enable gradient fill colors.
Canvas Padding: Adjust padding around the chart.
Custom ECharts Option: Inject JavaScript for chart customization.
Custom Behavior: Add dynamic behavior with JavaScript (e.g., setInterval, event handlers).

Animation

Entrance Animation: Choose an animation style and configure delay/duration.

Data Visualization

Include All Dimensions: Show labels with null values.

Data Labels

Show Data Labels: Toggle to display labels.
Display Pattern: Choose how series and values appear (with optional line breaks).
Value / Series Name: Enable or disable each element in the label.
Display Unit: Choose from Auto, None, Thousands, Millions, etc.
Label Location: Display labels inside or outside the funnel.
Display Mode: Show labels automatically or for all segments.
Show Connecting Line: Toggle connector lines and customize width/color.
Font Settings: Set font family, size, color, weight, and style.