Skip to main content
Basic Usage 
{% funnel_chart
    data="demo.daily_orders"
    category="category"
    value="sum(transactions)"
/%}

​
Examples

​
Basic Usage

Basic Usage 
{% funnel_chart
    data="demo.daily_orders"
    category="category"
    value="sum(transactions)"
/%}

​
Funnel Chart with Custom Styling

Funnel Chart with Custom Styling 
{% funnel_chart
    data="demo.daily_orders"
    category="category"
    value="sum(transactions)"
    align="left"
    label_position="outside"
    gap=5
    title="Styled Funnel"
/%}

​
Funnel Chart with Custom Colors

Funnel Chart with Custom Colors 
{% funnel_chart
    data="demo.daily_orders"
    category="category"
    value="sum(transactions)"
    chart_options={
        color_palette = ["#0d0887", "#6300a7", "#a62098", "#d5546e", "#f68d45", "#fcd225", "#f0f921"]
    }
/%}

​
Attributes

​
data
string
required
Name of the table to query
​
filters
array
IDs of filters to apply to the query
​
date_range
options group
Use date_range to filter data for specific time periods. Accepts predefined ranges (e.g., “last 12 months”), dynamic ranges (e.g., “Last 90 days”), custom date ranges (e.g., “2020-01-01 to 2023-03-01”), or partial ranges (e.g., “from 2020-01-01”, “until 2023-03-01”)Example:
date_range={
  range = "today"
  date = "string"
}
Attributes:
  • range: string - Time period to filter. Use presets like ‘last 7 days’, dynamic patterns like ‘Last 90 days’, custom ranges like ‘2020-01-01 to 2023-03-01’, or partial ranges like ‘from 2020-01-01’.
    • Allowed values:
      • today
      • yesterday
      • last 7 days
      • last 30 days
      • last 3 months
      • last 6 months
      • last 12 months
      • previous week
      • previous month
      • previous quarter
      • previous year
      • this week
      • this month
      • this quarter
      • this year
      • next week
      • next month
      • next quarter
      • next year
      • week to date
      • month to date
      • quarter to date
      • year to date
      • all time
  • date: string - Date column to filter on. Required when the data has multiple date columns.
​
category
string
required
Column name for funnel stages/categories
​
value
string
required
Column name for values
​
title
string
Title to display above the chart
​
subtitle
string
Subtitle to display below the title
​
info
string
Information tooltip text (can only be used with title)
​
info_link
string
URL to link the info text to (can only be used with info)
​
info_link_title
string
Create a custom link title for the info link, placed after the info text (can only be used with info_link)
​
value_fmt
string
default:"num"
Format for values. See Value Formatting for available formats.
​
legend
boolean
default:"false"
Show a legend above the chart (stages are labeled directly on the funnel by default)
​
legend_location
string
default:"top"
Position of the legend (top or bottom)Allowed values:
  • top
  • bottom
​
label_position
string
default:"auto"
Label position: auto places labels inside each stage, moving them beside stages that are too narrow; outside places all labels in a rail beside the chart (left of the chart unless the funnel is right-aligned)Allowed values:
  • auto
  • inside
  • outside
  • center
​
chart_options
options group
Chart configuration optionsExample:
chart_options={
  color_palette = ["value1", "value2"]
}
Attributes:
  • color_palette: array of strings
​
align
string
default:"left"
Funnel alignmentAllowed values:
  • center
  • left
  • right
​
show_percent
boolean
default:"false"
Show percentages relative to first stage
​
min_size
string
default:"0%"
Minimum size of funnel stages
​
max_size
string
default:"100%"
Maximum size of funnel stages
​
gap
number
default:"1"
Gap between funnel stages in pixels
​
refresh_interval
number
Time in seconds between automatic data refreshes (minimum 60). Overrides the page-level auto-refresh setting for this component.
​
where
string
Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.
​
having
string
Custom SQL HAVING condition to apply to the query after GROUP BY
​
limit
number
Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows.
​
order
string
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
qualify
string
Custom SQL QUALIFY condition to filter windowed results
​
width
number
Set the width of this component (in percent) relative to the page width
​
height
number
Set a fixed height for the chart in pixels
​
connect_group
string
Link this chart to others sharing the same id, syncing their tooltips, axis-pointer, and zoom
​
tooltip_fields
array
Extra columns to include in the tooltip on hover. Each entry is { value, label?, fmt?, color_by_sign?, down_is_good? }. See the tooltip fields guide for examples.
​
echarts_options
map
Raw ECharts options deep-merged over the chart’s final configuration. Use for anything the structured props do not expose — graphic, visualMap, tooltip styling, and so on. Partial overrides win key-by-key without clobbering Studio’s computed siblings. For overrides scoped to the data series, use echarts_series_options.Example:
echarts_options={
    tooltip={ position="top" }
    graphic=[{ type="text" }]
}
​
echarts_series_options
map
Raw ECharts series options deep-merged into the chart series. Use for series-level styling the structured props do not expose.Example:
echarts_series_options={
    itemStyle={ borderRadius=8 }
}