← Back to Commentary and Essays

Vega-Lite for Your Website

Vega-Lite is a declarative grammar for charts and small data visualizations.

It is useful when a page needs a reproducible plot or chart that can be described compactly in text and rendered consistently.

Simple example

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"values": [{"category": "A", "value": 28}, {"category": "B", "value": 55}]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Authoritative sources

What you need to show it on your site

To display a live chart, the site needs either a build step that compiles the Vega-Lite specification into SVG or HTML, or a browser-side renderer that loads the specification at view time.

For permanent pages, the build-time SVG or static chart path is usually the best fit. It keeps the page stable and makes the chart part of the published page rather than a runtime request.