Vega-Lite examples

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

Vega-Lite is how you should put a chart on a Confluence page. Give it data, a mark and an encoding, and it works out the rest.

Eight charts, each a complete spec you can paste in and edit. Several are the same charts as in the Vega set, at a fraction of the length.

#Every example here is real

Each page holds a diagram that is stored, rendered and editable exactly like one you drew yourself. Open any of them, change something, and see what happens. Nothing here is a screenshot.

#In this set

Bar chart (Vega-Lite)A bar chart in a few lines of Vega-Lite JSON, the shortest chart spec in the space.Line chart (Vega-Lite)Two series plotted on one page with a Vega-Lite sequence generator and a line mark.Stacked bar (Vega-Lite)A stacked bar chart written in a few lines of Vega-Lite with a color encoding.Area chart (Vega-Lite)A Vega-Lite area chart filled to the baseline across a temporal axis.Scatter chart (Vega-Lite)A Vega-Lite scatter plot mapping two quantitative fields with a point mark.Donut chart (Vega-Lite)A donut chart from a Vega-Lite arc mark with an inner radius over categorical data.Heat map (Vega-Lite)A Vega-Lite heat map encoding a value as color across two categorical axes.Box diagram (Vega-Lite)A box plot built with the Vega-Lite boxplot mark, summarising distribution per category.

A real chart in about ten lines.