Skip to main content

Vega-Lite

Vega-Lite creates data visualizations from concise mark and encoding declarations.

Use this type​

Use Vega-Lite for common charts that do not need the full Vega grammar.

Source format​

The source format is Vega-Lite JSON. Enter the source in the diagram.zip editor.

Syntax essentials​

  • Use a JSON object with a Vega-Lite schema URL.
  • Put inline records in data.values.
  • Select a mark type.
  • Map fields to channels in the encoding object.

Example​

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": {"values": [{"name": "A", "value": 4}]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "name", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}
Rendered exampleDrag to pan. Use the wheel or controls to zoom.
100%
This view uses the live diagram.zip renderer.

Limitations​

  • URL-backed data and images are not available.
  • diagram.zip returns SVG for this type.

Upstream reference​

Vega-Lite documentation