Skip to content

Chart Interactions

Charts support hover interactions with tooltips and click-through via the link: field, which turns chart elements into clickable drill-down links.

Hover Tooltips

Charts automatically display tooltips when hovering over data points. Tooltips show the values for the hovered element.

charts:
  sales_chart:
    title: "Hover for Details"
    query: queries.sales
    type: bar
    x: month
    y: total_revenue

Cross-File Query References

You can reference queries from external files using the file.yml#query_name syntax:

charts:
  sales_chart:
    query: shared_queries.yml#monthly_revenue  # External file reference
    type: bar
    x: month
    y: revenue

This is useful for: - Sharing queries across multiple dashboards - Keeping doc examples short by referencing common queries - Organizing large projects with separate query definition files

Paths are resolved relative to the current file's directory.

Set link: on a chart to turn each data point into a clickable link. The value is a URL template. Four channel placeholders are substituted with the clicked row's value for that channel: {{ x }}, {{ y }}, {{ color }}, {{ theta }}. Other Jinja-style {{ ... }} expressions pass through unchanged — use them for static strings only, not field names or variable references.

charts:
  sales_by_region:
    query: queries.sales
    type: bar
    x: region
    y: revenue
    link: "/regions/{{ x }}"   # {{ x }} becomes the clicked region

Board-root paths (/path/…) are automatically rewritten for dct serve and Cloud — the same YAML works in both environments.

In-page variable updates

A link: starting with ? updates a dashboard variable without navigating away. Use this for cross-chart filtering within the same board:

charts:
  by_category:
    query: revenue_by_category
    type: bar
    x: category
    y: revenue
    link: "?selected_category={{ x }}"   # updates the selected_category variable

link: works on chart types that render individual data elements per row under the Vega-Lite pipeline — bar, line, area, point, and other VL-backed marks.

KPI charts

KPI charts also support link:. The value is a static URL; clicking the KPI value navigates to it.

Tables

Tables support link: at both the chart root and per column, and the two are distinct affordances:

  • A chart-root link: makes the whole row clickable. It renders as one row-wide selection band that highlights on hover; clicking anywhere on the row (except a cell that has its own link) navigates to the row destination.
  • A column link: in style.columns makes that column's cells clickable links, rendered inline and inked. A cell link always wins the click over the row band beneath it.
charts:
  tickets_table:
    type: table
    query: open_tickets
    link: "/zendesk/tickets/detail?id={{ ticket_id }}"   # whole-row link
    style:
      columns:
        status:
          link: "/zendesk/backlog/?status={{ status }}"  # this column's cells link here
        ticket_id:
          label: Ticket
          # no column link — clicking it follows the whole-row link

A column link is a per-cell link on that column only. It does not fall through to other columns — plain columns with no column link are not inked as links; they are just part of the clickable row when a chart-root link: is set. Summary and total rows never get the row band.