Documentation

Ataytis Vega Studio documentation.

Build, inspect, refine, and share Vega-powered Power BI visuals.

Authoring fundamentals

Power BI interactions

Design Vega marks that cooperate with Power BI tooltips, selections, cross-highlighting, and context-menu actions.

How interaction integration works

The Vega view produces marks, data items, events, and tooltip values. Ataytis Vega Studio resolves those items back to Power BI row identities and passes supported actions to the Power BI host. Reliable interaction therefore depends on marks retaining a resolvable connection to rows from dataset.

InteractionStudio behaviorAuthoring requirement
TooltipsConverts Vega tooltip values into Power BI tooltip items and applies Power BI numeric or date formatting where the field can be matched.Set a Vega tooltip value on an interactive mark and keep the item linked to dataset rows.
Selection / cross-filteringResolves clicked Vega items to Power BI selection identities, either the rows behind the clicked item or a wider set described by a filter expression.Call pbiCrossFilterApply from a signal on a data-backed mark, and stay within the 250-data-point selection limit.
Cross-highlightingAdds base, highlight, status, and comparator fields for measures when Power BI supplies highlight values.Use the generated highlight fields in encodings or transforms.
Context menuShows the Power BI context menu and attaches a row identity when exactly one row can be resolved.Trigger the context menu over a data-backed item.

Power BI tooltips

A Vega tooltip can be a primitive value or an object of label/value pairs. Object keys become tooltip labels. When a key matches a numeric or date field from the Power BI dataset and the value is compatible, the Studio can use the Power BI format string for display.

Vega mark encoding
"tooltip": {
  "signal": "{
  'Category': datum['Category'],
  'Value': datum['Value']
}"
}

Selection-aware styling

Use __selected__ to style the report's current selection state. A value of neutral means there is no active selection, on means the row is selected, and off means another row is selected. The current version applies a fixed maximum selection size of 250 data points.

Vega expression
datum['__selected__'] === 'off' ? 0.25 : 1

Driving cross-filtering from the specification

Selection is not automatic. A mark becomes a cross-filter source when a signal calls pbiCrossFilterApply in response to an event on it, and pbiCrossFilterClear when the user clicks away from any mark. The second argument is a filter expression describing which rows the click represents, which is what lets one click select a range or a group rather than a single row.

Vega signal
{
  "name": "crossFilterSelection",
  "value": [],
  "on": [
    {
      "events": {
        "source": "scope",
        "type": "mouseup",
        "markname": "data-point"
      },
      "update": "pbiCrossFilterApply(event, 'datum[\\'Category\\'] == _{Category}_')"
    },
    {
      "events": {
        "source": "view",
        "type": "mouseup",
        "filter": ["!event.item || event.item.mark.name != 'data-point'"]
      },
      "update": "pbiCrossFilterClear()"
    }
  ]
}
  • Give the interactive mark a name, and match that name in the event definition so only that mark starts a selection.
  • Wrap a field reference in _{FieldName}_ inside the filter expression to have the Studio substitute the clicked item's value, quoted and typed correctly for you.
  • Omit the filter expression entirely — pbiCrossFilterApply(event) — to select only the rows behind the clicked item.
  • Always pair the apply handler with a clear handler on the view, or a user cannot deselect by clicking the background.
  • Holding Ctrl or Shift while clicking adds to the current selection rather than replacing it.

Cross-highlight-aware marks

For a measure named Sales, the Studio can expose Sales__highlight, Sales__highlightStatus, and Sales__highlightComparator. These fields let a specification draw base and highlighted portions separately or adjust opacity and color without constructing complex comparison expressions.

An Ataytis Vega Studio radial visual on a Power BI report canvas, cross-highlighted by a selection made in a neighbouring pie chart.
A selection in another Power BI visual cross-highlights the Vega marks; unselected categories fall back to their muted `__selected__` styling.
Power BI interactions — Ataytis Vega Studio | AtaytisTech