Documentation

Ataytis Vega Studio documentation.

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

Getting started

Create your first visual

Build a first Vega specification with Power BI data, preview the result, and save it back to the report.

The first-visual workflow

  1. 1

    Add Ataytis Vega Studio to the page

    Select the visual icon and resize the new visual container to a practical authoring size.

  2. 2

    Assign fields to Values

    Add the columns and measures needed by the visual. Their Power BI display names become field names available in the Vega dataset.

  3. 3

    Open the Studio editor

    Select the visual and open its Edit or advanced-edit experience from the visual header.

  4. 4

    Start with Vega

    Choose the Vega creation path. The built-in Blank Vega Canvas starter connects the Power BI dataset and leaves the marks array empty for your design.

  5. 5

    Write or paste the specification

    Define transforms, scales, axes, and marks that reference the fields in dataset. Keep field-name capitalization and punctuation exact.

  6. 6

    Apply and inspect

    Press Ctrl+Enter or choose Update visual. If the result is blank or invalid, open Diagnostics and Data table before changing the code again.

  7. 7

    Return to the report and save

    Exit the editor when the preview is correct, test the visual on the report canvas, and save the PBIX.

Power BI fields assigned to the Values field well for Ataytis Vega Studio.
Add the numeric Value field and text Category field to the visual's Values well.
Ataytis Vega Studio visual selected in Power BI with the advanced editor action highlighted.
Open More options on the selected visual and choose Edit to enter Ataytis Vega Studio.

A practical first specification

This responsive horizontal bar chart aggregates the selected measure, sorts categories by value, and limits the result to the top 10 so labels remain readable.

Example fieldAssign and replace with
CategoryA text category such as Region, Product Category, or City. Use Find and Replace All so every Category reference changes.
ValueA numeric column or measure such as Sum of Net Sales or Sum of Cost. Replace every Value reference with the exact Data table heading.
Vega JSON
{
  "$schema": "https://vega.github.io/schema/vega/v6.json",
  "description": "Responsive top 10 horizontal bar chart for Power BI.",
  "width": 640,
  "height": 360,
  "autosize": {
    "type": "fit",
    "contains": "padding",
    "resize": true
  },
  "padding": {
    "left": 120,
    "right": 80,
    "top": 60,
    "bottom": 50
  },
  "title": {
    "text": "Top 10 categories",
    "subtitle": "Sorted by total value",
    "anchor": "start",
    "fontSize": 18,
    "subtitleFontSize": 12,
    "subtitleColor": "#64748b",
    "offset": 20
  },
  "data": [
    { "name": "dataset" },
    {
      "name": "chartData",
      "source": "dataset",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum['Category']) && isValid(datum['Value'])"
        },
        {
          "type": "aggregate",
          "groupby": ["Category"],
          "fields": ["Value"],
          "ops": ["sum"],
          "as": ["Amount"]
        },
        {
          "type": "collect",
          "sort": { "field": "Amount", "order": "descending" }
        },
        {
          "type": "window",
          "ops": ["row_number"],
          "as": ["Rank"]
        },
        {
          "type": "filter",
          "expr": "datum.Rank <= 10"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xScale",
      "type": "linear",
      "domain": { "data": "chartData", "field": "Amount" },
      "range": "width",
      "nice": true,
      "zero": true
    },
    {
      "name": "yScale",
      "type": "band",
      "domain": {
        "data": "chartData",
        "field": "Category",
        "sort": {
          "op": "sum",
          "field": "Amount",
          "order": "descending"
        }
      },
      "range": "height",
      "padding": 0.25
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xScale",
      "grid": true,
      "gridColor": "#e2e8f0",
      "domain": false,
      "tickCount": 5,
      "format": "~s",
      "title": "Value",
      "labelColor": "#64748b",
      "titleColor": "#334155"
    },
    {
      "orient": "left",
      "scale": "yScale",
      "domain": false,
      "ticks": false,
      "labelLimit": 110,
      "labelPadding": 8,
      "labelColor": "#334155"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": { "data": "chartData" },
      "encode": {
        "enter": {
          "y": { "scale": "yScale", "field": "Category" },
          "height": { "scale": "yScale", "band": 1 },
          "x": { "scale": "xScale", "value": 0 },
          "x2": { "scale": "xScale", "field": "Amount" },
          "fill": { "value": "#1976ff" },
          "cornerRadius": { "value": 4 },
          "tooltip": {
            "signal": "{'Category': datum.Category, 'Value': format(datum.Amount, ',.2f')}"
          }
        },
        "hover": {
          "fill": { "value": "#0f5fd7" }
        }
      }
    },
    {
      "type": "text",
      "from": { "data": "chartData" },
      "encode": {
        "enter": {
          "y": { "scale": "yScale", "field": "Category", "band": 0.5 },
          "x": { "scale": "xScale", "field": "Amount", "offset": 8 },
          "baseline": { "value": "middle" },
          "align": { "value": "left" },
          "text": { "signal": "format(datum.Amount, '.3s')" },
          "fontSize": { "value": 11 },
          "fontWeight": { "value": "bold" },
          "fill": { "value": "#334155" }
        }
      }
    }
  ]
}
A simple Vega bar chart rendered in Ataytis Vega Studio beside its JSON specification.
The completed top-10 example rendered from the connected Category and Value fields.

Choose manual or live preview

ModeUse forBehavior
Manual updateYou are making structural changes or temporarily have incomplete JSON.Changes remain staged until you choose Update visual or press Ctrl+Enter.
Live previewYou are refining values, colors, labels, or small valid expressions.The Studio reapplies changes while you type after a short debounce period. Toggle with Ctrl+Shift+Enter.
Create your first visual | AtaytisTech