Skip to main content
Basic Usage
{% sankey_chart
    data="demo_order_details"
    source="category"
    target="item_name"
    value="sum(quantity)"
/%}

Examples

Basic Usage

Basic Usage
{% sankey_chart
    data="demo_order_details"
    source="category"
    target="item_name"
    value="sum(quantity)"
/%}

Sankey Chart with Custom Colors

Sankey Chart with Custom Colors
{% sankey_chart
    data="demo_order_details"
    source="category"
    target="item_name"
    value="sum(quantity)"
    title="Category to Item Flow"
    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 = "last 7 days"
  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:
      • last 7 days
      • last 30 days
      • last 3 months
      • last 6 months
      • last 12 months
      • week to date
      • month to date
      • quarter to date
      • year to date
      • previous week
      • previous month
      • previous quarter
      • previous year
      • all time
  • date: string - Date column to filter on. Required when the data has multiple date columns.
source
string
required
Column name for source nodes
target
string
required
Column name for target nodes
value
string
required
Column name for flow values
percent
string
Column name for percentage values (optional)
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)
URL to link the info text to (can only be used with info)
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.
node_labels
string
default:"name"
Node label displayAllowed values:
  • name
  • value
  • full
Link label displayAllowed values:
  • value
  • percent
  • full
  • none
node_align
string
default:"justify"
Node alignmentAllowed values:
  • justify
  • left
  • right
  • top
  • bottom
node_gap
number
default:"10"
Gap between nodes in pixels
node_width
number
default:"20"
Width of nodes in pixels
orient
string
default:"horizontal"
OrientationAllowed values:
  • horizontal
  • vertical
sort
boolean
default:"false"
Sort nodes by value
Link color modeAllowed values:
  • source
  • target
  • gradient
outline_color
string
Node outline color
outline_width
number
default:"0"
Node outline width in pixels
chart_options
options group
Chart configuration optionsAttributes:
  • color_palette: array
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