Skip to main content

​
Examples

​
Basic Usage

​
Chord Chart with Custom Colors

​
Chord Chart with Raw ECharts Overrides

​
Attributes

​
string
Name of the table or view to query. Omit when using metric.
​
string
Semantic metric name to display, from metrics/*.yaml. Use instead of the raw data/value/x/y attributes.
​
array
IDs of filters to apply to the query
​
options group
Filter data to a time period. date_range is an OBJECT with range (the period) and optionally date (which column to filter on when the table has more than one). Shape: date_range={ range="last 12 months" date="order_date" }. range accepts predefined values (last 7 days, month to date), dynamic patterns (Last 90 days), custom windows (2020-01-01 to 2023-03-01), or partial ranges (from 2020-01-01, until 2023-03-01). Pass a plain string for range — the whole object is NOT a string.Example:
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.
​
string
required
Column name for source nodes
​
string
required
Column name for target nodes
​
string
Column name for flow values (chord thickness). Omit when using metric.
​
string
Title to display above the component
​
string
Subtitle to display below the title
​
string
Information tooltip text (can only be used with title). Displays an info icon next to the title.
​
string
URL to link the info text to (can only be used with info)
​
string
Create a custom link title for the info link, placed after the info text (can only be used with info_link)
​
string
Format for values (defaults to num, or the metric format in metric mode). See Value Formatting for available formats.
​
boolean
default:"true"
Show node labels around the circle
​
options group
Chart configuration optionsExample:
Attributes:
  • color_palette: array of strings
  • series_colors: map of key-value pairs
​
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:
​
map
Raw ECharts series options deep-merged into the chart series. Use for series-level styling the structured props do not expose.Example:
​
number
Time in seconds between automatic data refreshes (minimum 30). Overrides the page-level auto-refresh setting for this component.
​
string
Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.
​
string
Custom SQL HAVING condition to apply to the query after GROUP BY
​
number
Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows.
​
string
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
string
Custom SQL QUALIFY condition to filter windowed results
​
number
Set the width of this component (in percent) relative to the page width
​
number
Set a fixed height for the chart in pixels
​
string
Link this chart to others sharing the same id, syncing their tooltips, axis-pointer, and zoom
​
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.