Skip to content

Chart Interactions

Charts support hover interactions with tooltips. Click interactions for drill-downs 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

For line and area charts, an interactive crosshair appears on hover, showing values at the hovered x-position.

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.

Client-Side Grouping (group_by)

Sometimes your query returns data at one granularity, but you want to visualize it at another. Use group_by for client-side aggregation:

queries:
  daily_sales:
    metrics: [total_revenue]
    dimensions: [day, region]   # Returns daily data

charts:
  weekly_summary:
    title: "Weekly Revenue by Region"
    query: queries.daily_sales
    type: bar
    x: week
    y: total_revenue
    color: region
    group_by: [week, region]    # Aggregate to weekly

When to use group_by: - Query fetches daily data, chart needs weekly/monthly - Query has many dimensions, chart needs fewer - You want to transform data without changing the query

Click Interactions (Coming Soon)

Planned Feature

Click interactions are planned but not yet implemented. The YAML schema supports them, but they don't function yet.

The planned syntax for click interactions:

charts:
  month_selector:
    query: queries.sales
    type: bar
    title: Click a Month to Select
    x: date
    y: revenue
    interactions:           # Not yet functional
      click:
        action: set_variable
        target: "selected_month"
        value_map:
          field: "date"

Planned click action types:

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