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 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.

Legend Toggle

Set style.legend.interactive_legend: true on a chart with a series color: channel to make the legend clickable. Clicking a legend entry mutes every other series, so a viewer can isolate one series at a time without leaving the chart; clicking the same entry again restores all series.

queries:
  monthly_channel_revenue:
    columns: [month, channel, revenue]
    values:
      - ["2026-01", "Organic", 42000]
      - ["2026-01", "Paid", 18000]
      - ["2026-01", "Referral", 9000]
      - ["2026-02", "Organic", 47000]
      - ["2026-02", "Paid", 21000]
      - ["2026-02", "Referral", 8500]
      - ["2026-03", "Organic", 51000]
      - ["2026-03", "Paid", 26000]
      - ["2026-03", "Referral", 9800]

charts:
  channel_revenue:
    query: monthly_channel_revenue
    type: line
    title: Revenue by Channel
    x: month
    y: revenue
    color: channel
    style:
      legend:
        interactive_legend: true
rows:
  - channel_revenue
Jan2026FebMar020k40k60kRevenue by ChannelOrganicPaidReferral Data as of 16:49 UTC on 5 Aug 2026 made with dataface
▶

This only applies to a chart with a series-mode color: channel — a single-series chart has no legend entries to toggle.