Image

Edit this page 
// Single View Specification
{
  "data": ... ,
  "mark": "image",
  "encoding": ... ,
  ...
}

Image marks allow external images, such as icons or photographs, to be included in Vega-Lite visualizations. Image files such as PNG or JPG images are loaded from provided URLs.

Documentation Overview

Image Mark Properties

// Single View Specification
{
  ...
  "mark": {
    "type": "image",
    ...
  },
  "encoding": ... ,
  ...
}

An image mark definition can contain any standard mark properties and the following special properties:

Property Type Description
url URI | ExprRef

The URL of the image file for image marks.
aspect Boolean | ExprRef

Whether to keep aspect ratio of image marks.
align String | ExprRef

The horizontal alignment of the text or ranged marks (area, bar, image, rect, rule). One of "left", "right", "center".

Note: Expression reference is not supported for range marks.
baseline String | ExprRef

For text marks, the vertical text baseline. One of "alphabetic" (default), "top", "middle", "bottom", "line-top", "line-bottom", or an expression reference that provides one of the valid values. The "line-top" and "line-bottom" values operate similarly to "top" and "bottom", but are calculated relative to the lineHeight rather than fontSize alone.

For range marks, the vertical alignment of the marks. One of "top", "middle", "bottom".

Note: Expression reference is not supported for range marks.

Examples

Scatterplot with Image Marks

Image Config

// Top-level View Specification
{
  ...
  "config": {
    "image": ...,
    ...
  }
}

The image property of the top-level config object sets the default properties for all image marks. If mark property encoding channels are specified for marks, these config values will be overridden.

The image config can contain any image mark properties (except type, style, and clip).