Skip to content

Drill-Down Boards

Drill down is the BI pattern of clicking a summary element — a bar, a table cell, a KPI — to navigate to a detail board with context pre-filled. dbt charts supports drill-down with the link: field on charts and tables.

The examples query the Dundersign demo dataset's support tickets, and the link targets follow its customer-support/ board tree.

Bar chart drill-down

Set link: on a chart to make every data element clickable. Channel placeholders ({{ x }}, {{ y }}, {{ color }}, {{ theta }}) expand to the clicked row's value for that channel.

source: db

queries:
  tickets_by_status:
    sql: |
      SELECT status, COUNT(*) AS tickets
      FROM dundersign.tickets
      GROUP BY status

charts:
  by_status:
    type: bar
    query: tickets_by_status
    x: status
    y: tickets
    title: Tickets by Status — click to drill
    link: "/customer-support/tickets/list?status={{ x }}"

rows:
  - by_status
050100150newsolvedTickets by Status — Click to Drill Data as of 14:52 UTC on 21 Aug 2026 made with dbt charts
▶

Clicking the new bar navigates to /customer-support/tickets/list?status=new — the target board the last section of this page defines. Board-root paths resolve automatically in dct serve and Cloud.

In-page variable update

A link: starting with ? updates a dashboard variable without leaving the board. This is how cross-chart filtering works inside a single board:

variables:
  selected_stage:
    label: Stage
    default: ""

charts:
  by_stage:
    type: bar
    query: opportunities_by_stage
    x: stage_name
    y: amount
    link: "?selected_stage={{ x }}"   # updates variable, no navigation

  by_owner:
    type: bar
    query: opportunities_by_owner     # queries filtered by selected_stage
    x: owner_name
    y: amount
    title: Reps (filtered by stage above)

Table drill-down

A chart-root link: makes the whole row clickable (a row-wide band that highlights on hover), while a per-column link: makes that column's cells their own links. A cell link always wins the click over the row band:

charts:
  tickets_table:
    type: table
    query: open_tickets
    link: "/customer-support/tickets/detail?id={{ id }}"   # whole-row drill-down
    style:
      columns:
        id:
          label: Ticket
          # no column link → clicking the row navigates to detail
        subject:
          label: Subject
          # no column link → part of the clickable row
        status:
          label: Status
          link: "/customer-support/tickets/categories?status={{ status }}"   # this column links elsewhere

The chart-root link is the row destination; a column link overrides it for clicks on that column's cells. Columns without their own link are not inked as links — they are simply part of the clickable row.

Target board

The detail board receives the clicked value as a URL query parameter. Use a variables: entry with input: text to read it:

# charts/customer-support/tickets/list.yml
variables:
  status:
    input: text         # populated from ?status= query param
    default: "new"      # shown when opened without a parameter

queries:
  filtered_tickets:
    sql: SELECT * FROM dundersign.tickets WHERE {{ filter('status', status) }}