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 dft 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 the chart root as a default for all cells. Override per column in style.columns:

charts:
  tickets_table:
    type: table
    query: open_tickets
    link: "/zendesk/tickets/detail?id={{ ticket_id }}"   # default for all cells
    style:
      columns:
        status:
          link: "/zendesk/backlog/?status={{ status }}"  # overrides root for status column
        ticket_id:
          label: Ticket
          # inherits chart-root link

Column link wins when set; otherwise the chart-root link applies. Cells with no resolvable link render as plain text.