Charts

Custom Echart

Render a fully custom Apache ECharts chart from a raw ECharts config — an escape hatch for charts the built-in chart components cannot express. The tag body is the ECharts option. Write JSON5 (unquoted object keys, single-quoted strings, trailing commas, // comments — much cleaner than strict JSON) for declarative charts, or JavaScript returning an option object when you need function callbacks (formatter/renderItem, gradients, computed series). The platform auto-detects which render path to use from the body: pure JSON5 takes the host-rendered path (cheap, scales to many on a page); anything with JavaScript automatically routes to a sandboxed iframe (~20-per-page ceiling). Strict JSON (everything quoted) also works but is harder to read — prefer JSON5. Query results are injected as the first dataset, so series reference columns with encode, e.g. series: [{ type: 'bar', encode: { x: 'category', y: 'sales' } }]. The report theme is applied underneath; any key set in the config overrides it. In JSON5 mode, JavaScript functions are not supported — use ECharts string templates (e.g. formatter: '{@column_name}') or Evidence format codes: any formatter/valueFormatter key set to 'fmt:<code>' becomes a real formatter (e.g. valueFormatter: 'fmt:usd1m', axis formatter: 'fmt:usd0'). In JS mode the body sees exactly these globals (and ONLY these — declaring a `const`/`let` with one of these names will throw "Cannot declare a variable twice"): data (the query rows as objects — destructure or alias if you need a different name in your code, e.g. `const myRows = data.filter(...)` works, `const data = ...` does NOT), columns (column metadata), echarts (the ECharts library, e.g. echarts.graphic.LinearGradient), theme (the resolved theme, with colorPalettes.default), and fmt(value, code) (Evidence formatting, e.g. fmt(p.value, 'usd0')). The body can be any of: (a) a bare object literal expression, (b) statements with an explicit `return { ... }`, or (c) a function returning the option (`() => ({...})` or `function () { return {...} }`) — all three are equivalent. A tight default grid is applied (small padding, containLabel: true) so charts fill their container; only set the grid key when you need to override (e.g. extra top padding for an internal legend).

{% custom_echart data="demo.daily_orders" %}
{
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar', encode: { x: 'category', y: 'total_sales' } }]
}
{% /custom_echart %}

Examples

Basic Usage

{% custom_echart data="demo.daily_orders" %}
{
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar', encode: { x: 'category', y: 'total_sales' } }]
}
{% /custom_echart %}

{% custom_echart data="demo.daily_orders" %}
{
  tooltip: { trigger: 'axis' },
  legend: { show: true },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar', name: 'Sales', encode: { x: 'category', y: 'total_sales' } },
    { type: 'line', name: 'Transactions', encode: { x: 'category', y: 'transactions' } }
  ]
}
{% /custom_echart %}

Dataset Transform

{% custom_echart data="demo.daily_orders" %}
{
  dataset: [
    {},
    { transform: { type: 'sort', config: { dimension: 'total_sales', order: 'desc' } } }
  ],
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar', datasetIndex: 1, encode: { x: 'category', y: 'total_sales' } }]
}
{% /custom_echart %}

Waterfall (EBITDA Bridge)

<!-- Waterfalls float each bar on a transparent placeholder series; inc/dec/tot must be mutually exclusive per row. fmt: formatters handle currency display, so values stay unscaled in SQL. -->
```sql ebitda_bridge
select 'Prior EBITDA' as step, 1 as ord, 0 as placeholder, null as inc, null as dec, 32000000 as tot
union all select 'Home', 2, 32000000, 6200000, null, null
union all select 'Sports', 3, 38200000, 4100000, null, null
union all select 'Groceries', 4, 40000000, null, 2300000, null
union all select 'Current EBITDA', 5, 0, null, null, 40000000
order by ord
```

{% custom_echart data="ebitda_bridge" title="EBITDA Bridge" %}
{
  tooltip: { trigger: 'axis', valueFormatter: 'fmt:usd1m' },
  xAxis: { type: 'category', axisLabel: { interval: 0 } },
  yAxis: { axisLabel: { formatter: 'fmt:usd0m' } },
  series: [
    { type: 'bar', stack: 'bridge', silent: true,
      itemStyle: { color: 'transparent' },
      encode: { x: 'step', y: 'placeholder' } },
    { type: 'bar', stack: 'bridge', name: 'Increase',
      itemStyle: { color: '#22A39F' },
      label: { show: true, position: 'top', formatter: 'fmt:usd1m' },
      encode: { x: 'step', y: 'inc' } },
    { type: 'bar', stack: 'bridge', name: 'Decrease',
      itemStyle: { color: '#E2483D' },
      label: { show: true, position: 'bottom', formatter: 'fmt:usd1m' },
      encode: { x: 'step', y: 'dec' } },
    { type: 'bar', stack: 'bridge', name: 'Total',
      itemStyle: { color: '#475569' },
      label: { show: true, position: 'top', formatter: 'fmt:usd1m' },
      encode: { x: 'step', y: 'tot' } }
  ]
}
{% /custom_echart %}

JavaScript mode (functions, gradients)

<!-- A body with JS function syntax automatically routes to a sandboxed iframe. Globals: data, columns, echarts, theme, fmt. Use real functions when you need them (formatter/tooltip/renderItem) or echarts.graphic. -->
{% custom_echart data="demo.daily_orders" %}
{
  tooltip: { trigger: 'axis', valueFormatter: (value) => fmt(value, 'usd0') },
  xAxis: { type: 'category' },
  yAxis: { axisLabel: { formatter: (value) => fmt(value, 'usd0m') } },
  series: [
    {
      type: 'bar',
      encode: { x: 'category', y: 'total_sales' },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: theme.colorPalettes.default[0] },
          { offset: 1, color: theme.colorPalettes.default[1] }
        ])
      },
      label: { show: true, formatter: (params) => fmt(params.value.total_sales, 'usd0') }
    }
  ]
}
{% /custom_echart %}

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.

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)

renderer

string

default:"canvas"

ECharts rendering engineAllowed values:

canvas
svg

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

Funnel ChartDisplay a funnel chart showing conversion rates through stages

⌘I

​Examples

​Basic Usage

​Multiple Series with Tooltip

​Dataset Transform

​Waterfall (EBITDA Bridge)

​JavaScript mode (functions, gradients)

​Attributes

Examples

Basic Usage

Multiple Series with Tooltip

Dataset Transform

Waterfall (EBITDA Bridge)

JavaScript mode (functions, gradients)

Attributes