# Vega-Lite examples

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.](https://help.gocapable.com/diagrams/bar-chart-vega-lite.html)[Line chart (Vega-Lite)Two series plotted on one page with a Vega-Lite sequence generator and a line mark.](https://help.gocapable.com/diagrams/line-chart-vega-lite.html)[Stacked bar (Vega-Lite)A stacked bar chart written in a few lines of Vega-Lite with a color encoding.](https://help.gocapable.com/diagrams/stacked-bar-vega-lite.html)[Area chart (Vega-Lite)A Vega-Lite area chart filled to the baseline across a temporal axis.](https://help.gocapable.com/diagrams/area-chart-vega-lite.html)[Scatter chart (Vega-Lite)A Vega-Lite scatter plot mapping two quantitative fields with a point mark.](https://help.gocapable.com/diagrams/scatter-chart-vega-lite.html)[Donut chart (Vega-Lite)A donut chart from a Vega-Lite arc mark with an inner radius over categorical data.](https://help.gocapable.com/diagrams/donut-chart-vega-lite.html)[Heat map (Vega-Lite)A Vega-Lite heat map encoding a value as color across two categorical axes.](https://help.gocapable.com/diagrams/heat-map-vega-lite.html)[Box diagram (Vega-Lite)A box plot built with the Vega-Lite boxplot mark, summarising distribution per category.](https://help.gocapable.com/diagrams/box-diagram-vega-lite.html)

---

## Related

[ReferenceThe language reference behind these.](https://help.gocapable.com/diagrams/reference.html)

[Diagram typesGrouped by what you want to draw.](https://help.gocapable.com/diagrams/diagram-types.html)

[ExamplesEvery other set.](https://help.gocapable.com/diagrams/examples.html)

---

_A real chart in about ten lines._