This website is for Vega-Lite v1. Go to the main Vega-Lite homepage for the latest release.

Vega-Lite Specification

Vega-Lite Specifications

At its core, Vega-Lite specifications are JSON objects that describe visualizations as mappings from data to properties of graphical marks (e.g., points or bars). By simply providing a mark type and a mapping, Vega-Lite automatically produces other visualization components including axes, legends, and scales. Unless explicitly specified, Vega-Lite determines properties of these components based on a set of carefully designed rules. This approach allows Vega-Lite specifications to be succinct and expressive, but also provide user control.

As it is designed for analysis, Vega-Lite also supports data transformation such as aggregation, binning, time unit conversion, filtering, and sorting. In addition, it also supports faceting a single plot into trellis plots or small multiples.

{
  "description": ... ,
  "data": ... ,
  "mark": ... ,
  "transform": ...,
  "encoding": {
    "x": {
      "field": ...,
      "type": ...,
      ...
    },
    "y": ...,
    "color": ...,
    ...
  },
  "config": ...
}

In Vega-Lite, a specification can have the following top-level properties.

Property Type Description
description String An optional description of this mark for commenting purpose. This property has no effect on the output visualization.
width Integer Width of a single visualization. (For faceted plot, this represents the width of a single cell.) If not specified (undefined), this will be determined by the following rules:
• For x-axis with a continuous (non-ordinal) scale, the width will be the value of config.cell.width.
• For x-axis with an ordinal scale: if bandSize is a numeric value (default), the width is determined by the value of bandSize and the cardinality of the field mapped to x-channel. Otherwise, if the bandSize is "fit", the width will be the value of config.cell.width.
• If no field is mapped to x channel, the width will be the value of textBandWidth for text mark and the value of bandSize for other marks. Default value: undefined .Examples: Please see Customizing Size page.
height Integer Height of a single visualization. (For faceted plot, this represents the height of a single cell.) If not specified (undefined), this will be determined by the following rules:
• For y-axis with a continuous (non-ordinal) scale, the height will be the value of config.cell.height.
• For y-axis with an ordinal scale: if bandSize is a numeric value (default), the height is determined by the value of bandSize and the cardinality of the field mapped to y-channel. Otherwise, if the bandSize is "fit", the height will be the value of config.cell.height.
• If no field is mapped to x channel, the height will be the value of bandSize. Default value: undefined .Examples: Please see Customizing Size page.
data Object An object describing the data source.
transform Object An object describing filter and new field calculation.
mark String The mark type. One of "bar", "circle", "square", "tick", "line", "area", "point", and "text".
encoding Object A key-value mapping between encoding channels and definition of fields.
config Object Configuration object.