Skip to content

Chart Interactions

Charts support hover interactions with tooltips and click-through via the href: field, which turns chart elements into clickable links. Richer click-handlers (set variables, cross-chart filters, drill navigation) are planned for a future release.

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: _doc_examples.yaml#sales  # External file reference
    type: bar
    x: product
    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 href: 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
    href: "/regions/{{ x }}"   # {{ x }} becomes the clicked region

Relative paths (starting with / or ?) resolve against the current board; absolute URLs (https://...) pass through unchanged.

href: 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. It is rewritten into a Vega-Lite href encoding under the hood.

Tables use a separate mechanism: set link: on a column in style.columns (or header_link: for the header) instead of chart-level href:.

Richer Click Handlers (Coming Soon)

Planned Feature

Structured click handlers for cross-chart filters, variable updates, and drill navigation are planned but are not part of the authored chart schema today. Do not add an interactions: block; strict chart validation rejects it. Use href: for click-through links.

Planned click action types include:

  • set_variable - Update a variable when clicking a chart element
  • filter - Filter other charts based on clicked value
  • drill - Navigate to a detail dashboard

(The open_link planned action is already covered by href: above.)