Vega-Lite

Vega-Lite is the practical way to put a chart on a Confluence page. Give it data, a mark type and an encoding, and it handles scales, axes and legends.

It is the first thing to try whenever somebody is about to paste a screenshot of a spreadsheet chart.

#What it is good at

• Bar, line, area, scatter and layered charts.

• Small datasets that belong in the document.

• Reports where the numbers should be reviewable.

#What it draws

#A worked example

A line chart with a colour series:

The source, which you can paste into a new diagram and edit:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Weekly active users by plan",
  "width": 360,
  "height": 200,
  "data": {
    "values": [
      {"week": "2026-07-06", "plan": "Free", "users": 1210},
      {"week": "2026-07-13", "plan": "Free", "users": 1305},
      {"week": "2026-07-20", "plan": "Free", "users": 1288},
      {"week": "2026-07-06", "plan": "Team", "users": 420},
      {"week": "2026-07-13", "plan": "Team", "users": 468},
      {"week": "2026-07-20", "plan": "Team", "users": 515}
    ]
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {"field": "week", "type": "temporal", "title": "Week"},
    "y": {"field": "users", "type": "quantitative", "title": "Active users"},
    "color": {"field": "plan", "type": "nominal"}
  }
}

#A few things that catch people out

• Field type matters: temporal gives you a date axis, nominal gives you categories.

• The data is a snapshot embedded in the page. For live data, link to a dashboard.

• If a spec gets long and fiddly, that is the signal to move to Vega.

#Related

Learn one properly. Borrow the rest when you need them.